[TOC] > [官網](http://www.treejs.cn/v3/demo.php#_304) ## 配置 ``` var setting = { view: { selectedMulti: true, //設置是否能夠同時選中多個節點 showIcon: true, //設置是否顯示節點圖標 showLine: true, //設置是否顯示節點與節點之間的連線 showTitle: true, //設置是否顯示節點的title提示信息 }, data: { simpleData: { enable: ture, //設置是否啟用簡單數據格式（zTree支持標準數據格式跟簡單數據格式，上面例子中是標準數據格式） idKey: "id", //設置啟用簡單數據格式時id對應的屬性名稱 pidKey: "pId" //設置啟用簡單數據格式時parentId對應的屬性名稱,ztree根據id及pid層級關系構建樹結構 } }, check: { enable: true //設置是否顯示checkbox復選框 }, callback: { onClick: onClick, //定義節點單擊事件回調函數 onRightClick: OnRightClick, //定義節點右鍵單擊事件回調函數 beforeRename: beforeRename, //定義節點重新編輯成功前回調函數，一般用于節點編輯時判斷輸入的節點名稱是否合法 onDblClick: onDblClick, //定義節點雙擊事件回調函數 onCheck: onCheck //定義節點復選框選中或取消選中事件的回調函數 }, async: { enable: true, //設置啟用異步加載 type: "get", //異步加載類型:post和get contentType: "application/json", //定義ajax提交參數的參數類型，一般為json格式 url: "/Design/Get", //定義數據請求路徑 autoParam: ["id=id", "name=name"] //定義提交時參數的名稱，=號前面標識節點屬性，后面標識提交時json數據中參數的名稱 dataFilter: filterFuction } }; ``` ## zTree的數據格式 ``` treeNode: { name, //節點顯示的文本 checked, //節點是否勾選，ztree配置啟用復選框時有效 open, //節點是否展開 icon, //節點的圖標 iconOpen, //節點展開式的圖標 iconClose, //節點折疊時的圖標 id, //節點的標識屬性，對應的是啟用簡單數據格式時idKey對應的屬性名，并不一定是id,如果setting中定義的idKey:"zId",那么此處就是zId pId, //節點parentId屬性，命名規則同id children, //得到該節點所有孩子節點，直接下級，若要得到所有下屬層級節點，需要自己寫遞歸得到 isParent, //判斷該節點是否是父節點，一般應用中通常需要判斷只有葉子節點才能進行相關操作，或者刪除時判斷下面是有子節點時經常用到。 getPath() //得到該節點的路徑，即所有父節點，包括自己，此方法返回的是一個數組，通常用于創建類似面包屑導航的東西A-->B-->C } ``` ## 技巧 ### 添加新屬性 ``` 如果除了 id,pid 等之外,還有額外的值,則,在treeNode 中依然可以訪問到這些值 ``` ### 節點單擊操作 ``` function onClick(e, treeId, treeNode) { if (treeNode.isParent) //如果不是葉子結點，結束 return; alert(treeNode.name); //獲取當前結點上的相關屬性數據，執行相關邏輯 }; ``` ### 節點復選框事件 [跳轉查看](https://www.cnblogs.com/fonour/p/zTree.html) ### 實現zTree的右鍵增刪改操作 [跳轉查看](https://www.cnblogs.com/fonour/p/zTree.html) ### 如果想顯示內容為所有的文件夾,修改icon ``` for(var i=0;i<json.length;i++){ json[i].icon = "/Public/Admin/img/folder.png"; //修改所有圖片為 文佳夾 if (i == 0) json[i].open = 1 ; //默認打開第一層 } ```