zTree学习笔记之展开树和收起树

最新推荐文章于 2023-04-28 10:43:00 发布

weixin_30518397

最新推荐文章于 2023-04-28 10:43:00 发布

阅读量278

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/qingqinglanlan/p/9327449.html

版权

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../css/zTreeStyle/zTreeStyle.css"> <script src="../js/jquery-1.4.4.min.js"></script> <script src="../js/jquery.ztree.all.min.js"></script> </head> <body> <ul id="leftTree" class="ztree"></ul> <button onclick="expandTree()">展开</button> <button onclick="closeTree()">合并</button> <script> var setting = { check:{ enable:true //显示勾选框 }, view: { showIcon: false,//是否显示节点的图标 showLine: true,//显示节点之间的连线。 expandSpeed: "slow",//节点展开、折叠时的动画速度 selectedMulti: false//不允许同时选中多个节点。 }, data: { simpleData: { enable:true, //使用简单数据模式 idKey: "id",//节点数据中保存唯一标识的属性名称 pIdKey: "pId",//节点数据中保存其父节点唯一标识的属性名称 rootPId: "" //用于修正根节点父节点数据 默认值：null } }, callback: {} }; var nodes = [ {id :"1",pId:"0",name :"山西省"}, {id :"2",pId:"0",name : "河北省"}, {id :"3",pId:"0",name : "内蒙省"}, {id :"4",pId:"0",name : "吉林省"}, {id :"11",pId:"1",name: "大同市"}, {id :"12",pId:"1",name: "朔州市"}, {id :"21",pId:"2",name: "石家庄"}, {id :"22",pId:"2",name: "唐山市"}, {id :"31",pId:"3",name: "赤峰市"}, {id :"32",pId:"3",name: "呼市"}, {id :"41",pId:"4",name: "长春市"}, {id :"42",pId:"4",name: "四平市"}, {id :"43",pId:"4",name: "辽源市"}, {id :"111",pId:"11",name:"浑源县"}, {id :"112",pId:"11",name: "阳高县"}, {id :"121",pId:"12",name: "山阴县"}, {id :"122",pId:"12",name: "应县"} ]; var tree = $.fn.zTree.init($('#leftTree'), setting, nodes); tree.expandAll(tree);//默认是展开的 //展开树 function expandTree() { var tree = $.fn.zTree.getZTreeObj('leftTree'); tree.expandAll(tree); } //收起树：只展开根节点下的一级节点 function closeTree() { var tree = $.fn.zTree.getZTreeObj('leftTree'); //获取 zTree 的全部节点数据将节点数据转换为简单 Array 格式 var nodes = tree.transformToArray(tree.getNodes()); for(var i=0;i<nodes.length;i++){ if(nodes[i].level == 0){ console.log(nodes[i].name); //根节点展开 tree.expandNode(nodes[i],true,true,false) }else{ tree.expandNode(nodes[i],false,true,false) } } } </script> </body> </html>