快捷導(dǎo)航

EASYUI TREEGRID異步加載數(shù)據(jù)實現(xiàn)方法

更新時間：2012年08月22日 20:47:43 作者：

找了一下官方文檔，看了EASYUI的異步加載，弄了我兩三個小時，死活都不出數(shù)據(jù)

官方提供的treegrid的ex 我給大家貼出來看看吧：

 
$(function(){ 
$('#tt').treegrid({ 
url:'treegrid_data3.json', 
onAfterEdit:function(row,changes){ 
alert(row.name); 
} 
}); 
}) 

這個是頁面初始化的。
看看他的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)紅的地方是特別有用的，我按照他的這個做法，自己做了一個，始終是沒有數(shù)據(jù)的，后來發(fā)現(xià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":"臺灣","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}]} 

上面這個數(shù)據(jù) 沒有一個根節(jié)點，所以頁面出來什么都沒有。。。。。我的數(shù)據(jù)只有parentId這個玩意，所以頁面一片空白。
這個問題修正了，但是又出現(xiàn)新的問題了。開始我的處理方式是直接把所有數(shù)據(jù)load進來，點擊節(jié)點展開是沒有問題的。但是所有數(shù)據(jù)一起裝載，不光耗性能不說，還特別慢。
所以想到異步加載。又到官方上去看了半天，官方提供了一大堆事件，什么展開觸發(fā)哦之類的，沒有一個說到點上的。
我用火狐監(jiān)聽每次數(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)過我反復(fù)的對比tree和這個treegrid。最后發(fā)現(xiàn)treegrid 在請求過來的數(shù)據(jù)上有個total和rows ，而tree沒有。

難道是這個total和rows在作怪，我趕緊把這個刪掉了，果然數(shù)據(jù)出來了

大家可以百度一下，各種說法都有。

最后一個小結(jié)： easyui treegrid使用時需注意：

　　1、必須要有根節(jié)點;

2、父節(jié)點裝載的數(shù)據(jù)格式和子節(jié)點裝載的數(shù)據(jù)格式是不一樣的。
父節(jié)點需要total和rows 而子節(jié)點裝載的時候和tree的數(shù)據(jù)格式相同。目前只弄了個兩級的，多級的還沒有去試。留篇文章，以備后用。

也熱烈歡迎大家指正。

您可能感興趣的文章: