在一個頁面實現(xiàn)兩個zTree聯(lián)動的方法

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

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

簡介

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

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

引言

今天開發(fā)的時候，因為需求需要實現(xiàn)同一個頁面左右兩棵樹，如果選中某一棵樹的某一個節(jié)點，相應的另一顆樹的該節(jié)點也被選中。（兩棵樹是有關聯(lián)的。當然可以根據(jù)自己需要改變聯(lián)動條件和方式）。

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

效果如圖：

效果圖

代碼：

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

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

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

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

您可能感興趣的文章: