ztree 总结

最新推荐文章于 2022-08-05 13:55:21 发布
最新推荐文章于 2022-08-05 13:55:21 发布
阅读量493 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ylhsuper/article/details/78743500
版权

最近有兴收集下ztree这个用法。

顺便写下：

一些文件路径的引用：大家自行可以更改下。

下面是三个demo：

一：

<!DOCTYPE html>  
<html>  
<head>  
    <title>ZTREE DEMO - 默认zTree几点无checkbox动态设置节点checkbox出现</title>  
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" href="./ztree2/css/ztree.css" type="text/css">
  <script type="text/javascript" src="./jquery.3.2.1.js"></script>
  <script type="text/javascript" src="./ztree/js/jquery.ztree.core.min.js"></script>
<!-- <script type="text/javascript" src="./zTree2/js/jquery.ztree.excheck-3.5.js"></script> -->
  <script type="text/javascript" src="./ztree/js/jquery.ztree.excheck.min.js"></script>
  <!-- <script type="text/javascript" src="jquery.ztree.exedit.js"></script> -->


    <script type="text/javascript">  
        <!--  
        var setting = {  
            check: {  
                enable: true,  
                nocheckInherit: false  
            },  
            data: {  
                simpleData: {  
                    enable: true  
                }  
            }  
        };  
        //ztree用于初始化的静态数据          
        var zNodes = [  
            { id: 1, pId: 0, name: "随意勾选 1",nocheck: true,},  
            { id: 11, pId: 1, name: "随意勾选 1-1", nocheck: true },  
            { id: 111, pId: 11, name: "无 checkbox 1-1-1", nocheck: true },  
            { id: 112, pId: 11, name: "随意勾选 1-1-2", nocheck: true },  
            { id: 12, pId: 1, name: "无 checkbox 1-2", nocheck: true },  
            { id: 2, pId: 0, name: "随意勾选 2", nocheck: true },  
        ];  
  
        //过滤节点的机制 直接return node表示不做任何过滤  
        function filter(node) {  
            return node;  
        }  
  
        ///动态设置zTree的所有节点有checkbox  
        function DynamicUpdateNodeCheck() {  
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");  
            console.log(zTree);
            //根据过滤机制获得zTree的所有节点              
            var nodes = zTree.getNodesByFilter(filter);  
            console.log(nodes);
            //遍历每一个节点然后动态更新nocheck属性值  
            for (var i = 0; i < nodes.length; i++) {  
                var node = nodes[i];  
                console.log(node);
                node.nocheck = false; //表示显示checkbox  
                zTree.updateNode(node);  
            }  
        }  
  
        ///页面加载后初始化zTree数据且默认展开所有节点  
        $(document).ready(function () {  
            $.fn.zTree.init($("#treeDemo"), setting, zNodes).expandAll(true);  
        });  
        //-->  
    </script>  
</head>  
<body>  
    <h1>  
        Checkbox nocheck 演示</h1>  
    <div class="content_wrap">  
        <div class="zTreeDemoBackground left">  
            <ul id="treeDemo" class="ztree">  
            </ul>  
        </div>  
        <div class="right">  
            <p>  
                默认情况下设置任何节点无checkbox选择框，需要配置每一个节点的nocheck属性为true即可。</p>  
            <p>  
                zTree加载完成后通过updateNode(node)方法动态更新节点的nocheck属性为false，则节点将会显示checkbox。</p>  
            <h3>  
                STEP DAY</h3>  
            <div>  
                <input type="button" value="动态设置节点有checkbox" οnclick="DynamicUpdateNodeCheck()" />  
            </div>  
        </div>  
    </div>  
</body>  
</html>

二：

<!DOCTYPE html>
<HTML>
 <HEAD>
  <TITLE> ZTREE DEMO </TITLE>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <!-- <link rel="stylesheet" href="./ztree/css/zTreeStyle.css" type="text/css"> -->
  <link rel="stylesheet" href="./ztree2/css/ztree.css" type="text/css">
  <script type="text/javascript" src="./jquery.3.2.1.js"></script>
  <script type="text/javascript" src="./ztree/js/jquery.ztree.core.min.js"></script>
  <script type="text/javascript" src="./ztree/js/jquery.ztree.excheck.min.js"></script>
