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';
}

// 设置cookies
function  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();
}
// 读取cookies
function  getCookie(name)
{
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg)) return unescape(arr[2]);
else return null;
}

转载于:https://www.cnblogs.com/FrankChen/archive/2008/03/26/1122936.html