ztreeが選択されたnode_jqueryを取得する際に可視領域に入れないバグの解決方法

zTree は、jQuery で実装された多機能の「ツリー プラグイン」です。 zTree の最大の利点は、優れたパフォーマンス、柔軟な構成、複数の機能の組み合わせです。

zTree 機能の編集

● zTree v3.0 はコアコードを機能ごとに分割しており、不要なコードをロードする必要がありません
● 遅延ロード技術を採用し、数万のノードを簡単にロードでき、IE6 でも基本的に即時停止を実現できます
● IE、FireFox、Chrome、Opera、Safari、その他のブラウザと互換性があります
● JSON データをサポート
● ノード データの静的および Ajax 非同期ロードをサポートします
● スキン変更/カスタムアイコンをサポート (CSS に依存)
● 非常に柔軟なチェックボックスまたはラジオ選択機能をサポート
● 複数のイベント応答コールバックを提供します
● 柔軟な編集 (追加/削除/変更/確認) 機能、ノードを自由にドラッグ アンド ドロップでき、複数のノードをドラッグ アンド ドロップすることもできます
● 1 ページ内に複数の Tree インスタンスを同時に生成可能
●簡単なパラメータ設定で柔軟な機能を実現

zTree 編集の利点

zTree の作成者は、空き時間を利用して zTree の機能を継続的に改善しており、新しいユーザーがすぐに使いこなせるように、ユーザーとタイムリーにコミュニケーションを取り、さまざまな質問にタイムリーに回答することもできます。現在、ますます多くのユーザーが、最近リリースされた QUI フレームワークの最新バージョンを含め、システム内の元のツリー プラグインを置き換えるために zTree を使用しています。

関連プラグインのバージョン:

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 に基づいてデータベースからすべての上位 objid を取得し、それらを結合して ids 変数に保存します。

3. onAsyncSuccess メソッドで ExpandNodes を呼び出します。このメソッドでは、[if (nodes[i].isParent&&(ids.substring(0,ids.indexOf(","))!=nodes[i].id を渡します。 ) )] id 内の id を持つノードをフィルターして展開します。

4. 通常の状況では、展開の最後に、objid に基づいて [var node = zTree.getNodeByParam("id",id_);] を通じてノード A オブジェクトを取得し、それを [zTree.selectNode] を通じて選択します。 (ノード);] ノード。

この場合、目的のノードを見つけて選択することはできますが、そのノードと同じ親ノードを持つデータが多数ある場合、ノード A が表示領域に表示されない場合があります。ソースコードを検索すると、Ztree は [$("#" node.tId).focus().blur();] メソッドを使用して位置決めを実現していることがわかりました。しかし、残念ながらバグがあります。

したがって、スクロール バーを使用して位置を自分で制御してください。実装は次のとおりです:

1. 位置の競合を防ぐために [zTree.selectNode(node);] を削除します

2. onAsyncSuccess メソッドで、ノードが展開されるタイミングを決定し、ノード A のオフセットを取得し、その値をツリーが配置されている DIV のscrollTop 属性に割り当てます。

$("#treeDiv1").animate({scrollTop:$("#" devicesSelect.selectNodeId).offset().top-300},1000);//1000 はミリ秒です。代わりに低速を使用することもできます

注: devicesSelect.selectNodeId は、[me.selectNodeId = node.tId] によって取得されたノード A のノード tid であり、treeDiv1 ツリーが配置されている div の id 属性です。