<!--
  <script type="text/javascript" src="jquery.ztree.excheck.js"></script>
  <script type="text/javascript" src="jquery.ztree.exedit.js"></script>
-->
  <SCRIPT type="text/javascript" >
    function showIconForTree(treeId,treeNode) {
        return treeNode.level != 1;
    };
    function zTreeOnClick(event, treeId, treeNode,clickFlag) {
        // alert(treeNode.tId + ", " + treeNode.name);
       console.log(clickFlag)
    };
    function zTreeOnCheck(event, treeId, treeNode) {
        console.log("treeNode.tId: "+treeNode.tId + ",treeNode.name: " + treeNode.name + ",treeNode.checked: " + treeNode.checked);
        var treeObj = $.fn.zTree.getZTreeObj("tree");
        
        var zTree = $.fn.zTree.getZTreeObj("tree"),
            checkCount = zTree.getCheckedNodes(true).length,
            nocheckCount = zTree.getCheckedNodes(false).length,
            changeCount = zTree.getChangeCheckedNodes().length;
        var getCheckedNodesSelectedArr = [];
        for (var i = 0; i <= zTree.getCheckedNodes(true).length - 1; i++) {
            getCheckedNodesSelectedArr[i] = {};
            getCheckedNodesSelectedArr[i].id = zTree.getCheckedNodes(true)[i].id;
            getCheckedNodesSelectedArr[i].pId = zTree.getCheckedNodes(true)[i].pId;
            getCheckedNodesSelectedArr[i].name = zTree.getCheckedNodes(true)[i].name;
            //属性要对应成的是初始化数据的字段。
        };
        console.log(zTree.getCheckedNodes(true));
        console.log(getCheckedNodesSelectedArr);
    };
    function beforeClick(treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("tree");
        // zTree.checkNode(treeNode, !treeNode.checked, null, true);
        zTree.checkNode(treeNode, !treeNode.checked, true, true); //第二个参数!treeNode.checked和"",省略此参数效果等同，则根据对此节点的勾选状态进行 toggle 切换，第三个参数设置为true时候进行父子节点的勾选联动操作 ，第四个参数true 表示执行此方法时触发 beforeCheck & onCheck 事件回调函数；false 表示执行此方法时不触发事件回调函数
        return false;
    };
    var zTreeObj,
    setting = {
        view: {
            selectedMulti: false, //是否允许同时选中多个节点。默认true
            // showIcon: false  //设置 zTree 是否显示节点的图标。
            showIcon: showIconForTree,  //设置 zTree 仅仅 level=1 的节点不显示图标
            showLine: true,
            showTitle: true,
            txtSelectedEnable: false,
            fontCss : {color:"#000"},
            expandSpeed: "slow",
            dblClickExpand: true //双击节点时，是否自动展开父节点的标识 默认是true

        },
        callback: {
            onClick: zTreeOnClick,
            beforeClick: beforeClick,
            onCheck: zTreeOnCheck,
        },
         check: {  
            enable: true,  
            nocheckInherit: false  
        },  
        data: {  
            simpleData: {  
                enable: true  
            }  
        }  
    },
   
    zTreeNodes = [
            { 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(){
        // zTreeObj = $.fn.zTree.init($("#tree"), setting, zTreeNodes);
        zTreeObj = $.fn.zTree.init($("#tree"), setting, zTreeNodes).expandAll(true); //自动敞开

    });
  </SCRIPT>
 </HEAD>

<BODY>
    <ul id="tree" class="ztree" style="width:230px; overflow:auto;"></ul>
</BODY>
</HTML>

三：（升级版，可根据需要自己定制） 

<!DOCTYPE html>
<HTML>
 <HEAD>
  <TITLE> ZTREE DEMO </TITLE>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <!-- <link rel="stylesheet" href="./ztree/css/zTreeStyle.css" type="text/css"> -->
  <link rel="stylesheet" href="./zTree_v3-master/zTree_v3-master/css/metroStyle/metroStyle.css" type="text/css">
  <!-- <link rel="stylesheet" href="./ztree2/css/ztree.css" type="text/css"> -->
  <script type="text/javascript" src="./jquery.3.2.1.js"></script>
  <script type="text/javascript" src="./ztree/js/jquery.ztree.core.min.js"></script>
  <script type="text/javascript" src="./ztree/js/jquery.ztree.excheck.min.js"></script>
<!--
  <script type="text/javascript" src="jquery.ztree.excheck.js"></script>
  <script type="text/javascript" src="jquery.ztree.exedit.js"></script>
-->
<!-- 此demo可以实现的功能如下
    1.可以做权限管理，
    2.可以根据页面id,和按钮id设置不同的图标，不同的样式（添加iconSkin字段）
    3.单击选中的项目可以同时勾选复选框,（回调中要添加beforeClick）
    4.单击完毕可以收集选中的和没被选中的选项（zTreeOnCheck回调）
    5.另外ztree有可供选择的风格，outlook，metro,awesome
 -->
    <style type="text/css">
    /*自定义图标样式，比如是按钮或*/
.ztree li span.button.pIcon01_ico_open{margin-right:2px; background: url(./zTree2/css/img/diy/1_open.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle;}
.ztree li span.button.pIcon01_ico_close{margin-right:2px; background: url(./zTree2/css/img/diy/1_close.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle;}
.ztree li span.button.pIcon02_ico_open, .ztree li span.button.pIcon02_ico_close{margin-right:2px; background: url(../../../css/zTreeStyle/img/diy/2.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
.ztree li span.button.icon01_ico_docu{margin-right:2px; background: url(./zTree2/css/img/diy/3.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle;}
.ztree li span.button.icon02_ico_docu{margin-right:2px; background: url(./zTree2/css/img/diy/4.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle;}
.ztree li span.button.icon03_ico_docu{margin-right:2px; background: url(./zTree2/css/img/diy/5.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle;}
.ztree li span.button.icon04_ico_docu{margin-right:2px; background: url(./zTree2/css/img/diy/6.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle;}
.ztree li span.button.icon05_ico_docu{margin-right:2px; background: url(./zTree2/css/imgdiy/7.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle;}
.ztree li span.button.icon06_ico_docu{margin-right:2px; background: url(./zTree2/css/img/diy/8.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle;}
    </style>
  <SCRIPT type="text/javascript" >
    function showIconForTree(treeId,treeNode) {
        return treeNode.level != 1;
    };
    function zTreeOnClick(event, treeId, treeNode,clickFlag) {
        // alert(treeNode.tId + ", " + treeNode.name);
       // console.log(clickFlag)
    };
    function zTreeOnCheck(event, treeId, treeNode) {
        // console.log("treeNode.tId: "+treeNode.tId + ",treeNode.name: " + treeNode.name + ",treeNode.checked: " + treeNode.checked);
        var zTree = $.fn.zTree.getZTreeObj("tree"),
            checkCount = zTree.getCheckedNodes(true).length,
            nocheckCount = zTree.getCheckedNodes(false).length,
            changeCount = zTree.getChangeCheckedNodes().length;
        var getCheckedNodesSelectedArr = [];
        for (var i = 0; i <= zTree.getCheckedNodes(true).length - 1; i++) {
            getCheckedNodesSelectedArr[i] = {};
            getCheckedNodesSelectedArr[i].id = zTree.getCheckedNodes(true)[i].id;
            getCheckedNodesSelectedArr[i].pId = zTree.getCheckedNodes(true)[i].pId;
            getCheckedNodesSelectedArr[i].name = zTree.getCheckedNodes(true)[i].name;
            //属性要对应成的是初始化数据的字段。
        };
        
        console.log("zTree.getCheckedNodes(true) ");
        console.log(zTree.getCheckedNodes(true));
        console.log("zTree.getCheckedNodes(false) ");
        console.log(zTree.getCheckedNodes(false));
        console.log("getCheckedNodesSelectedArr ");
        console.log(getCheckedNodesSelectedArr);

    };
    function beforeClick(treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("tree");
        // zTree.checkNode(treeNode, !treeNode.checked, null, true);
        zTree.checkNode(treeNode, !treeNode.checked, true, true); //第二个参数!treeNode.checked和"",省略此参数效果等同，则根据对此节点的勾选状态进行 toggle 切换，第三个参数设置为true时候进行父子节点的勾选联动操作 ，第四个参数true 表示执行此方法时触发 beforeCheck & onCheck 事件回调函数；false 表示执行此方法时不触发事件回调函数
        return false;
    };
    var zTreeObj,
    setting = {
        view: {
            selectedMulti: false, //是否允许同时选中多个节点。默认true
            // showIcon: false,  //设置 zTree 是否显示节点的图标。如果这种false 那么初始化数据代码中设置iconSkin是无效的
            // showIcon: showIconForTree,  //设置 zTree 仅仅 level=1 的节点不显示图标
            showLine: true,
            showTitle: true,
            txtSelectedEnable: false,
            fontCss : {color:"#000"},
            expandSpeed: "slow",
            dblClickExpand: true //双击节点时，是否自动展开父节点的标识 默认是true

        },
        callback: {
            onClick: zTreeOnClick,
            beforeClick: beforeClick,//单击节点选中前面的复选框：利用 onClick 回调 配合 checkNode 方法就可以轻松实现，你可以查看Demosuper/select_menu_checkbox.html
            onCheck: zTreeOnCheck,
        },
         check: {  
            enable: true,  
            nocheckInherit: false,
            chkboxType: { "Y": "p", "N": "s" }   //checkbox 勾选操作，只影响父级节点；取消勾选操作，只影响子级节点
            // chkboxType: { "Y": "", "N": "" }  //将不会有任何自动关联勾选的操作。

        },  
        data: {  
            simpleData: {  
                enable: true  
            }  
        }  
    },
    zTreeNodes = [
            {
                "id": 1,
                "name": "首页",
                "purview": 1,
                "isVisible": false,
                "buttons": [],
                "items": [],
                isParent:true,
            },
            {
                "id": 2,
                "name": "前端布置",
                "purview": 1,
                "isVisible": false,
                "buttons": [],
                // "items": [
                "children": [
                    {
                        "id": 11,
                        // "title": "banner位设置",
                        "name": "banner位设置",
                        "purview": 1,
                        "itemButtons": []
                    },
                    {
                        "id": 12,
                        "name": "分区和标签",
                        "purview": 0,
                        // "itemButtons": [
                        "children": [
                            {
                                "id": 5,
                                "name": "二级分区管理",
                                "purview": 0,
                                "key": ""
                            }
                        ]
                    },
                    {
                        "id": 9,
                        "name": "启动页和icon设置",
                        "purview": 0,
                        "itemButtons": []
                    },
                    {
                        "id": 10,
                        "name": "礼物设置统计",
                        "purview": 0,
                        "itemButtons": []
                    }
                ]
            },
            {
                "id": 3,
                "name": "用户管理",
                "purview": 1,
                "isVisible": false,
                "children": [
                    {
                        "id": 6,
                        "name": "**用户",
                        "purview": 1,
                        "key": "blockUsers"
                    },
                    {
                        "id": 9,
                        "name": "查看**记录",
                        "purview": 0,
                        "key": ""
                    },
                    {
                        "id": 10,
                        "name": "查看**记录",
                        "purview": 0,
                        "key": ""
                    },
                    {
                        "id": 8,
                        "name": "**用户",
                        "purview": 1,
                        "key": "unblockUsers"
                    }
                ],
                "items": []
            },
            {
                "id": 4,
                "name": "主**会",
                "purview": 1,
                "isVisible": false,
                "buttons": [],
                // "items": [
                "children": [
                    {
                        "id": 16,
                        "name": "**设置",
                        "purview": 0,
                        "iconSkin":"pIcon01",
                        // "itemButtons": [
                        "children": [
                            {
                                "id": 23,
                                "name": "推荐审核",
                                "purview": 0,
                                "key": "recommentReview",
                                "iconSkin":"icon01",
                            },
                            {
                                "id": 24,
                                "name": "修改推荐",
                                "purview": 0,
                                "key": "modifyRecomment",
                                "iconSkin":"icon01",
                            },
                            {
                                "id": 25,
                                "name": "提前结束",
                                "purview": 0,
                                "key": "",
                                "iconSkin":"icon01",
                            }
                        ]
                    },
                    {
                        "id": 13,
                        "name": "**管理查询",
                        "purview": 1,
                        // "itemButtons": [
                        "children": [
                            {
                                "id": 11,
                                "name": "新增**",
                                "purview": 1,
                                "key": "",
                                "iconSkin":"icon01",
                            },
                            {
                                "id": 12,
                                "name": "封禁**",
                                "purview": 0,
                                "key": ""
                            },
                            {
                                "id": 13,
                                "name": "解**播",
                                "purview": 1,
                                "key": ""
                            },
                            {
                                "id": 15,
                                "name": "设置**",
                                "purview": 0,
                                "key": ""
                            },
                            {
                                "id": 16,
                                "name": "修改资料",
                                "purview": 1,
                                "key": ""
                            },
                            {
                                "id": 17,
                                "name": "日程安排",
                                "purview": 0,
                                "key": ""
                            },
                            {
                                "id": 14,
                                "name": "签约&设置",
                                "purview": 0,
                                "key": ""
                            }
                        ]
                    },
                ]
            }

        ];

    $(document).ready(function(){
        // zTreeObj = $.fn.zTree.init($("#tree"), setting, zTreeNodes);
        zTreeObj = $.fn.zTree.init($("#tree"), setting, zTreeNodes).expandAll(true); //自动敞开

    });
  </SCRIPT>
 </HEAD>

<BODY>
    <ul id="tree" class="ztree" style="width:230px; overflow:auto;"></ul>
</BODY>
</HTML>


ylhsuper
关注
ztree-JS-CSS
04-26
后台资源展示页所需的基本JS文件
11zTree - 用 zTree 方法更新节点数据
阿甘兄
04-22 4312
1、可针对 name、target、 url、icon、 iconSkin、checked、nocheck 等这几个用于显示效果的参数进行更新，其他用于 zTreeNodes 的参数请不要随意更新，对于展开节点，还请调用 expandNode方法，因此请勿随意修改 open 属性。 2、用此方法修改 checked 勾选状态不会触发 beforeCheck / onCheck 事件回调函数。 请通...
zTree更新文本
心的宁静专栏
01-26 956
function initSet02(url,param,isCheck,isEdit) { return { async: { enable: true,//开启异步加载 url:url, type:"get", autoParam:["id", "name", "level"],//参数名称可以写成"id=zId",那么后台接收参数为zId contentType:"applic
android ztree,2018-02-06 Ztree基础、 Android生命周期、AugularJS-特性2、OS X系统安装python，pygame、设计模式...
weixin_32286661的博客
05-28 174
第一组：姚成栋 Ztree基础在用新框架的时候你可以看到搜索部门用了一个树，如下图image.png这个树其实就是用了ztree。大致上介绍一下用法。Ztree的数据格式是标准的 JSON 数据需要嵌套表示节点的父子包含关系，例如：var nodes = [{name: "父节点1", children: [{name: "子节点1"},{name: "子节点2"}]}];如果需要使用 id / ...
ztree 更新节点updateNode无效
代码的星辰大海
08-05 977
ztree 更新节点updateNode无效
详解js树形控件—zTree使用总结
11-29
其特点包括代码模块化，可以根据需求选择加载特定功能的库，例如只需核心功能就加载 `jquery.ztree.core-3.5.js`，需要勾选功能则加载 `jquery.ztree.excheck-3.5.min.js`，编辑功能则加载 `jquery.ztree.exedit-3.5...
ztree树型插件
10-26
总结，zTree作为一款优秀的前端树型插件，不仅提供了丰富的功能，还具有良好的社区支持和详尽的文档。无论是在网站导航、文件管理还是组织结构展示等场景，zTree都能发挥出色的作用。通过深入理解和灵活运用，开发者...
jQuery 利用ztree实现树形表格的实例代码
10-19
总结来说，这个实例展示了如何使用jQuery和zTree库创建一个树形表格。通过将JSON格式的数据绑定到zTree，我们可以轻松地构建具有层级关系的数据展示。同时，zTree的灵活性使得我们可以根据项目的具体需求进行定制，...
zTree_v3-master_ztree_beforemouseup_
09-30
总结，zTree_v3-master作为一款强大的前端树状菜单库，其丰富的功能和开放的源码为开发者提供了极大的便利。深入理解和运用“beforemouseup”等事件，结合源码进行二次开发，能够使我们的项目具备更高级别的交互体验...
ztree中更新节点信息
duansamve的博客
11-10 750
var node = zTreeobj.getNodeByParam("id", treeNode.id, null); // 根据id获取当前节点 node.id = data.dir.id; // 修改name属性 zTreeobj.updateNode(node); // 调用updateNode修改属性，一定要加这一句，不然reAsyncChildNodes没有任何反应 zTreeobj.reAsyncChildNodes(node, 'refresh', false); ...
实现ztree树形的js和css
01-30
实现ztree树形的js和css，实现checkbox多选按钮，单选、部分选、全选
zTree的使用
weixin_33692284的博客
03-04 175
一、节点模糊搜索功能：搜索成功后，自动高亮显示并定位、展开搜索到的节点。 二、节点异步加载：1、点击展开时加载数据；2、选中节点时加载数据。 前台代码如下： <script type="text/javascript"> //ztree设置 var setting = { view: { fontCss...
组织树ztree.js基本用法
阿留申低压的博客
07-29 1262
项目中经常会用到下图所示的组织树，今天仔细研究下官方文档，在这里把一些入门的技巧记录下来。【简介】zTree 是一个依靠 jQuery 实现的多功能 “树插件”。形式多样，功能强大。 配置方式采用jQuery与JSON的语法结构，参数配置简单，较易上手。 兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器，即使在IE6下也能很好的支持。 支持静态 和 Ajax 异步加载节点
js树形控件—zTree使用
热门推荐
qq_35934094的博客
06-29 2万+
0 zTree简介树形控件的使用是应用开发过程中必不可少的。zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。0.0 zTree的特点最新版的zTree将核心代码按照功能进行了分割，不需要的代码可以不用加载，如普通使用只需要加载核心的jquery.ztree.core-3.5.js，需要使用勾选功能加载jquery.zt...
经验总结10--ztree增删改
qijunming1208的专栏
06-10 790
ztree增删改，动态更改，不需刷新页面。
前端 -＞ zTree -- jQuery 树插件
rod0320的博客
12-23 619
文章目录详细参考官方网址:上图setting 配置详解 zTree 方法详解zTree v3.x 入门指南 详细参考官方网址: 上图 setting 配置详解 zTree 方法详解 参考:zTree v3.5.46 API 文档 zTree v3.x 入门指南 蓝奏云css文件下载: 你也可以去官方的地方下载 考虑到还是会有第一次使用 zTree 的朋友，因此入门指南不能少 至少让大家快速明白如何开始制作一棵属于自己的树。 步骤 1、文件准备 将需要使用的 zTree v3.x 相关的 js、css
js树形控件—zTree使用总结
在水一方
07-23 4498
0 zTree简介 树形控件的使用是应用开发过程中必不可少的。zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。 0.0 zTree的特点 最新版的zTree将核心代码按照功能进行了分割，不需要的代码可以不用加载，如普通使用只需要加载核心的jquery.ztree.core-3.5.js，需要使用勾选功能加载jquery.ztree.excheck-3.5.min.js，需要使用编辑功能加载jquery.ztree.exed
JQuery-zTree.js使用范例
weixin_34067102的博客
09-19 473
2019独角兽企业重金招聘Python工程师标准>>> ...
使用jQuery zTree创建树形菜单的实战总结
"这篇文章除了介绍如何使用jQuery zTree加载树形菜单功能外，还概述了zTree插件的主要特性和优势。zTree是一个基于JQuery的Tree插件，具备延迟加载、多浏览器兼容性、JSON数据支持、动态加载、自定义图标和灵活的...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值