快捷導(dǎo)航

Jquery zTree 樹控件異步加載操作

更新時(shí)間：2016年02月25日 10:58:55 投稿：lijiao

這篇文章主要介紹了Jquery zTree 樹控件異步加載操作，學(xué)習(xí)Jquery zTree異步加載，zTree實(shí)現(xiàn)一套能完成大部分常用功能的 Tree插件，感興趣的小伙伴們可以參考一下

zTree 是利用 JQuery 的核心代碼，實(shí)現(xiàn)一套能完成大部分常用功能的 Tree 插件

兼容 IE、FireFox、Chrome 等瀏覽器
在一個(gè)頁(yè)面內(nèi)可同時(shí)生成多個(gè) Tree 實(shí)例
支持 JSON 數(shù)據(jù)
支持一次性靜態(tài)生成和 Ajax 異步加載兩種方式
支持多種事件響應(yīng)及反饋
支持 Tree 的節(jié)點(diǎn)移動(dòng)、編輯、刪除
支持任意更換皮膚 / 個(gè)性化圖標(biāo)（依靠css）
支持極其靈活的 checkbox 或 radio 選擇功能
簡(jiǎn)單的參數(shù)配置實(shí)現(xiàn) 靈活多變的功能

異步加載的意思就是：當(dāng)點(diǎn)擊展開樹節(jié)點(diǎn)時(shí)，才去請(qǐng)求后臺(tái)action返回點(diǎn)擊節(jié)點(diǎn)的子節(jié)點(diǎn)數(shù)據(jù)并加載。

這里面主要設(shè)計(jì)ztree的setting變量的async屬性設(shè)置：

var setting = {
 async: {
  enable: true,
  url:InitServiceIpsData.action,
  autoParam:[id, name],
  dataFilter: filter 
 },

當(dāng)點(diǎn)擊展開樹節(jié)點(diǎn)時(shí)，會(huì)請(qǐng)求url指定的action獲取子節(jié)點(diǎn)數(shù)據(jù)，然后綁定到ztree上。

注意這里后臺(tái)action返回的是JSON字符串，而ztree綁定新的節(jié)點(diǎn)數(shù)據(jù)只接收數(shù)組，所以需要在綁定前用filter函數(shù)進(jìn)行數(shù)據(jù)清洗轉(zhuǎn)換操作，將字符串轉(zhuǎn)換為數(shù)組：

//過濾異步加載ztree時(shí)返回的數(shù)據(jù) 
 function filter(treeId, parentNode, childNodes) {
 if (!childNodes) 
  return null; 
 childNodes = eval((+childNodes+)); //必須轉(zhuǎn)換為[{id:103,pId:1,name:'子節(jié)點(diǎn)3'}];這樣的格式 
 return childNodes;
 }

這樣點(diǎn)擊展開ztree樹節(jié)點(diǎn)時(shí)，就會(huì)請(qǐng)求action獲取子節(jié)點(diǎn)數(shù)據(jù)并綁定了。

下面是后臺(tái)action的一個(gè)實(shí)現(xiàn)：

public String InitServiceIpsData()
 {
 HttpServletRequest request = ServletActionContext.getRequest();
 String id = request.getParameter(id);
 String name = request.getParameter(name);
 System.out.println(請(qǐng)求獲取+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>

更多關(guān)于ztree控件的內(nèi)容，請(qǐng)參考專題《jQuery插件ztree使用匯總》

以上就是Jquery zTree 樹控件實(shí)現(xiàn)異步加載操作的詳細(xì)步驟，希望對(duì)大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: