Jquery zTree 樹控件異步加載操作
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í)有所幫助。
- jquery zTree異步加載簡單實(shí)例分享
- Jquery樹插件zTree用法入門教程
- jQuery樹形控件zTree使用小結(jié)
- jquery ztree實(shí)現(xiàn)下拉樹形框使用到了json數(shù)據(jù)
- jquery ztree實(shí)現(xiàn)模糊搜索功能
- JQuery ztree 異步加載實(shí)例講解
- jquery ztree實(shí)現(xiàn)樹的搜索功能
- jQuery ztree實(shí)現(xiàn)動態(tài)樹形多選菜單
- JQuery ZTree使用方法詳解
- 在一個(gè)頁面實(shí)現(xiàn)兩個(gè)zTree聯(lián)動的方法
相關(guān)文章
兩種方法解決javascript url post 特殊字符轉(zhuǎn)義 + & #
本文主要介紹javascript使用url傳值的時(shí)候數(shù)據(jù)丟失的問題,希望對大家有所幫助。2016-04-04基于jQuery實(shí)現(xiàn)表格數(shù)據(jù)的動態(tài)添加與統(tǒng)計(jì)的代碼
使用jQuery可以大大減輕工作量,在實(shí)際開發(fā)中,使用了jQuery的clone(true)函數(shù),該函數(shù)可以創(chuàng)建一個(gè)jQury對象的副本,并且參數(shù)為true時(shí),可以復(fù)制該元素的所有事件處理函數(shù)。2011-01-01jQuery基礎(chǔ)的工廠函數(shù)以及定時(shí)器的經(jīng)典實(shí)例分析
下面小編就為大家?guī)硪黄猨Query基礎(chǔ)的工廠函數(shù)以及定時(shí)器的經(jīng)典實(shí)例分析。小編覺得挺不錯(cuò)的,現(xiàn)在2016-05-05validform表單驗(yàn)證的實(shí)現(xiàn)方法
這篇文章主要介紹了validform表單驗(yàn)證的實(shí)現(xiàn)方法,validform插件主要把所有的驗(yàn)證條件和驗(yàn)證提示信息綁定到每個(gè)表單元素,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-03-03jQuery Trim去除字符串首尾空字符的實(shí)現(xiàn)方法說明
本篇文章主要是對jQuery Trim去除字符串首尾空字符的實(shí)現(xiàn)方法進(jìn)行了詳細(xì)的介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-02-02完美解決jQuery符號$與其他javascript 庫、框架沖突的問題
下面小編就為大家?guī)硪黄昝澜鉀QjQuery符號$與其他javascript 庫、框架沖突的問題。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08jQuery EasyUI NumberBox(數(shù)字框)的用法
jQuery EasyUI 數(shù)字框(NumberBox)用法2010-07-07