ztree 总结
来源：互联网 发布：页面加载执行js方法 编辑：程序博客网 时间：2024/06/05 19:05
最近有兴收集下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" onclick="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>阅读全文
0 0
- ztree 总结
- zTree使用总结
- ztree入门应用总结
- jquery插件ztree的总结
- 关于zTree的使用总结
- zTree
- ztree
- ztree
- ztree
- ztree
- zTree
- zTree
- zTree
- zTree
- ztree
- Ztree
- ztree
- ztree
- thinkphp5 的 nginx 配置文件
- 机器学习之决策树 Decision Tree（一）
- 网络编程
- 我自己收藏的web前端网站（持续更新中...）
- LOJ6008 「网络流 24 题
- ztree 总结
- ViewGroup 自定义演示
- 【Scikit-Learn 中文文档】寻求帮助
- java类加载器
- 无穷小微积分是ZFC大花园的一颗奇葩
- thinkphp 缩略图
- 初探JavaScript魅力（2）
- 混淆矩阵
- Java 中关于this、static、final 关键字的使用
