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

zTree 的特點(diǎn)編輯

● zTree v3.0 將核心代碼按照功能進(jìn)行了分割，不需要的代碼可以不用加載
● 采用了延遲加載技術(shù)，上萬節(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è)頁面內(nèi)可同時(shí)生成多個(gè) Tree 實(shí)例
● 簡單的參數(shù)配置實(shí)現(xiàn) 靈活多變的功能

zTree 的優(yōu)勢(shì)編輯

zTree 的作者利用業(yè)余時(shí)間不斷改進(jìn) zTree 功能，并且還能及時(shí)與用戶溝通，及時(shí)回復(fù)各種疑問，便于新用戶快速掌握。目前越來越多的用戶都使用 zTree 替換了系統(tǒng)中原有的 樹插件，這其中包括最近剛發(fā)布最新版本的QUI框架。

相關(guān)插件版本：

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 = "";
       // 節(jié)點(diǎn)定位
       if(devicesSelect.selectNodeId){
         // 節(jié)點(diǎn)變成被選中狀態(tài)
         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、假設(shè)要定位節(jié)點(diǎn)A，該節(jié)點(diǎn)A的唯一標(biāo)識(shí)是objid

2、根據(jù)objid從db中獲取所有上級(jí)的objid，拼接并保存在ids變量。

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

4、通常情況看下，在展開最后，依據(jù)objid通過【var node = zTree.getNodeByParam("id",id_);】獲取節(jié)點(diǎn)A對(duì)象，然后通過【zTree.selectNode(node);】選擇節(jié)點(diǎn)。

這種情況下，能夠定位并選擇目標(biāo)節(jié)點(diǎn)，但是，當(dāng)與該節(jié)點(diǎn)有同一父節(jié)點(diǎn)的數(shù)據(jù)較多時(shí)，節(jié)點(diǎn)A可能不會(huì)出現(xiàn)在可視區(qū)域內(nèi)。查找源碼，發(fā)現(xiàn)Ztree用的是【$("#" + node.tId).focus().blur();】方法實(shí)現(xiàn)定位。但很遺憾，有BUG。

于是，使用控制滾動(dòng)條的方式自己控制定位。實(shí)現(xiàn)方式如下：

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

2、在onAsyncSuccess方法中，判定當(dāng)節(jié)點(diǎn)展開完畢后，獲取節(jié)點(diǎn)A的偏移量，并將值賦給樹所在DIV的scrollTop屬性。

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

注：devicesSelect.selectNodeId為節(jié)點(diǎn)A的節(jié)點(diǎn)tid，通過【me.selectNodeId = node.tId】獲??；treeDiv1樹所在div的id屬性

3、取消之前選中節(jié)點(diǎn)：zTree.cancelSelectedNode();

4、為節(jié)點(diǎn)A增加被選中狀態(tài)class：$("#" + devicesSelect.selectNodeId + "_a").addClass("curSelectedNode");

筆者淡淡的說：第2點(diǎn)我本來想用【$("#treeDiv1").scrollTop($("#"+devicesSelect.selectNodeId).offset().top-200);】這種方式的，雖然有效，但是同層節(jié)點(diǎn)過多時(shí)候，還是不能進(jìn)入可視區(qū)域，我深深的懷疑是因?yàn)檫@個(gè)時(shí)候樹還沒展開，所以我就用了動(dòng)畫，無賴之舉。

筆者最后的話：如果本文有任何錯(cuò)誤，敬請(qǐng)看官火辣指出，不勝感激涕零。。。。

以上內(nèi)容是本文給大家介紹ztree獲取選中節(jié)點(diǎn)時(shí)不能進(jìn)入可視區(qū)域出現(xiàn)BUG如何解決的全部敘述，希望大家喜歡。

最新評(píng)論