zTree使用记录

Posted 2021-03-24 yzyh

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了zTree使用记录相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/yzyh/zTreeStyle.css">
    <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/yzyh/demo.css">
    <script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://blog-static.cnblogs.com/files/yzyh/jquery-migrate-1.2.1.js" type="text/javascript"></script>
    <script src="https://blog-static.cnblogs.com/files/yzyh/jquery.ztree.all-3.5.min.js" type="text/javascript"></script>
    <script src="https://blog-static.cnblogs.com/files/yzyh/jquery.ztree.exhide-3.5.min.js" type="text/javascript"></script>
    <script src="https://blog-static.cnblogs.com/files/yzyh/MtrSearchZTree.js" type="text/javascript"></script>
    <link rel="stylesheet" href="https://www.jq22.com/jquery/bootstrap-3.3.4.css">
    <script src="https://www.jq22.com/jquery/bootstrap-3.3.4.js"></script>
    <script src="https://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script src="https://www.jq22.com/newjs/testData.js" type="text/javascript"></script>
    <script src="http://49.234.125.132/myjswj/testData.js"></script>
</head>

<body>
    <div class="row" style="margin: 50px;">
        <div class="col-md-3">
            <ul id="tree" class="ztree">
            </ul>
        </div>
    </div>

    <script>
        // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
        var setting = {};
        // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
        var zNodes = [{
            name: "test1",
            open: true, // 设置为true渲染时自动展开
            children: [{
                name: "test1_1"
            }, {
                name: "test1_2"
            }, {
                name: "test1",
                open: true,
                children: [{
                    name: "asdf"
                }, {
                    name: "vrsa"
                }]
            }]
        },
        {
            name: "test2",
            open: true,
            children: [{
                name: "test2_1"
            }, {
                name: "test2_2"
            }]
        }
        ];
        $(function () {
            $.fn.zTree.init($("#tree"), setting, zNodes);
            // 增加输入框和输入查询逻辑
            new MtrSearchZTree();
        });
    </script>

</body>

</html>

以上是关于zTree使用记录的主要内容，如果未能解决你的问题，请参考以下文章