Ztree树形组件简单实用

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);