この記事では主にJquery zTreeツリーコントロールの非同期ロード操作を紹介し、Jquery zTree非同期ロードについて学びます。zTreeは最も一般的な機能を実行できる一連のTreeプラグインを実装しています。興味のある友人はそれを参照できます
zTreeはJQueryを使用しますコアコード最も一般的な機能を実行できる一連の Tree プラグインを実装します
IE、FireFox、Chrome およびその他のブラウザと互換性があります
1 つのページで複数の Tree インスタンスを同時に生成できます
JSONデータをサポート
ワンタイム静的生成とAjax非同期読み込みをサポート
複数のイベント応答とフィードバックをサポート
をサポートしますツリーノードの移動、編集、削除
スキン/パーソナライズされたアイコンの変更をサポート(CSSに依存)
非常に柔軟なチェックボックスまたはラジオ選択機能をサポート
シンプルなパラメータ設定により、柔軟で変更可能な機能を実現
非同期ロードとは、ツリーノードをクリックして展開すると、クリックされたノードを返すバックグラウンドアクションのみを要求します 子ノードのデータがロードされます。
ここでの主な設計は、ztree の設定変数の async 属性設定です:
var setting = { async: { enable: true, url:InitServiceIpsData.action, autoParam:[id, name], dataFilter: filter },
クリックしてツリー ノードを展開すると、子ノード データを取得するために URL で指定されたアクションが要求されます。 、ztreeにバインドされます。
ここでのバックグラウンド アクションは JSON 文字列を返し、ztree は新しいノード データをバインドするときにのみ配列を受け取ることに注意してください。そのため、文字列を配列に変換するためにバインドする前に、フィルター関数を使用してデータ クリーニングと変換操作を実行する必要があります。
//过滤异步加载ztree时返回的数据 function filter(treeId, parentNode, childNodes) { if (!childNodes) return null; childNodes = eval((+childNodes+)); //必须转换为[{id:103,pId:1,name:'子节点3'}];这样的格式 return childNodes; }
public String InitServiceIpsData() { HttpServletRequest request = ServletActionContext.getRequest(); String id = request.getParameter(id); String name = request.getParameter(name); System.out.println(请求获取+name+的ip列表); List<hashmap<string,object>> list = new ArrayList<hashmap<string,object>>(); for(int i = 1; i <= 2; i++){ HashMap<string,object> hm = new HashMap<string,object>(); hm.put(id, id + 0 + i); hm.put(pId, id); hm.put(name, name + _IP_ + i); hm.put(isParent, false); list.add(hm); } JSONArray finalJson = JSONArray.fromObject(list); this.initServiceIpsData = finalJson.toString(); return SUCCESS; }</string,object></string,object></hashmap<string,object></hashmap<string,object>
vue+webpack でコンポーネントを共有する (詳細なチュートリアル)
JavaScript で setter メソッドと getter メソッドを使用する方法
JS コンポーネントで Gojs コンポーネントを使用する方法について
以上がJquery zTree ツリー コントロールの非同期読み込み操作についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。