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 属性です。

3. 以前に選択したノードをキャンセルします: zTree.cancelSelectedNode();

4. 選択したステータス クラスをノード A に追加します: $("#" devicesSelect.selectNodeId "_a").addClass("curSelectedNode");

作者は軽く言いました: 2 番目の点については、当初は [$("#treeDiv1").scrollTop($("#" devicesSelect.selectNodeId).offset().top-200);] を使用したかったのですが、効果はありますが、同じレイヤーにノードが多すぎると、まだツリーが展開されていないため、表示領域に入らないのではないかと強く疑ったので、不正なアニメーションを使用しました。動く。

著者の最後の言葉: この記事に間違いがある場合は、ご指摘いただければ幸いです。 。 。 。

上記の内容は、選択されたノードを取得する際に ztree が表示領域に入らない場合に発生するバグを解決する方法の全体的な説明です。気に入っていただければ幸いです。