JQuery ZTree使用方法详解

1. 引入ZTree库文件

首先需要在网页中引入 jquery.js 和 ztree 的 css 和 js 文件。

<!--引入JQuery文件-->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

<!--引入ztree的css和js文件-->
<link rel="stylesheet" href="https://cdn.bootcss.com/zTree.v3/3.5.29/css/zTreeStyle/zTreeStyle.min.css">
<script src="https://cdn.bootcss.com/zTree.v3/3.5.29/js/jquery.ztree.core.min.js"></script>

2. 创建zTree

创建一个占位符 div，然后使用下面的代码创建 zTree：

<div id="tree"></div>

<script>

    // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
    var setting = {
        data: {
            key: {
                name: "name"
            }
        }
    };

    // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
    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}
    ];

    // 初始化zTree
    $(document).ready(function(){
        $.fn.zTree.init($("#tree"), setting, zNodes);
    });

</script>

3. zTree的参数配置

• data: 数据属性相关配置
• key: 数据中节点的属性名称
  • name: 包含每个节点名称的属性

下面是一个例子，展示如何使用URL从后台获取异步数据：

<div id="tree"></div>

<script>

    var setting = {
        async: {
            enable: true,
            url: "demo/json/company.json",
            autoParam: ["id", "name=n", "level=lv"],
            otherParam: {"otherParam": "zTreeAsyncTest"},
            dataFilter: filter
        },
        data: {
            simpleData: {
                enable: true
            }
        }
    };

    function filter(treeId, parentNode, childNodes) {
        if (!childNodes) return null;
        for (var i=0, l=childNodes.length; i<l; i++) {
            childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
        }
        return childNodes;
    }

    $(document).ready(function(){
        $.fn.zTree.init($("#tree"), setting);
    });

</script>

示例

• 示例1：一个简单示例

下面是一个简单的示例，展示如何创建一个简单的 zTree，并且在点击树节点时弹出相关信息：

<div id="tree"></div>

<script>

    var setting = {
        view: {
            dblClickExpand: false,
            showLine: true,
            selectedMulti: false
        },
        data: {
            simpleData: {
                enable:true,
                idKey: "id",
                pIdKey: "pId",
                rootPId: ""
            }
        },
        callback: {
            onClick: onClick
        }
    };

    var zNodes =[
        { id:1, pId:0, name:"随意勾选 1", open:true},
        { id:11, pId:1, name:"随意勾选 1-1", open:true},
        { id:111, pId:11, name:"随意勾选 1-1-1"},
        { id:112, pId:11, name:"随意勾选 1-1-2"},
        { id:113, pId:11, name:"随意勾选 1-1-3"},
        { id:114, pId:11, name:"随意勾选 1-1-4"},
        { id:12, pId:1, name:"随意勾选 1-2", open:true},
        { id:121, pId:12, name:"随意勾选 1-2-1"},
        { id:122, pId:12, name:"随意勾选 1-2-2"},
        { id:123, pId:12, name:"随意勾选 1-2-3"},
        { id:124, pId:12, name:"随意勾选 1-2-4"},
        { id:13, pId:1, name:"随意勾选 1-3", open:true},
        { id:131, pId:13, name:"随意勾选 1-3-1"},
        { id:132, pId:13, name:"随意勾选 1-3-2"},
        { id:133, pId:13, name:"随意勾选 1-3-3"},
        { id:134, pId:13, name:"随意勾选 1-3-4"},
        { id:135, pId:13, name:"随意勾选 1-3-5"}
    ];

    function onClick(e, treeId, treeNode) {
        alert(treeNode.name);
    }

    $(document).ready(function(){
        $.fn.zTree.init($("#tree"), setting, zNodes);
    });

</script>

• 示例2：异步加载示例

下面是一个示例，展示如何使用异步加载zTree：

<div id="tree"></div>

<script>

    var setting = {
        async: {
            enable: true,
            url: "asyncData",
            autoParam: ["id"],
            otherParam: {"otherParam":"zTreeAsyncTest"},
            dataFilter: filter
        },
        view: {
            dblClickExpand: false
        },
        data: {
            simpleData: {
                enable: true
            }
        }
    };

    function filter(treeId, parentNode, childNodes) {
        if (!childNodes) return null;
        for (var i=0, l=childNodes.length; i<l; i++) {
            childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
        }
        return childNodes;
    }

    $(document).ready(function(){
        $.fn.zTree.init($("#tree"), setting);
    });

</script>

以上两个示例分别展示了如何使用 zTree 的基本配置和异步加载配置。通过以上的例子，读者可以了解到 zTree 的主要配置参数，可以根据自己的需求进行配置。