ztree的簡單使用

2021-07-30 20:25:00 字數 1068 閱讀 6443

ztree 是乙個依靠 jquery 實現的多功能 「樹外掛程式」。優異的效能、靈活的配置、多種功能的組合是 ztree 最大優點。

ztree 是開源免費的軟體(mit 許可證)。

其實ztree的api已經說得足夠明白了,自己再記錄一遍加深一下印象。

id="treedemo"

class="ztree">

ul>

1)直接把json資料傳給元件。

$(document).ready(function

());

2)非同步獲取json格式資料,第三個引數傳null或者空著。

$(document).ready(function

());

如果說使用上有什麼需要注意的地方,那就是設定自己的層級關係欄位了

var setting = ,

******data:

}};

有時候非同步處理得到的資料並不是乙個單純的jsonarray資料,我們需要對他進行乙個簡單的提取操作:

var setting = ,

data : ,

******data :

},callback :

};/* 獲取返回的資料,進行預操作 */

function

ajaxdatafilter

(treeid, parentnode, responsedata) ;

//非同步載入完成時執行,此方法將所有的節點開啟

function

ztreeonasyncsuccess

(event, treeid, msg)

發起請求得到的資料報含乙個jsonarray和一些其他字段,通過datafilter先將資料處理一下,得到這個需要的json資料再做處理。

在業務中可能會遇到要將所有節點開啟的需求,這裡有兩種實現的方法,一種是在返回資料的時候,給父節點新增「open:true」字段;另一種方式是根據樹的id,開啟它的所有節點,這裡又分為靜態和非同步兩種情況:

zTree的簡單使用

理論可以看 ztree的使用依賴於js,所以要先引入js 我這個是簡單資料模式 在對應的js中 function var log callback fn.ztree.init treedemo setting,json.parse jsonarr val jsonstr jsonstr json.p...

ZTree控制項的簡單使用

首先引用必須的檔案 然後把封裝好的函式直接複製過去,並修改裡面的小部分配置內容 function fn.createtree.datasouce success function data return strtreedata 該內容是樹控制項所展示的資料 以上ajax 可以修改,注意改ajax 不...

zTree樹的簡單使用

ztree是乙個依靠 jquery 實現的多功能的樹外掛程式 官網 簡單使用 1.引入css和js 2.簡單配置 var setting data 3.獲取後台傳來的資料 後端返回json資料,為了業務需求需要在要顯示的物件中新增id,pid,checked屬性 private string id ...