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 >< 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 >< 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 >< href ="#" > 大庆市 </ a ></ h1 ></ li >
                        
< li  id ="depth_4_item_1_1_1_2" >< div  class ="nodir" ></ div >< h1 >< href ="#" > 大兴安岭市 </ a ></ h1 ></ li >
                        
< li  id ="depth_4_item_1_1_1_3" >< div  class ="nodir" ></ div >< h1 >< href ="#" > 哈尔滨市 </ a ></ h1 ></ li >
                        
< li  id ="depth_4_item_1_1_1_4" >< div  class ="nodir" ></ div >< h1 >< href ="#" > 鹤岗市 </ a ></ h1 ></ li >
                        
< li  id ="depth_4_item_1_1_1_5" >< div  class ="nodir" ></ div >< h1 >< href ="#" > 黑河市 </ a ></ h1 ></ li >
                        
< li  id ="depth_4_item_1_1_1_6" >< div  class ="nodir" ></ div >< h1 >< href ="#" > 鸡西市 </ a ></ h1 ></ li >
                        
</ ul >
                    
</ div >
                
</ li >
                
< li  id ="depth_3_item_1_1_2" >< div  class ="nodir" ></ div >< h1 >< href ="#" > 吉林省 </ a ></ h1 ></ li >
                
< li  id ="depth_3_item_1_1_3" >< div  class ="nodir" ></ div >< h1 >< 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 >< href ="#" > 华北地区 </ a ></ h1 >
            
< div  id ="depth_2_item_1_2_layer"  style ="display:none;" >
                
< ul >
                
< li >< div  class ="nodir" ></ div >< h1 >< href ="#" > 北京市 </ a ></ h1 ></ li >
                
< li >< div  class ="nodir" ></ div >< h1 >< href ="#" > 天津市 </ a ></ h1 ></ li >
                
< li >< div  class ="nodir" ></ div >< h1 >< href ="#" > 内蒙古 </ a ></ h1 ></ li >
                
< li >< div  class ="nodir" ></ div >< h1 >< href ="#" > 山西省 </ a ></ h1 ></ li >
                
< li >< div  class ="nodir" ></ div >< h1 >< 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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值