jQuery zTree超鏈接展示--JSON數(shù)據(jù)

    首先介紹zTree： zTree 是一個依靠 jQuery 實(shí)現(xiàn)的多功能 “樹插件”。優(yōu)異的性能、靈活的配置、多種功能的組合是 zTree 最大優(yōu)點(diǎn)。

    1、使用zTree一般需要引入下面幾個文件：

<link rel="stylesheet" href="../../../css/demo.css" type="text/css"> 
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css"> 
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script> 
<script type="text/javascript" src="../../../js/jquery.ztree.core-3.5.js"></script> 

這些文件都可以在http://www.ztree.me下載到。

    2、你需要在你的頁面相關(guān)位置放上一個div

<div class="zTreeDemoBackground left"> 
     <ul id="addressBook" class="ztree"></ul> 
</div> 

    3、其實(shí)樹狀結(jié)構(gòu)是通過獲取JSON。

<SCRIPT type="text/javascript"> 
        <!-- 
        var setting = { 
            data: { 
                simpleData: { 
                    enable: true 
                } 
            }, 
            callback: { 
                onClick: zTreeOnClick 
            } 
        }; 
               
        var unitinfos = $.parseJSON('${unitinfos}'); 
        for(var i=0;i<unitinfos.length;i++){ 
            if(unitinfos[i].pId=="0"){ 
                unitinfos[i].icon="${contextPath }/scripts/plugin/zTree/css/zTreeStyle/img/diy/1_open.png"; 
            } 
            else{ 
                unitinfos[i].icon="${contextPath }/scripts/plugin/zTree/css/zTreeStyle/img/diy/2.png"; 
            } 
        } 
        unitinfos[0].open=true; 
        var groups = $.parseJSON('${groups}'); 
        unitinfos.push({"id":"600000","pId":"0","name":"客戶", 
                        "icon":"${contextPath }/scripts/plugin/zTree/css/zTreeStyle/img/diy/1_open.png"}); 
        unitinfos.push({"id":"600001","pId":"0","name":"供應(yīng)商", 
                        "icon":"${contextPath }/scripts/plugin/zTree/css/zTreeStyle/img/diy/1_open.png"}); 
        unitinfos.push({"id":"600002","pId":"0","name":"人才信息庫", 
                        "icon":"${contextPath }/scripts/plugin/zTree/css/zTreeStyle/img/diy/1_open.png"}); 
         
        for(var j=0;j<groups.length;j++){ 
            groups[j].icon="${contextPath }/scripts/plugin/zTree/css/zTreeStyle/img/diy/2.png"; 
        } 
         
         
        function zTreeOnClick(event, treeId, treeNode) { 
            var url; 
            if(treeNode.id=='600000'){ 
                url="/oa/sys/addressBook!listAddressBookByUnit.do?s_bodytype=2"; 
            }else if(treeNode.id=='600001'){ 
                url="/oa/sys/addressBook!listAddressBookByUnit.do?s_bodytype=3"; 
            }else if(treeNode.id=='600002'){ 
                url="/oa/sys/addressBook!listAddressBookByUnit.do?s_bodytype=4"; 
            }else if(treeNode.remark=='group'){ 
                url="/oa/sys/addressBook!listAddressBookByGroup.do?s_groupid="+treeNode.id; 
            }else{               
                url="/oa/sys/addressBook!listAddressBookByUnit.do?s_unitcode="+treeNode.id+"&s_bodytype=1"; 
            } 
            $("#addressBookListByUnit").attr("action",url).submit(); 
        }; 
         
        $(document).ready(function(){ 
            $.fn.zTree.init($("#addressBook"), setting, unitinfos.concat(groups)); 
        }); 
</SCRIPT> 

其中

$(document).ready(function(){  
            $.fn.zTree.init($("#addressBook"), setting, unitinfos.concat(groups));  
}); 

中的#addressBook就是定位到第二步中的id為addressbook的ul中。上面代碼的JSON數(shù)據(jù)展示形式如下圖。

最終在頁面上的效果就是：