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數據展示形式如下圖。

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