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如何解決的全部敘述，希望大家喜歡。
