关于Jquery和Ztree的应用和总结

树状结构目录显示比较流行的有dtree、xtree、EXTtree、E3tree、ztree。

Ztree是所有中功能最强大的树。Dtree和Xtree已经逐步淘汰，EXTtree、E3tree功能不全。

ZTree是一个依靠 jQuery 实现的多功能 “树插件”，支持选择框等显示，动态更改图标，提供多种事件响应回调，而且异步数据功能强大。

示例如下：

添加相关CSS和js库

<head>
<meta charset="utf-8" />
    //添加相关的ztree的css
<link rel="stylesheet" href="../plugins/jQueryZtree/demo.css" />
<link rel="stylesheet" href="../plugins/jQueryZtree/zTreeStyle.css" />
//添加相关的jquery和ztree的js库
<script src="../plugins/jQueryZtree/jquery-1.4.4.min.js"></script>
<script src="../plugins/jQueryZtree/jquery.ztree.core-3.5.js"></script>
<script src="../plugins/jQueryZtree/jquery.ztree.excheck-3.5.min.js"></script>
<SCRIPT type="text/javascript">
    <!--
    var setting = {
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                onCheck: onCheck
            }
        };

    function filter(node) {   //过滤器直选中2级节点累加
        return (node.checked == true);
    }

    function onCheck(e, treeId, treeNode) {
        var pNode = treeNode;
        var pNodePath = "";
        while(!!pNode){
            pNodePath = "\\"+ pNode.name + pNodePath;
            pNode = pNode.getParentNode();
        }
        alert(pNodePath);
        /*
        var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo").getNodesByFilter(filter);

        for(var i = 0,len = zTreeObj.length; i < len; i++){
            alert(zTreeObj[i].name);
        }
        */
    }       

    var zNodes =[
        { name:"父节点1 - 展开", open:true,
            children: [
                { name:"父节点11 - 折叠",
                    children: [
                        { name:"叶子节点111"},
                        { name:"叶子节点112"},
                        { name:"叶子节点113"},
                        { name:"叶子节点114"}
                    ]},
                { name:"父节点12 - 折叠",
                    children: [
                        { name:"叶子节点121"},
                        { name:"叶子节点122"},
                        { name:"叶子节点123"},
                        { name:"叶子节点124"}
                    ]},
                { name:"父节点13 - 没有子节点", isParent:true}
            ]},
        { name:"父节点2 - 折叠",
            children: [
                { name:"父节点21 - 展开", open:true,
                    children: [
                        { name:"叶子节点211"},
                        { name:"叶子节点212"},
                        { name:"叶子节点213"},
                        { name:"叶子节点214"}
                    ]},
                { name:"父节点22 - 折叠",
                    children: [
                        { name:"叶子节点221"},
                        { name:"叶子节点222"},
                        { name:"叶子节点223"},
                        { name:"叶子节点224"}
                    ]},
                { name:"父节点23 - 折叠",
                    children: [
                        { name:"叶子节点231"},
                        { name:"叶子节点232"},
                        { name:"叶子节点233"},
                        { name:"叶子节点234"}
                    ]}
            ]},
        { name:"父节点3 - 没有子节点", isParent:true}

    ];

    $(document).ready(function(){
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        var zTree = $.fn.zTree.getZTreeObj("treeDemo")
            //配置ztree同时选中父节点和子节点
        zTree.setting.check.chkboxType = { "Y" : "ps", "N" : "ps" };
    });
    //-->
    </SCRIPT>
</head>
<body>
   <div class="content_wrap">
        <div class="zTreeDemoBackground left">
        <ul id="treeDemo" class="ztree"></ul>
    </div>
</div>
</body>

注意在head中的JavaScript标签，标签里面要加上，否则部分JavaScript可能无法执行，比如普通for循环就不能执行
```
<SCRIPT type="text/javascript">

</SCRIPT>
```

来源：oschina

链接：https://my.oschina.net/u/4408675/blog/4547319

标签

javascript

dtree

ztree

jquery