EASYUI TREEGRID異步加載數(shù)據(jù)實(shí)現(xiàn)方法
更新時(shí)間:2012年08月22日 20:47:43 作者:
找了一下官方文檔,看了EASYUI的異步加載,弄了我兩三個(gè)小時(shí),死活都不出數(shù)據(jù)
官方提供的treegrid的ex 我給大家貼出來(lái)看看吧:
$(function(){
$('#tt').treegrid({
url:'treegrid_data3.json',
onAfterEdit:function(row,changes){
alert(row.name);
}
});
})
這個(gè)是頁(yè)面初始化的。
看看他的JSON:
{"total":117,"rows":[
<SPAN style="COLOR: #ff0000">{"id":1,"code":"code1","name":"name1","addr":"address1","state":"closed"},</SPAN>
{"id":11,"code":"code11","name":"name11","addr":"address11","<SPAN style="COLOR: #ff0000">_parentId":1</SPAN>},
{"id":12,"code":"code12","name":"name12","addr":"address12","<SPAN style="COLOR: #ff0000">_parentId":1</SPAN>},
{"id":21,"code":"code21","name":"name21","addr":"address21","_parentId":1},
{"id":22,"code":"code22","name":"name22","addr":"address22","_parentId":1},
{"id":31,"code":"code31","name":"name31","addr":"address31","_parentId":1},
{"id":32,"code":"code32","name":"name32","addr":"address32","_parentId":1},
{"id":41,"code":"code41","name":"name41","addr":"address41","_parentId":1},
{"id":42,"code":"code42","name":"name42","addr":"address42","_parentId":1},
{"id":51,"code":"code51","name":"name51","addr":"address51","_parentId":1},
{"id":52,"code":"code52","name":"name52","addr":"address52","_parentId":1},
{"id":61,"code":"code61","name":"name61","addr":"address61","_parentId":1},
{"id":62,"code":"code62","name":"name62","addr":"address62","_parentId":1},
{"id":71,"code":"code71","name":"name71","addr":"address71","_parentId":1},
{"id":72,"code":"code72","name":"name72","addr":"address72","_parentId":1},
{"id":81,"code":"code81","name":"name81","addr":"address81","_parentId":1},
{"id":82,"code":"code82","name":"name82","addr":"address82","_parentId":1},
{"id":91,"code":"code91","name":"name91","addr":"address91","_parentId":1},
{"id":92,"code":"code92","name":"name92","addr":"address92","_parentId":1},
{"id":110,"code":"code110","name":"name110","addr":"address110","_parentId":1},
{"id":120,"code":"code120","name":"name120","addr":"address120","_parentId":1}
]}
標(biāo)紅的地方是特別有用的,我按照他的這個(gè)做法,自己做了一個(gè),始終是沒(méi)有數(shù)據(jù)的,后來(lái)發(fā)現(xiàn)了一個(gè)問(wèn)題,
{"total":29,"rows":[
{"Id":25,"Ids":25,"name":"直轄市","state":"closed",<SPAN style="COLOR: #ff0000">"_parentId":2</SPAN>,"orderId":2},
{"Id":44,"Ids":44,"name":"黑龍江","state":"closed","_parentId":2,"orderId":110},
{"Id":45,"Ids":45,"name":"吉林","state":"closed","_parentId":2,"orderId":1},
{"Id":46,"Ids":46,"name":"遼寧","state":"closed","_parentId":2,"orderId":3},
{"Id":47,"Ids":47,"name":"河北","state":"closed","_parentId":2,"orderId":4},
{"Id":48,"Ids":48,"name":"內(nèi)蒙古","state":"closed","_parentId":2,"orderId":111},
{"Id":49,"Ids":49,"name":"山西","state":"closed","_parentId":2,"orderId":6},
{"Id":50,"Ids":50,"name":"江西","state":"closed","_parentId":2,"orderId":11},
{"Id":51,"Ids":51,"name":"山東","state":"closed","_parentId":2,"orderId":12},
{"Id":52,"Ids":52,"name":"臺(tái)灣","state":"closed","_parentId":2,"orderId":13},
{"Id":53,"Ids":53,"name":"甘肅","state":"closed","_parentId":2,"orderId":15},
{"Id":54,"Ids":54,"name":"寧夏","state":"closed","_parentId":2,"orderId":16},
{"Id":55,"Ids":55,"name":"青海","state":"closed","_parentId":2,"orderId":17},
{"Id":56,"Ids":56,"name":"新疆","state":"closed","_parentId":2,"orderId":18},
{"Id":57,"Ids":57,"name":"云南","state":"closed","_parentId":2,"orderId":19}]}
上面這個(gè)數(shù)據(jù) 沒(méi)有一個(gè)根節(jié)點(diǎn),所以頁(yè)面出來(lái)什么都沒(méi)有。。。。。我的數(shù)據(jù)只有parentId這個(gè)玩意,所以頁(yè)面一片空白。
這個(gè)問(wèn)題修正了,但是又出現(xiàn)新的問(wèn)題了。開(kāi)始我的處理方式是直接把所有數(shù)據(jù)load進(jìn)來(lái),點(diǎn)擊節(jié)點(diǎn)展開(kāi)是沒(méi)有問(wèn)題的。但是所有數(shù)據(jù)一起裝載,不光耗性能不說(shuō),還特別慢。
所以想到異步加載。又到官方上去看了半天,官方提供了一大堆事件,什么展開(kāi)觸發(fā)哦之類(lèi)的,沒(méi)有一個(gè)說(shuō)到點(diǎn)上的。
我用火狐監(jiān)聽(tīng)每次數(shù)據(jù)都加載了的,而且有返回正確的JSON
{"total":29,"rows":[
{"Id":25,"Ids":25,"name":"直轄市","state":"closed",<SPAN style="COLOR: #ff0000">"_parentId":2</SPAN>,"orderId":2},
{"Id":44,"Ids":44,"name":"黑龍江","state":"closed","_parentId":2,"orderId":110},
。。。。<BR>經(jīng)過(guò)我反復(fù)的對(duì)比tree和這個(gè)treegrid。最后發(fā)現(xiàn)treegrid 在請(qǐng)求過(guò)來(lái)的數(shù)據(jù)上有個(gè)total和rows ,而tree沒(méi)有。
最后一個(gè)小結(jié): easyui treegrid使用時(shí)需注意:
1、必須要有根節(jié)點(diǎn);
2、父節(jié)點(diǎn)裝載的數(shù)據(jù)格式和子節(jié)點(diǎn)裝載的數(shù)據(jù)格式 是不一樣的。
父節(jié)點(diǎn)需要total和rows 而子節(jié)點(diǎn)裝載的時(shí)候和tree的數(shù)據(jù)格式相同。 目前只弄了個(gè)兩級(jí)的,多級(jí)的還沒(méi)有去試。留篇文章,以備后用。
也熱烈歡迎大家指正。
復(fù)制代碼 代碼如下:
$(function(){
$('#tt').treegrid({
url:'treegrid_data3.json',
onAfterEdit:function(row,changes){
alert(row.name);
}
});
})
這個(gè)是頁(yè)面初始化的。
看看他的JSON:
復(fù)制代碼 代碼如下:
{"total":117,"rows":[
<SPAN style="COLOR: #ff0000">{"id":1,"code":"code1","name":"name1","addr":"address1","state":"closed"},</SPAN>
{"id":11,"code":"code11","name":"name11","addr":"address11","<SPAN style="COLOR: #ff0000">_parentId":1</SPAN>},
{"id":12,"code":"code12","name":"name12","addr":"address12","<SPAN style="COLOR: #ff0000">_parentId":1</SPAN>},
{"id":21,"code":"code21","name":"name21","addr":"address21","_parentId":1},
{"id":22,"code":"code22","name":"name22","addr":"address22","_parentId":1},
{"id":31,"code":"code31","name":"name31","addr":"address31","_parentId":1},
{"id":32,"code":"code32","name":"name32","addr":"address32","_parentId":1},
{"id":41,"code":"code41","name":"name41","addr":"address41","_parentId":1},
{"id":42,"code":"code42","name":"name42","addr":"address42","_parentId":1},
{"id":51,"code":"code51","name":"name51","addr":"address51","_parentId":1},
{"id":52,"code":"code52","name":"name52","addr":"address52","_parentId":1},
{"id":61,"code":"code61","name":"name61","addr":"address61","_parentId":1},
{"id":62,"code":"code62","name":"name62","addr":"address62","_parentId":1},
{"id":71,"code":"code71","name":"name71","addr":"address71","_parentId":1},
{"id":72,"code":"code72","name":"name72","addr":"address72","_parentId":1},
{"id":81,"code":"code81","name":"name81","addr":"address81","_parentId":1},
{"id":82,"code":"code82","name":"name82","addr":"address82","_parentId":1},
{"id":91,"code":"code91","name":"name91","addr":"address91","_parentId":1},
{"id":92,"code":"code92","name":"name92","addr":"address92","_parentId":1},
{"id":110,"code":"code110","name":"name110","addr":"address110","_parentId":1},
{"id":120,"code":"code120","name":"name120","addr":"address120","_parentId":1}
]}
標(biāo)紅的地方是特別有用的,我按照他的這個(gè)做法,自己做了一個(gè),始終是沒(méi)有數(shù)據(jù)的,后來(lái)發(fā)現(xiàn)了一個(gè)問(wèn)題,
復(fù)制代碼 代碼如下:
{"total":29,"rows":[
{"Id":25,"Ids":25,"name":"直轄市","state":"closed",<SPAN style="COLOR: #ff0000">"_parentId":2</SPAN>,"orderId":2},
{"Id":44,"Ids":44,"name":"黑龍江","state":"closed","_parentId":2,"orderId":110},
{"Id":45,"Ids":45,"name":"吉林","state":"closed","_parentId":2,"orderId":1},
{"Id":46,"Ids":46,"name":"遼寧","state":"closed","_parentId":2,"orderId":3},
{"Id":47,"Ids":47,"name":"河北","state":"closed","_parentId":2,"orderId":4},
{"Id":48,"Ids":48,"name":"內(nèi)蒙古","state":"closed","_parentId":2,"orderId":111},
{"Id":49,"Ids":49,"name":"山西","state":"closed","_parentId":2,"orderId":6},
{"Id":50,"Ids":50,"name":"江西","state":"closed","_parentId":2,"orderId":11},
{"Id":51,"Ids":51,"name":"山東","state":"closed","_parentId":2,"orderId":12},
{"Id":52,"Ids":52,"name":"臺(tái)灣","state":"closed","_parentId":2,"orderId":13},
{"Id":53,"Ids":53,"name":"甘肅","state":"closed","_parentId":2,"orderId":15},
{"Id":54,"Ids":54,"name":"寧夏","state":"closed","_parentId":2,"orderId":16},
{"Id":55,"Ids":55,"name":"青海","state":"closed","_parentId":2,"orderId":17},
{"Id":56,"Ids":56,"name":"新疆","state":"closed","_parentId":2,"orderId":18},
{"Id":57,"Ids":57,"name":"云南","state":"closed","_parentId":2,"orderId":19}]}
上面這個(gè)數(shù)據(jù) 沒(méi)有一個(gè)根節(jié)點(diǎn),所以頁(yè)面出來(lái)什么都沒(méi)有。。。。。我的數(shù)據(jù)只有parentId這個(gè)玩意,所以頁(yè)面一片空白。
這個(gè)問(wèn)題修正了,但是又出現(xiàn)新的問(wèn)題了。開(kāi)始我的處理方式是直接把所有數(shù)據(jù)load進(jìn)來(lái),點(diǎn)擊節(jié)點(diǎn)展開(kāi)是沒(méi)有問(wèn)題的。但是所有數(shù)據(jù)一起裝載,不光耗性能不說(shuō),還特別慢。
所以想到異步加載。又到官方上去看了半天,官方提供了一大堆事件,什么展開(kāi)觸發(fā)哦之類(lèi)的,沒(méi)有一個(gè)說(shuō)到點(diǎn)上的。
我用火狐監(jiān)聽(tīng)每次數(shù)據(jù)都加載了的,而且有返回正確的JSON
復(fù)制代碼 代碼如下:
{"total":29,"rows":[
{"Id":25,"Ids":25,"name":"直轄市","state":"closed",<SPAN style="COLOR: #ff0000">"_parentId":2</SPAN>,"orderId":2},
{"Id":44,"Ids":44,"name":"黑龍江","state":"closed","_parentId":2,"orderId":110},
。。。。<BR>經(jīng)過(guò)我反復(fù)的對(duì)比tree和這個(gè)treegrid。最后發(fā)現(xiàn)treegrid 在請(qǐng)求過(guò)來(lái)的數(shù)據(jù)上有個(gè)total和rows ,而tree沒(méi)有。
最后一個(gè)小結(jié): easyui treegrid使用時(shí)需注意:
1、必須要有根節(jié)點(diǎn);
2、父節(jié)點(diǎn)裝載的數(shù)據(jù)格式和子節(jié)點(diǎn)裝載的數(shù)據(jù)格式 是不一樣的。
父節(jié)點(diǎn)需要total和rows 而子節(jié)點(diǎn)裝載的時(shí)候和tree的數(shù)據(jù)格式相同。 目前只弄了個(gè)兩級(jí)的,多級(jí)的還沒(méi)有去試。留篇文章,以備后用。
也熱烈歡迎大家指正。
您可能感興趣的文章:
- Easyui Treegrid改變默認(rèn)圖標(biāo)的方法
- Jquery EasyUI實(shí)現(xiàn)treegrid上顯示checkbox并取選定值的方法
- 淺談EasyUI中Treegrid節(jié)點(diǎn)的刪除
- 淺談EasyUI中編輯treegrid的方法
- jquery easyui中treegrid用法的簡(jiǎn)單實(shí)例
- EasyUI的treegrid組件動(dòng)態(tài)加載數(shù)據(jù)問(wèn)題的解決辦法
- jQuery EasyUI API 中文文檔 - TreeGrid 樹(shù)表格使用介紹
- jQuery EasyUI的TreeGrid查詢(xún)功能實(shí)現(xiàn)方法
相關(guān)文章
jQuery html表格排序插件tablesorter使用方法詳解
這篇文章主要為大家詳細(xì)介紹了jQuery html表格排序插件tablesorter的使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02jQuery easyui刷新當(dāng)前tabs的方法
這篇文章給大家介紹了jquery easyui刷新當(dāng)前tabs的方法,本文涉及到param參數(shù)的屬性知識(shí)點(diǎn),本文通過(guò)實(shí)例給大家介紹的非常詳細(xì),具有參考借鑒價(jià)值,感興趣的朋友一起看看吧2016-09-09jQuery對(duì)象和Javascript對(duì)象之間轉(zhuǎn)換的實(shí)例代碼
jQuery對(duì)象和Javascript對(duì)象之間轉(zhuǎn)換的實(shí)例代碼,需要的朋友可以參考一下2013-03-03jQuery滿(mǎn)屏焦點(diǎn)圖左右滾動(dòng)特效代碼分享
這篇文章主要介紹了jQuery滿(mǎn)屏焦點(diǎn)圖左右滾動(dòng)特效,一段精致的焦點(diǎn)圖輪播代碼,有需要的小伙伴可以參考下。2015-09-09jQuery EasyUI API 中文文檔 - MenuButton菜單按鈕使用介紹
jQuery EasyUI API 中文文檔 - MenuButton菜單按鈕使用介紹,使用jQuery EasyUI的朋友可以參考下。2011-10-10使用jQuery.form.js/springmvc框架實(shí)現(xiàn)文件上傳功能
這篇文章主要介紹了使用jQuery.form.js/springmvc框架實(shí)現(xiàn)文件上傳功能,非常具有參考借鑒價(jià)值,感興趣的朋友一起學(xué)習(xí)吧2016-05-05jQuery編輯器KindEditor4.1.4代碼高亮顯示設(shè)置教程
接下來(lái)介紹下編輯器KindEditor4.1.4代碼高亮顯示設(shè)置:加載需要的JS和CSS文件/編輯器初始化設(shè)置后,在里面加prettyPrint等等,感興趣的你可以參考下本文2013-03-03