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

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

WBOY

リリース： 2016-05-16 15:13:36

オリジナル

1337 人が閲覧しました

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 ツリーコントロールの非同期読み込み操作を実装するための詳細な手順です。皆さんの学習に役立つことを願っています。