ztre的使用入门

Posted 2020-10-11 奋斗的大海

1、首先需要下载ztree插件，

2、把下载的插件中的js和css放到项目中去（img文件默认放到css文件下方，如果把img文件放到其他地方，加载出来的树将没有默认图标（文件夹图标）和节点前的展开闭合的加减号，

3、在项目中引入jquery.js、ztree核心js、zTreeStyle.css

      jquery-1.4.2.js、jquery.ztree.core-3.x.js、zTreeStyle.css  这三个都是ztree插件中的，其中jquery.js  可以是更高版本的

     这是基本使用，复杂的还需添加jquery.ztree.excheck-3.5.jsjquery.ztree.exedit-3.5.js   最好都添加上

4、写一个ztree的容器<ul id="treeDemo" class="ztree"></ul>       其中class是必须的，且值必须是ztree，id是ztree初始化后ztree的treeId

5、设置setting    var setting = {};

6、ztree数据

      var zNodes = [ {name:"test1", open:true, children:[ {name:"test1_1"}, {name:"test1_2"}]}, {name:"test2", open:true, children:[ {name:"test2_1"}, {name:"test2_2"}]} ];

7、初始化ztree

      zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);

8、若setting设置   simpleData    则树节点数据可以是简单数组（即不需要写成上方zNodes那样的json嵌套格式）

      var setting = {
           simpleData: {
           enable: true
       };

     此时zNodes可以是下面格式

    var zNodes =[
           { id:1, pId:0, name:"节点搜索演示 1", t:"id=1", open:true},
           { id:11, pId:1, name:"关键字可以是名字", t:"id=11"},
           { id:12, pId:1, name:"关键字可以是level", t:"id=12"},
           { id:13, pId:1, name:"关键字可以是id", t:"id=13"},
           { id:14, pId:1, name:"关键字可以是各种属性", t:"id=14"},
            { id:2, pId:0, name:"节点搜索演示 2", t:"id=2", open:true},
           { id:21, pId:2, name:"可以只搜索一个节点", t:"id=21"},
          { id:22, pId:2, name:"可以搜索节点集合", t:"id=22"},
          { id:23, pId:2, name:"搜我吧", t:"id=23"},
          { id:3, pId:0, name:"节点搜索演示 3", t:"id=3", open:true },
          { id:31, pId:3, name:"我的 id 是: 31", t:"id=31"},
          { id:32, pId:31, name:"我的 id 是: 32", t:"id=32"},
          { id:33, pId:32, name:"我的 id 是: 33", t:"id=33"}
  ];