ztree的一点详解

ztree例子

必须的一些js
jquery.ztree.all.min.js
jquery.ztree.core.js
jquery.ztree.excheck.js//为check模式
css
metroStyle.css
具体看官方文档

代码片

代码如下

<ul id="treeDemo" class="ztree" style="margin-top: 25px"></ul>

初始化加载树

			var setting = {
			       async: {
			           enable: true,
			           url:"url",
			           autoParam:["id", "pid", "name"],
			           dataFilter: filter
			       },
			       data:{
			           simpleData:{
			               enable: true,
			               idKey:'id',
			               pIdKey:'pid',
			               rootPId: 0
			           }
			       },
			       check:{
			           enable:true,  //true 、 false 分别表示 显示 、不显示 复选框或单选框
			           nocheckInherit:true  //当父节点设置 nocheck = true 时，设置子节点是否自动继承 nocheck = true
			       },
			       callback:{
			           onCheck: zTreeOnClick
			       },
			       view:{
			           showIcon: false
			       }
			   };
     ```
     
  初始化加载树
    $(document).ready(function(){
         $.ajax({//初始化树
             url:"url",
             type:"post",
             dataType: "json",
             success: function(data){
                 console.log(data);
                 var zTreeObj = $.fn.zTree.init($("#treeDemo"),setting, data.data);
                 //让第一个父节点展开
                 var rootNode_0 = zTreeObj.getNodeByParam('pid',0,null);
                 zTreeObj.expandNode(rootNode_0, true, false, false, false);
                 var treeObj = $.fn.zTree.getZTreeObj("treeDemo");//默认不选中根节点
                 var nodes = treeObj.getNodes();
                 treeObj.checkNode(nodes[0], false, false);  //父节点不被选中
                 treeObj.setChkDisabled(nodes[0], true); //父节点禁止勾选
                 treeObj.expandAll(true);
                 //二级节点不被选中
                 var nodes = treeObj.transformToArray(treeObj.getNodes());
                 for (var i=0, l=nodes.length; i < l; i++) {
                     if (nodes[i].pid==rootNode_0.id){
                         treeObj.setChkDisabled(nodes[i], true);//节点不能选中
                     }
                 }
                 xz();//这是根据判断默认选中哪些节点
             },
             error: function(){

             }
         });
     });