ztree擷取選中節點時不能進入可視地區出現BUG如何解決_jquery

zTree 是一個依靠 jQuery 實現的多功能 “樹外掛程式”。優異的效能、靈活的配置、多種功能的組合是 zTree 最大優點。

zTree 的特點編輯

● zTree v3.0 將核心代碼按照功能進行了分割，不需要的代碼可以不用載入
● 採用了消極式載入技術，上萬節點輕鬆載入，即使在 IE6 下也能基本做到秒殺
● 相容 IE、FireFox、Chrome、Opera、Safari 等瀏覽器
● 支援 JSON 資料
● 支援靜態和 Ajax 非同步載入節點資料
● 支援任意更換皮膚 / 自訂表徵圖（依靠css）
● 支援極其靈活的 checkbox 或 radio 選擇功能
● 提供多種事件響應回調
● 靈活的編輯（增/刪/改/查）功能，可隨意拖拽節點，還可以多節點拖拽喲
● 在一個頁面內可同時產生多個 Tree 執行個體
● 簡單的參數配置實現 靈活多變的功能

zTree 的優勢編輯

zTree 的作者利用業餘時間不斷改進 zTree 功能，並且還能及時與使用者溝通，及時回複各種疑問，便於新使用者快速掌握。目前越來越多的使用者都使用 zTree 替換了系統中原有的 樹外掛程式，這其中包括最近剛發布最新版本的QUI架構。

相關外掛程式版本：

jquery.ztree.exedit-3.4.js

jquery.ztree.all-3.4.js

jquery-1.8.0.js

 function onAsyncSuccess(event, treeId, treeNode, msg) {     curAsyncCount--;     if (curStatus == "expand") {       expandNodes(treeNode.children);     } else if (curStatus == "async") {       asyncNodes(treeNode.children);     }      if (curAsyncCount <= ) {       curStatus = "";       // 節點定位       if(devicesSelect.selectNodeId){         // 節點變成被選中狀態         var zTree = $.fn.zTree.getZTreeObj(zTreeId);         zTree.cancelSelectedNode();         $("#" + devicesSelect.selectNodeId + "_a").addClass("curSelectedNode");         $("#treeDiv").animate({scrollTop:$("#"+devicesSelect.selectNodeId).offset().top-},);//是ms,也可以用slow代替         devicesSelect.selectNodeId = "";       }     }   }    function expandNodes(nodes) {     if (!nodes) return;     curStatus = "expand";     var zTree = $.fn.zTree.getZTreeObj(zTreeId);     for (var i=, l=nodes.length; i<l; i++) {       if(ids.indexOf(nodes[i].id) != -){         if (nodes[i].isParent&&(ids.substring(,ids.indexOf(","))!=nodes[i].id)) {           if(nodes[i].typeName.indexOf("虛擬")=="-"){             zTree.expandNode(nodes[i], true, false, false);           } else if(nodes[i].type.indexOf(type)>"-"){             zTree.expandNode(nodes[i], true, false, false);           }         } else {           goAsync = true;         }       }     }     if(goAsync==true){       var id_ = ids.substring(,ids.indexOf(","));       var node = zTree.getNodeByParam("id",id_);       goAsync = false;       me.curStatus = "";       me.type = "";       me.selectNodeId = node.tId;     }   } 

定位思路：

1、假設要定位節點A，該節點A的唯一標識是objid

2、根據objid從db中擷取所有上級的objid，拼接並儲存在ids變數。

3、在onAsyncSuccess方法中調用expandNodes，該方法中通過[if (nodes[i].isParent&&(ids.substring(0,ids.indexOf(","))!=nodes[i].id))]過濾，展開id在ids裡的節點。

4、通常情況看下，在展開最後，依據objid通過【var node = zTree.getNodeByParam("id",id_);】擷取節點A對象，然後通過【zTree.selectNode(node);】選擇節點。

這種情況下，能夠定位並選擇目標節點，但是，當與該節點有同一父節點的資料較多時，節點A可能不會出現在可視地區內。尋找源碼，發現Ztree用的是【$("#" + node.tId).focus().blur();】方法實現定位。但很遺憾，有BUG。

於是，使用控制捲軸的方式自己控制定位。實現方式如下：

1、刪除【zTree.selectNode(node);】，防止定位衝突

2、在onAsyncSuccess方法中，判定當節點展開完畢後，擷取節點A的位移量，並將值賦給樹所在DIV的scrollTop屬性。

$("#treeDiv1").animate({scrollTop:$("#"+devicesSelect.selectNodeId).offset().top-300},1000);//1000是ms,也可以用slow代替

註：devicesSelect.selectNodeId為節點A的節點tid，通過【me.selectNodeId = node.tId】擷取；treeDiv1樹所在div的id屬性

3、取消之前選中節點：zTree.cancelSelectedNode();

4、為節點A增加被選中狀態class：$("#" + devicesSelect.selectNodeId + "_a").addClass("curSelectedNode");

筆者淡淡的說：第2點我本來想用【$("#treeDiv1").scrollTop($("#"+devicesSelect.selectNodeId).offset().top-200);】這種方式的，雖然有效，但是同層節點過多時候，還是不能進入可視地區，我深深的懷疑是因為這個時候樹還沒展開，所以我就用了動畫，無賴之舉。

筆者最後的話：如果本文有任何錯誤，敬請看官火辣指出，不勝感激涕零。。。。

以上內容是本文給大家介紹ztree擷取選中節點時不能進入可視地區出現BUG如何解決的全部敘述，希望大家喜歡。