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