欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

異步加載的意思就是: 當(dāng)點(diǎn)擊展開樹節(jié)點(diǎn)時(shí),才去請求后臺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í),會請求url指定的action獲取子節(jié)點(diǎn)數(shù)據(jù),然后綁定到ztree上。

注意這里后臺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í),就會請求action獲取子節(jié)點(diǎn)數(shù)據(jù)并綁定了。 

下面是后臺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(請求獲取+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)容,請參考專題《jQuery插件ztree使用匯總》

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

相關(guān)文章

最新評論