無限樹Jquery插件zTree的使用方法

  其實Ztree官網已經有詳細的API文檔，一切以官網上的說明為准,我在此只是結合實踐總結幾條常用的ztree的功能特性.

  （ztree的語法結構是基於key-value的形式配置）

 1：支持異步加載數據

• 　　語法配置：　　　

async: {
　　　　　　　　enable: true, 

　　　　　　　　url:'abc.ashx',

　　　　　　　　otherParam: { "request": "requestname" }

　　　　　　　　　}

• 　 簡要說明:

   　　　　enable :設置 zTree 是否開啟異步加載模式.

  　　　　 url:Ajax 獲取數據的 URL 地址.

   　　　　otherParam:Ajax 請求提交的靜態參數鍵值對.相當於ajax中的data參數.

2：加載數據並綁定,一般都是定義數據結構實體即model，此數據結構要包含層級關系通常包括:ID,父ID,Name.

•     配置語法:

data: {
　　　　　　　　simpleData: {
　　　　　　　　enable: true
　　　　　　　　　　 　　　  }
　　　　　　 　}

　　　　或者

data: {
　　　　　　　　key: {
　　　　　　　　children: "childrens"
　　　　　　 　　　　}
　　　　  　　　　}

•      簡要說明:

　　　　　  simpleData：即可采用數組作為數據源綁定.此時異步加載的數據可為平行結構.

　　　     　children： 指定節點數據中保存子節點數據的屬性名稱,此時異步加載的數據為樹的折疊結構;所以后端加載數據時要使用遞歸算法.

3:支持單選，復選功能

• 　　語法配置:

check: {
　　　　　　　　enable: true,
             chkStyle: "checkbox",
　　　　　　　　radioType: "all"
　　　　　　　　chkboxType:{ "Y": "", "N": "" }
　　　　　　　　　},

data: {
　　　　　　　　key: {
　　　　　　　　checked: "IsChecked"
　　　　　　　　　　 }
　　　　  　　　　}

• 　　簡要說明:

　　　　　　enable:設置 zTree 的節點上是否顯示 checkbox / radio

　　　　　　chkStyle:勾選框類型(checkbox 或 radio）

　　　　　　radioType:radio 的分組范圍

　　　　　　chkboxType:勾選 checkbox 對於父子節點的關聯關系

　　　　　　checked:為加載數據后復選框是否勾選.IsChecked為后端數據結構model中定義的字段.

4:支持添加子節點,編輯節點,刪除節點事件

　　我這里介紹如何采用自定義添加，編輯，刪除按鈕的方式

•  　  語法配置:

view: {
　　　　　　　　addHoverDom: addHoverDom,
　　　　　　　　removeHoverDom: removeHoverDom
　　　　　　　　　}

　　　　 其中addHoverDom 函數為:

function addHoverDom(treeId, treeNode) {
　　　　　　var sObj = $("#" + treeNode.tId + "_span");
　　　　　　if ($("#addBtn_" + treeNode.id).length > 0) return;
　　　　　　var str= "<a id='addBtn_" + treeNode.id + "'  onclick='自定義函數1(" + treeNode.DepartmentID + ")'>添加子節點</a>";
　　　　　　str+= "<a id='addBtn1_" + treeNode.id + "'  onclick='自定義函數2(" + treeNode.DepartmentID + ")'>編輯節點</a>";
　　　　　　str+= "<a id='addBtn2_" + treeNode.id + "'  onclick='自定義函數3(" + treeNode.DepartmentID + ")'>刪除節點</a>";
　　　　　　sObj.after(str);
　　　　　　　　　　　　　　　　　　　　　　　　};

　　　   其中removeHoverDom函數為:

function removeHoverDom(treeId, treeNode) {
　　　　　　$("#addBtn_" + treeNode.id).unbind().remove();
　　　　　　$("#addBtn1_" + treeNode.id).unbind().remove();
　　　　　　$("#addBtn2_" + treeNode.id).unbind().remove();
　　　　　　　　　　　　　　　　　　　　　　　　　　　};

•      簡要說明:

　　addHoverDom:用於當鼠標移動到節點上時，顯示用戶自定義控件，顯示隱藏狀態同 zTree 內部的編輯、刪除按鈕

　　removeHoverDom:用於當鼠標移出節點時，隱藏用戶自定義控件，顯示隱藏狀態同 zTree 內部的編輯、刪除按鈕

 

更多精彩文章請關注公眾號：