JqueryツリーコントロールZTree非同期ロード

1923 ワード

転載は出典を明記してください:jiq・欽's technical Blog
非同期ロードとは、展開ツリーノードをクリックすると、バックグラウンドactionにクリックノードのサブノードデータを返してロードするように要求することを意味します.
ここでは主にztreeのsetting変数のasyncプロパティ設定を設計します.
 var setting = {
    	async: {
			enable: true,
			url:"InitServiceIpsData.action",
			autoParam:["id", "name"],
			dataFilter: filter		
		},

ツリーノードの展開をクリックするとurlで指定したactionにサブノードデータの取得を要求しztreeにバインドされます.ここでバックグラウンドactionはJSON文字列を返し、ztreeは新しいノードデータをバインドして配列のみを受信するので、バインド前にfilter関数でデータ洗浄変換操作を行い、文字列を配列に変換する必要があります.
//      ztree       
    function filter(treeId, parentNode, childNodes) {
        if (!childNodes) 
        	return null;        
        childNodes = eval("("+childNodes+")");	//     [{id:103,pId:1,name:'   3'}];      
        return childNodes;
    }

これによりztreeツリーノードを展開するとactionにサブノードデータの取得とバインドを要求する.
次に、バックグラウンドactionの実装を示します.
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;
	}