zTree外掛常鍵用法簡單介紹
jQuery實現的無限極zTree外掛在實際應用中可以說隨處可見,足見它的方便之處。
關於它的用法有官方提供的API可以參閱,不過本章節這裡再囉嗦幾句,介紹一下它的一些常見操作。
一.支援非同步載入資料:
[JavaScript] 純文字檢視 複製程式碼async:{ enable: true, url:'abc.ashx', otherParam: { "request": "requestname" } }
引數說明:
enable :設定 zTree 是否開啟非同步載入模式.
url:Ajax 獲取資料的 URL 地址.
otherParam:Ajax 請求提交的靜態引數鍵值對.相當於ajax中的data引數.
二.載入資料並繫結:
一般都是定義資料結構實體即model,此資料結構要包含層級關係通常包括:ID,父ID,Name.
語法結構:
[JavaScript] 純文字檢視 複製程式碼data: { simpleData: { enable: true } }
也可以使用下面的方式:
[JavaScript] 純文字檢視 複製程式碼data: { key: { children: "childrens", checked: "IsChecked" } }
引數說明:
simpleData:即可採用陣列作為資料來源繫結.此時非同步載入的資料可為平行結構.
children:指定節點資料中儲存子節點資料的屬性名稱,此時非同步載入的資料為樹的摺疊結構;所以後端載入資料時要使用遞迴演算法.
三.支援單選,複選功能:
[JavaScript] 純文字檢視 複製程式碼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中定義的欄位.
四.支援新增子節點,編輯節點,刪除節點事件:
語法結構:
[JavaScript] 純文字檢視 複製程式碼view: { addHoverDom: addHoverDom, removeHoverDom: removeHoverDom }
其中addHoverDom 函式為:
[JavaScript] 純文字檢視 複製程式碼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函式為:
[JavaScript] 純文字檢視 複製程式碼function removeHoverDom(treeId, treeNode) { $("#addBtn_" + treeNode.id).unbind().remove(); $("#addBtn1_" + treeNode.id).unbind().remove(); $("#addBtn2_" + treeNode.id).unbind().remove(); };
簡單介紹:
addHoverDom:用於當滑鼠移動到節點上時,顯示使用者自定義控制元件,顯示隱藏狀態同 zTree 內部的編輯、刪除按鈕。
removeHoverDom:用於當滑鼠移出節點時,隱藏使用者自定義控制元件,顯示隱藏狀態同 zTree 內部的編輯、刪除按鈕。
相關文章
- cluetip關鍵詞連結外掛用法簡單介紹
- jquery.lazyload.js外掛用法簡單介紹jQueryJS
- 自定義jquery外掛簡單介紹jQuery
- jQuery自定義外掛簡單介紹jQuery
- jQuery外掛製作簡單介紹jQuery
- jquery.cookie外掛使用簡單介紹jQueryCookie
- alertify提示外掛使用方式簡單介紹
- jQuery外掛開發流程簡單介紹jQuery
- YprogressBar進度條外掛使用簡單介紹
- jQuery外掛Tmpl使用方法簡單介紹jQuery
- 簡單介紹Python中異常處理用法Python
- jQuery filter() 用法簡單介紹jQueryFilter
- javascript的this用法簡單介紹JavaScript
- js WebSocket用法簡單介紹JSWeb
- javascript arguments用法簡單介紹JavaScript
- onerror事件用法簡單介紹Error事件
- <input type="number" >用法簡單介紹
- css 註釋用法簡單介紹CSS
- style.cssText用法簡單介紹CSS
- javascript with()語句用法簡單介紹JavaScript
- outerHTML屬性用法簡單介紹HTML
- angularJS的router用法簡單介紹AngularJS
- CSS3 calc()用法簡單介紹CSSS3
- javascript innerText屬性用法簡單介紹JavaScript
- javascript call()函式用法簡單介紹JavaScript函式
- contenteditable屬性用法簡單介紹
- javascript trim()函式用法簡單介紹JavaScript函式
- getFullYear()函式用法簡單介紹函式
- js style.cssText用法簡單介紹JSCSS
- javascript的分號(;)用法簡單介紹JavaScript
- js isPrototypeOf()函式用法簡單介紹JS函式
- opacity屬性用法簡單介紹
- Query鍵盤事件簡單介紹事件
- chatgpt~外掛介紹ChatGPT
- ztree樹外掛(支援三態)
- jcrop+Fileapi圖片上傳裁剪外掛使用簡單介紹API
- js isNaN函式的用法簡單介紹JSNaN函式
- overflow-x 屬性用法簡單介紹