Jquery zTree ツリー コントロールの非同期読み込み操作について

この記事では主に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;
 }

このように、ztree ツリー ノードをクリックして展開すると、子ノードのデータを取得してバインドするアクションが要求されます。

以下はバックグラウンドアクションの実装です:

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>

以上がこの記事の全内容です。その他の関連コンテンツについては、 に注目してください。 PHPの中国語サイトです！

関連する推奨事項:

vue+webpack でコンポーネントを共有する (詳細なチュートリアル)

JavaScript で setter メソッドと getter メソッドを使用する方法

JS コンポーネントで Gojs コンポーネントを使用する方法について

以上がJquery zTree ツリー コントロールの非同期読み込み操作についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。