码迷,mamicode.com
首页 > 其他好文 > 详细

zTree使用记录

时间:2019-12-11 00:44:08      阅读:114      评论:0      收藏:0      [点我收藏+]

标签:数据   属性   参考   asc   file   node   ref   styles   new   

zTree v3.2 API 文档==>点击进入

<!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使用记录

标签:数据   属性   参考   asc   file   node   ref   styles   new   

原文地址:https://www.cnblogs.com/yzyh/p/12019667.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!