zTree 是一個(gè)依靠 jQuery 實(shí)現(xiàn)的多功能 “樹(shù)插件”。優(yōu)異的性能、靈活的配置、多種功能的組合是 zTree 最大優(yōu)點(diǎn)。

介紹

zTree 是一個(gè)依靠 jQuery 實(shí)現(xiàn)的多功能 “樹(shù)插件”。優(yōu)異的性能、靈活的配置、多種功能的組合是 zTree 最大優(yōu)點(diǎn)。專門適合項(xiàng)目開(kāi)發(fā)，尤其是 樹(shù)狀菜單、樹(shù)狀數(shù)據(jù)的Web顯示、權(quán)限管理等等。
zTree 是開(kāi)源免費(fèi)的軟件（MIT 許可證）。在開(kāi)源的作用下，zTree 越來(lái)越完善，目前已經(jīng)擁有了不少粉絲，并且今后還會(huì)推出更多的 zTree 擴(kuò)展功能庫(kù)，讓 zTree 更加強(qiáng)大。

特點(diǎn)

● zTree v3.0 將核心代碼按照功能進(jìn)行了分割，不需要的代碼可以不用加載
● 采用了延遲加載技術(shù)，上萬(wàn)節(jié)點(diǎn)輕松加載，即使在 IE6 下也能基本做到秒殺
● 兼容 IE、FireFox、Chrome、Opera、Safari 等瀏覽器
● 支持 JSON 數(shù)據(jù)
● 支持靜態(tài)和 Ajax 異步加載節(jié)點(diǎn)數(shù)據(jù)
● 支持任意更換皮膚 / 自定義圖標(biāo)（依靠css）
● 支持極其靈活的 checkbox 或 radio 選擇功能
● 提供多種事件響應(yīng)回調(diào)
● 靈活的編輯（增/刪/改/查）功能，可隨意拖拽節(jié)點(diǎn)，還可以多節(jié)點(diǎn)拖拽喲
● 在一個(gè)頁(yè)面內(nèi)可同時(shí)生成多個(gè) Tree 實(shí)例
● 簡(jiǎn)單的參數(shù)配置實(shí)現(xiàn) 靈活多變的功能

下面給大家介紹ztree加載完成后顯示勾選節(jié)點(diǎn)的實(shí)例代碼

①前言：這個(gè)在度娘上沒(méi)有搜到解決的辦法，于是自己查看了ztree的API，發(fā)現(xiàn)其實(shí)還是比較簡(jiǎn)單的。做個(gè)筆記以備不時(shí)之需。

②需求：

像下圖一樣，在加載完成之后就顯示需要勾選的項(xiàng)。

③解決方案：

首先頁(yè)面上肯定是要獲取數(shù)據(jù)庫(kù)的數(shù)據(jù)，比如你存儲(chǔ)的是id或者Code之類的以，隔開(kāi)的數(shù)據(jù)。我這里存貯的是code。

然后將數(shù)據(jù)庫(kù)的數(shù)據(jù)以，隔開(kāi)成數(shù)組。

利用API中的treeObj提供的getNodeByParam(),和checkNode()方法即可完成需求。

ztreeAPI傳送門：點(diǎn)擊這里

參考代碼如下：

var treeObj = $.fn.zTree.getZTreeObj("mytree");
var data = "${userInfo.area_code}";
var datas = data.split(',');
for(var i = 0;i<datas.length;i++) {
　　console.log(treeObj.getNodeByParam("code", datas[i],null))
　　treeObj.checkNode(treeObj.getNodeByParam("code", datas[i],null),true, false);
}

總結(jié)

以上所述是小編給大家介紹的ztree加載完成后顯示勾選節(jié)點(diǎn)的實(shí)現(xiàn)代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論