ztree.js常用功能及踩坑汇总

官方文档 http://www.treejs.cn/v3/main.php#_zTreeInfo   

               http://www.treejs.cn/v3/api.php

入门指南 http://www.treejs.cn/v3/faq.php#_206

例子，几乎满足所有定制化需求 http://www.treejs.cn/v3/demo.php#_101

 <link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css">
 <script type="text/javascript" src="jquery.ztree.core-3.x.js"></script>

<div>
   <ul id="treeDemo" class="ztree"></ul>
</div>

踩得坑

1.点击事件绑定在回调函数：onClick
2.展开事件：onAsyncSuccess  使用tree 的expandNode（）方法
3.异步加载的树，配置节点参数写在async的dataFilter属性值方法filter（）
4.获取树对象 的所有节点

  var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
  var nodes = treeObj.transformToArray(treeObj.getNodes()); 

5.树节点排序写在filter（）

function compare(property){
     return function(a,b){
        var value1 = a[property];
        var value2 = b[property];
        return value1 - value2;
     }
}
调用： 
return childNodes.sort(compare('order'));

6.关闭双击事件
在setting里添加   

view:{dblClickExpand:false}

在onclick事件添加

var zTree=$.fn.zTree.getZTreeObj("treeDemo");
zTree.expandNode(treeNode);

7.修改图标样式

