DIV+CSS+JS实现TreeView
如果数据太多,ASP.NET里面自带的TreeView显示就会非常的慢,所以用DIV+CSS+JS自已写了一个类似TreeView的效果.
因为状态是用COOKIE来保存的,所以用户禁止了COOKIES那不能保存状态了.
文件下载:点击下载
CSS样式:
#treeview
{
}
width:200px;
}#treeview ul{ list-style-type:none; margin:0px; padding:0px 0px 0px 12px;}#treeview ul li{ margin: 0px; padding:0px 0px 0px 0px; line-height:20px; width:auto; clear:both;}#treeview div{ padding:0px; margin:0px;}#treeview h1{ margin:0px; padding:0px; font-size:12px; font-weight:normal; line-height:20px; background:url(images/dirico.gif) no-repeat left; padding-left:16px; float:left;}#treeview .opendir{ background:url(images/openico.gif) no-repeat left;}#treeview .closedir{ background:url(images/closeico.gif) no-repeat left;}#treeview .opendir,.closedir{ width:12px; height:20px; float:left; cursor:pointer;}#treeview .nodir{ width:12px; height:20px; float:left;}#treeview .none{display:none;}HTML代码:
<div id="treeview"><ul><li id="depth_1_item_1"> <div class="closedir" id="depth_1_item_1_ico" onclick="controlNode(this,'depth_1_item_1')"></div><h1>中国</h1> <div id="depth_1_item_1_layer" style="display:none;"> <ul> <li id="depth_2_item_1_1"> <div class="closedir" id="depth_2_item_1_1_ico" onclick="controlNode(this,'depth_2_item_1_1')"></div><h1><a href="#">东北地区</a></h1> <div id="depth_2_item_1_1_layer" style="display:none;"> <ul> <li id="depth_3_item_1_1_1"> <div class="closedir" id="depth_3_item_1_1_1_ico" onclick="controlNode(this,'depth_3_item_1_1_1')"></div><h1><a href="#">黑龙江省</a></h1> <div id="depth_3_item_1_1_1_layer" style="display:none;"> <ul> <li id="depth_4_item_1_1_1_1"><div class="nodir"></div><h1><a href="#">大庆市</a></h1></li> <li id="depth_4_item_1_1_1_2"><div class="nodir"></div><h1><a href="#">大兴安岭市</a></h1></li> <li id="depth_4_item_1_1_1_3"><div class="nodir"></div><h1><a href="#">哈尔滨市</a></h1></li> <li id="depth_4_item_1_1_1_4"><div class="nodir"></div><h1><a href="#">鹤岗市</a></h1></li> <li id="depth_4_item_1_1_1_5"><div class="nodir"></div><h1><a href="#">黑河市</a></h1></li> <li id="depth_4_item_1_1_1_6"><div class="nodir"></div><h1><a href="#">鸡西市</a></h1></li> </ul> </div> </li> <li id="depth_3_item_1_1_2"><div class="nodir"></div><h1><a href="#">吉林省</a></h1></li> <li id="depth_3_item_1_1_3"><div class="nodir"></div><h1><a href="#">辽宁省</a></h1></li> </ul> </div> </li> <li id="depth_2_item_1_2"> <div class="closedir" id="depth_2_item_1_2_ico" onclick="controlNode(this,'depth_2_item_1_2')"></div><h1><a href="#">华北地区</a></h1> <div id="depth_2_item_1_2_layer" style="display:none;"> <ul> <li><div class="nodir"></div><h1><a href="#">北京市</a></h1></li> <li><div class="nodir"></div><h1><a href="#">天津市</a></h1></li> <li><div class="nodir"></div><h1><a href="#">内蒙古</a></h1></li> <li><div class="nodir"></div><h1><a href="#">山西省</a></h1></li> <li><div class="nodir"></div><h1><a href="#">河北省</a></h1></li> </ul> </div> </li> <li id="depth_2_item_1_3"><div class="nodir"></div><h1>西北地区</h1></li> <li id="depth_2_item_1_4"><div class="nodir"></div><h1>华东地区</h1></li> <li id="depth_2_item_1_5"><div class="nodir"></div><h1>西南地区</h1></li> <li id="depth_2_item_1_6"><div class="nodir"></div><h1>华南地区</h1></li> <li id="depth_2_item_1_7"><div class="nodir"></div><h1>华中地区</h1></li> <li id="depth_2_item_1_8"><div class="nodir"></div><h1>港澳台</h1></li> </ul> </div></li><li id="item_3"><div class="nodir"></div><h1>俄罗斯</h1></li><li id="item_4"><div class="nodir"></div><h1>美国</h1></li><li id="item_5"><div class="nodir"></div><h1>韩国</h1></li><li id="item_6"><div class="nodir"></div><h1>澳大利亚</h1></li><li id="item_7"><div class="nodir"></div><h1>印度</h1></li><li id="item_8"><div class="nodir"></div><h1>加拿大</h1></li></ul></div>JS代码:
defaultNodeState();function defaultNodeState(){ var nodeState = getCookie("nodeState"); if(nodeState == null)
{
setCookie("nodeState",",|,|,");
} var layer = nodeState.split('|'); for(var i=0;i<layer.length;i++) { if(layer[i] != ",") { var lItem = layer[i].split(','); var nodeIco = document.getElementById(lItem[0]+"_ico"); var nodeLayer = document.getElementById(lItem[0]+"_layer"); OpenNode(nodeIco); ShowDiv(nodeLayer); } }}function controlNode(obj,layerId){ var className = obj.className.toLowerCase(); var layer = document.getElementById(layerId + "_layer"); cookiesNode(layerId,className); if(className == "opendir") { HideDiv(layer); obj.className = "closedir"; } else if (className == "closedir") { ShowDiv(layer); obj.className = "opendir"; }}function cookiesNode(layerId,className){ var nodeState = getCookie("nodeState");if(nodeState == null)
{
nodeState = ",|,|,";
setCookie("nodeState",nodeState);
}
var layer = nodeState.split('|'); var lDepth = getDepth(layerId); if(className == "opendir") { layer[lDepth-1] = "," } else { if(layer[lDepth-1] != ",") { var lItem = layer[lDepth-1].split(','); var lIco = document.getElementById(lItem[0]+"_ico"); var lLayer = document.getElementById(lItem[0]+"_layer"); HideDiv(lLayer); CloseNode(lIco); } layer[lDepth-1] = layerId+","+lDepth; } var cValue = layer[0]; for(var i=1;i<layer.length;i++) { cValue += "|" + layer[i]; } setCookie("nodeState",cValue);}function getDepth(layerId){ var lItem = layerId.split('_'); return lItem[1];}function OpenNode(obj){ obj.className = "opendir";}function CloseNode(obj){ obj.className = "closedir";}function HideDiv(obj){ obj.style.display='none';}function ShowDiv(obj){ obj.style.display='block';}//设置cookiesfunction setCookie(name,value){var Days = 30;var exp = new Date(); exp.setTime(exp.getTime() + Days*24*60*60*1000);document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();}//读取cookiesfunction getCookie(name){var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");if(arr=document.cookie.match(reg)) return unescape(arr[2]);else return null;}
