Jquery zTree ツリー コントロールの非同期読み込みoperation_jquery

zTree は、JQuery のコア コードを使用して、最も一般的な機能を実行できる一連の Tree プラグインを実装します

• IE、FireFox、Chrome およびその他のブラウザと互換性があります
• 1 ページ内で複数の Tree インスタンスを同時に生成できます
• JSON データをサポート
• ワンタイム静的生成と Ajax 非同期読み込みを 2 つの方法でサポート
• 複数のイベント応答とフィードバックをサポート
• ツリー ノードの移動、編集、削除をサポートします
• スキンの変更/パーソナライズされたアイコンをサポート (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>
 

上記は、Jquery zTree ツリー コントロールの非同期読み込み操作を実装するための詳細な手順です。皆さんの学習に役立つことを願っています。