var setting = {
        data: {
            simpleData: {
                enable: true
            }
        }, key: {
            icon: 'iconSkin'  //使用自定义icon
        },view:{
            showLine: false //是否展示层级线
        }
    };
  var zNodes = [
        {
            name: "父节点1 - 展开",
            iconSkin: "Icon01",
            open: true,
            children: [
                {
                    name: "父节点11 - 折叠",
                    iconSkin: "pIcon02",
                    children: [
                        { name: "叶子节点111叶子节点111叶子节点111叶子节点111", iconSkin: "pIcon02" },
                        { name: "叶子节点112", iconSkin: "pIcon02" },
                        { name: "叶子节点113",iconSkin: "pIcon02" },
                        { name: "叶子节点114",iconSkin: "pIcon02" }
                    ]
                },
                {
                    name: "父节点12 - 折叠",
                    children: [
                        {
                            name: "叶子节点121",
                            iconSkin: "pIcon02",
                            children: [
                                { name: "叶子节点111叶子节点111叶子节点111叶子节点111", iconSkin: "pIcon02" },
                                { name: "叶子节点112", iconSkin: "pIcon02" },
                                { name: "叶子节点113", iconSkin: "pIcon02" },
                                { name: "叶子节点114", iconSkin: "pIcon02" }
                            ]
                        },
                        { name: "叶子节点122", iconSkin: "pIcon02" },
                        { name: "叶子节点123", iconSkin: "pIcon02" },
                        { name: "叶子节点124", iconSkin: "pIcon02" },
                        { name: "叶子节点121", iconSkin: "pIcon02" },
                        { name: "叶子节点122", iconSkin: "pIcon02" },
                        { name: "叶子节点123", iconSkin: "pIcon02" },
                        { name: "叶子节点124", iconSkin: "pIcon02" },
                        { name: "叶子节点121", iconSkin: "pIcon02" },
                        { name: "叶子节点122", iconSkin: "pIcon02" },
                        { name: "叶子节点123", iconSkin: "pIcon02" },
                        { name: "叶子节点124", iconSkin: "pIcon02" },
                        { name: "叶子节点121", iconSkin: "pIcon02" },
                        { name: "叶子节点124", iconSkin: "pIcon02" },
                        { name: "叶子节点121", iconSkin: "pIcon02" },
                        { name: "叶子节点122", iconSkin: "pIcon02" },
                        { name: "叶子节点123", iconSkin: "pIcon02" },
                        { name: "叶子节点124", iconSkin: "pIcon02" },
                        { name: "叶子节点121", iconSkin: "pIcon02" },
                        { name: "叶子节点124", iconSkin: "pIcon02" },
                        { name: "叶子节点121", iconSkin: "pIcon02" },
                        { name: "叶子节点122", iconSkin: "pIcon02" },
                        { name: "叶子节点123", iconSkin: "pIcon02" },
                        { name: "叶子节点124", iconSkin: "pIcon02" },
                        { name: "叶子节点121", iconSkin: "pIcon02" },
                        { name: "叶子节点124", iconSkin: "pIcon02" },
                        { name: "叶子节点121", iconSkin: "pIcon02"},
                        { name: "叶子节点122", iconSkin: "pIcon02" },
                        { name: "叶子节点123", iconSkin: "pIcon02" },
                        { name: "叶子节点124", iconSkin: "pIcon02" },
                        { name: "叶子节点121", iconSkin: "pIcon02" },
                        { name: "叶子节点124", iconSkin: "pIcon02" },
                        { name: "叶子节点121", iconSkin: "pIcon02" },
                        { name: "叶子节点122", iconSkin: "pIcon02" },
                        { name: "叶子节点123", iconSkin: "pIcon02" },
                        { name: "叶子节点124", iconSkin: "pIcon02"},
                        { name: "叶子节点121", iconSkin: "pIcon02" },
                        { name: "叶子节点122", iconSkin: "pIcon02" },
                        { name: "叶子节点123", iconSkin: "pIcon02" },
                        { name: "叶子节点124", iconSkin: "pIcon02" }
                    ]
                    , iconSkin:"pIcon02"
                },
                { name: "父节点13 - 没有子节点", iconSkin: "pIcon02" }
            ]
        },
        {
            name: "父节点2 - 折叠",
            iconSkin: "Icon01",
            children: [
                {
                    name: "父节点21 - 展开", open: true,
                    iconSkin: "pIcon02",
                    children: [
                        { name: "叶子节点211", iconSkin: "pIcon02" },
                        { name: "叶子节点212", iconSkin: "pIcon02" },
                        { name: "叶子节点213", iconSkin: "pIcon02" },
                        { name: "叶子节点214", iconSkin: "pIcon02" },
                        { name: "叶子节点211", iconSkin: "pIcon02"},
                        { name: "叶子节点212", iconSkin: "pIcon02" },
                        { name: "叶子节点213", iconSkin: "pIcon02" },
                        { name: "叶子节点214", iconSkin: "pIcon02" },
                        { name: "叶子节点211", iconSkin: "pIcon02" },
                        { name: "叶子节点212", iconSkin: "pIcon02" },
                        { name: "叶子节点213", iconSkin: "pIcon02" },
                        { name: "叶子节点214", iconSkin: "pIcon02" },
                        { name: "叶子节点211", iconSkin: "pIcon02" },
                        { name: "叶子节点212", iconSkin: "pIcon02" },
                        { name: "叶子节点213", iconSkin: "pIcon02" },
                        { name: "叶子节点214", iconSkin: "pIcon02" }
                    ]
                },
                {
                    name: "父节点22 - 折叠",
                    children: [
                        { name: "叶子节点221", iconSkin: "pIcon02" },
                        { name: "叶子节点222", iconSkin: "pIcon02" },
                        { name: "叶子节点223", iconSkin: "pIcon02" },
                        { name: "叶子节点224", iconSkin: "pIcon02" }
                    ], iconSkin: "pIcon02"
                },
                {
                    name: "父节点23 - 折叠",
                    children: [
                        { name: "叶子节点231", iconSkin: "pIcon02" },
                        { name: "叶子节点232", iconSkin: "pIcon02" },
                        { name: "叶子节点233", iconSkin: "pIcon02" },
                        { name: "叶子节点234", iconSkin: "pIcon02" }
                    ], iconSkin: "pIcon02"
                }
            ]
        },
        { name: "父节点3 - 没有子节点", 
          iconSkin: "Icon01",
          isParent:true //是否是父节点，如果是，则会有展开折叠按钮
       }
    ];

参考的比较好的总结文章

https://blog.csdn.net/qq_32444825/article/details/81170621

https://blog.csdn.net/qq_35934094/article/details/80852989

https://www.jianshu.com/p/0708ccaa0612