首頁 > web前端 > js教程 > EASYUI TREEGRID非同步載入資料實作方法_jquery

EASYUI TREEGRID非同步載入資料實作方法_jquery

WBOY
發布: 2016-05-16 17:50:36
原創
1420 人瀏覽過

官方提供的treegrid的ex 我幫大家貼出來看看吧:

複製程式碼 程式碼如下:


程式碼如下:


$(function(){
$('#tt').treegrid({
url:'treegrid_data3.json',
onAfterEdit:function(row,changes){
alert (row.name);
}
});
})
這個是頁面初始化的。 看看他的JSON:
複製程式碼


程式碼如下:



程式碼如下:


{"> ":117,"rows":[
{"id":1,"code":"code1","name":"name1","addr": "address1","state":"closed"},
{"id":11,"code":"code11","name":"name11","addr":"address11" ,"_parentId":1},
{"id":12,"code":"code12","name":"name12"," addr":"address12","_parentId":1},
{"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} ]} 標紅的地方是特別有用的,我按照他的這個做法,自己做了一個,總是沒有資料的,後來發現了一個問題,



複製程式碼


程式碼如下:

{"total":29,"rows":[
{"Id":25,"Ids":25,"name":"直轄市","state":"closed","_parentId":2,"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":"內蒙古","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}]}
上面這個資料 沒有一個根節點,所以頁面出來什麼都沒有。 。 。 。 。我的資料只有parentId這個玩意,所以頁面一片空白。
這個問題修正了,但是又出現新的問題了。開始我的處理方式是直接把所有資料load進來,點選節點展開是沒有問題的。但是所有數據一起裝載,不光耗性能不說,還特別慢。
所以想到非同步載入。又到官方上去看了半天,官方提供了一大堆事件,什麼展開觸發哦之類的,沒有一個說到點上的。
我用火狐監聽每次資料都載入了的,而且有回傳正確的JSON
複製程式碼 程式碼如下:

{"total":29,"rows":[
{"Id":25,"Ids":25,"name":"直轄市","state":" closed","_parentId":2,"orderId":2},
{"Id":44,"Ids":44,"name" :"黑龍江","state":"closed","_parentId":2,"orderId":110},

。 。 。 。
經過我反覆的對比tree和這個treegrid。最後發現treegrid 在請求過來的資料上有total和rows ,而tree沒有。

難道是這個total和rows在作怪,我趕緊把這個刪掉了,果然資料出來了

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

最後一個小結: easyui treegrid使用時需注意:

  1、必須要有根節點;

2、父節點裝載的資料格式和子節點裝載的資料格式是不一樣的。
父節點需要total和rows 而子節點裝載的時候和tree的資料格式相同。 目前只弄了個兩級的,多級的還沒去試。留篇文章,以備後用。

也熱烈歡迎大家指正。
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板