在一個(gè)頁(yè)面實(shí)現(xiàn)兩個(gè)zTree聯(lián)動(dòng)的方法

更新時(shí)間：2017年12月20日 13:48:56 作者：黑碼不黑

最近發(fā)現(xiàn)項(xiàng)目中很多地方都是樹形菜單，而這些樹形菜單都是使用樹形插件zTree來(lái)制作的，下面這篇文章主要給大家介紹了關(guān)于在一個(gè)頁(yè)面實(shí)現(xiàn)兩個(gè)zTree聯(lián)動(dòng)的相關(guān)資料，需要的朋友可以參考借鑒，下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。

簡(jiǎn)介

zTree 是利用 JQuery 的核心代碼，實(shí)現(xiàn)一套能完成大部分常用功能的 Tree 插件

兼容 IE、FireFox、Chrome 等瀏覽器
在一個(gè)頁(yè)面內(nèi)可同時(shí)生成多個(gè) Tree 實(shí)例
支持 JSON 數(shù)據(jù)
支持一次性靜態(tài)生成和 Ajax 異步加載兩種方式
支持多種事件響應(yīng)及反饋
支持 Tree 的節(jié)點(diǎn)移動(dòng)、編輯、刪除
支持任意更換皮膚 / 個(gè)性化圖標(biāo)（依靠css）
支持極其靈活的 checkbox 或 radio 選擇功能
簡(jiǎn)單的參數(shù)配置實(shí)現(xiàn) 靈活多變的功能

引言

今天開發(fā)的時(shí)候，因?yàn)樾枨笮枰獙?shí)現(xiàn)同一個(gè)頁(yè)面左右兩棵樹，如果選中某一棵樹的某一個(gè)節(jié)點(diǎn)，相應(yīng)的另一顆樹的該節(jié)點(diǎn)也被選中。（兩棵樹是有關(guān)聯(lián)的。當(dāng)然可以根據(jù)自己需要改變聯(lián)動(dòng)條件和方式）。

此處不再粘貼實(shí)現(xiàn)樹的代碼，僅僅展示實(shí)現(xiàn)聯(lián)動(dòng)的方法。

效果如圖：

效果圖

代碼：

function linkageTreeClick(event, treeId, treeNode) {
  var param = treeNode.id; //獲得點(diǎn)擊樹的ID
  var otherTree = $.fn.zTree.getZTreeObj(treeId);
  // 選取樹的所有節(jié)點(diǎn)
  var nodes = otherTree.getNodesByParam(param);
  //遍歷樹的節(jié)點(diǎn)
  for (var i in nodes) {
   if(param==nodes[i].id){
    otherTree.selectNode(nodes[i]);
    return;
   }
  }
 }

其中treeId為你想與之聯(lián)動(dòng)的樹的ID，將該方法在zTree的onclick方法中進(jìn)行調(diào)用，根據(jù)自己情況，傳入?yún)?shù)，然后實(shí)現(xiàn)聯(lián)動(dòng)。

方法selectNode()參數(shù)為樹的節(jié)點(diǎn)，作用為：使該節(jié)點(diǎn)被選中。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: