jQuery zTree超链接展示--JSON数据

    首先介绍zTree： zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

    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、你需要在你的页面相关位置放上一个div

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

    3、其实树状结构是通过获取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":"供应商", 
                        "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数据展示形式如下图。

最终在页面上的效果就是：