Ztree树形组件简单实用

更新时间:2020-07-02 09:41:41 点击次数:1077次
Ztree
是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。专门适合项目开发,尤其是 树状菜单、树状数据的Web显示、权限管理等等.

1.导入Ztree组件
<link rel="stylesheet" type="text/css"
href="plugins/ztree/css/zTreeStyle/zTreeStyle.css">

<script type="text/javascript"
src="plugins/ztree/js/jquery-1.4.4.min.js"></script>

<script type="text/javascript"
src="plugins/ztree/js/jquery.ztree.core-3.5.js"></script>

<script type="text/javascript"
src="plugins/ztree/js/jquery.ztree.excheck-3.5.js"></script>

2.属性介绍
2.1构建ztree的json数据格式
**标准的json数据格式: **

//标准的json数据结构
var zNodes = [
    {name:"test1",  children:[{name:"test1_1"}, {name:"test1_2",
    children:[{name:"test1_2_1"},{name:"test1_2_2"}]}]},
    {name:"test2",  children:[{name:"test2_1"}, {name:"test2_2"}]}
    ];

**简单的json结构: **

var zNodes=[
  {id:"1",name:"test1",pId:"0"},
  {id:"2",name:"test2",pId:"0"},
  {id:"11",name:"test1_1",pId:"1"},
  {id:"12",name:"test1_2",pId:"1"},  
  {id:"21",name:"test2_1",pId:"2"},
  {id:"22",name:"test2_2",pId:"2",checked:true},
  {id:"121",name:"test1_2_1",pId:"12"}
       ]

2.2 setting设置
var setting = {
  data: {
   simpleData: {
   enable: true, //开启了简单的json结构
      idKey: "id",
      pIdKey: "pId",
      rootPId: 0
     }
},
   check: {
     enable: true  //开启了树形节点上复选框
    }
};

2.3初始化Ztree
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);

2.4展开所有的树形节点
//展开树形节点
 zTreeObj.expandAll(true); 

2.5获取已勾选的数据节点
let checkedNodes = zTreeObj.getCheckedNodes(true);

本站文章版权归原作者及原出处所有 。内容为作者个人观点, 并不代表本站赞同其观点和对其真实性负责,本站只提供参考并不构成任何投资及应用建议。本站是一个个人学习交流的平台,网站上部分文章为转载,并不用于任何商业目的,我们已经尽可能的对作者和来源进行了通告,但是能力有限或疏忽,造成漏登,请及时联系我们,我们将根据著作权人的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。

回到顶部
嘿,我来帮您!