EASYUI TREEGRID 非同期読み込みデータの実装 method

EASYUI TREEGRID 非同期読み込みデータの実装 method_jquery

WBOY

リリース： 2016-05-16 17:50:36

オリジナル

1412 人が閲覧しました

皆さんにご覧いただけるように、Treegrid の公式の元ファイルを投稿しましょう:

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

これはページの初期化です。
彼の JSON を見てください:

コードをコピーしますコードは次のとおりです:

 
 {"合計 ":117,"行":[ 
{"id":1,"コード":"コード1","名前":"名前1" ,"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":"Municipality", "state":"closed ","_parentId":2,"orderId":2}, 
{"Id":44,"Ids ":44,"名前 ":"黒龍江省","状態":"閉鎖","_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":"Gansu","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":"新疆","州": "閉鎖","_parentId":2,"orderId":18}, 
{"Id":57,"Ids":57,"name":"雲南","州":"closed"," _parentId":2,"orderId":19}]} 

上記のデータにはルートノードがないため、ページには何もありません。。。。。私のデータにはparentIdのみがあるため、ページは空白です。
この問題は解決されましたが、新たな問題が発生しました。最初は、すべてのデータを直接ロードし、ノードをクリックして展開するという方法でしたが、問題ありませんでした。ただし、すべてのデータをまとめてロードすると、パフォーマンスが消費されるだけでなく、速度も非常に遅くなります。
そこで私は非同期ロードを考えました。久しぶりに公式サイトにアクセスして見ましたが、公式サイトには拡張トリガーなどのイベントがたくさんありましたが、どれも的を射ていませんでした。
Firefox を使用して、データが毎回読み込まれることを監視し、正しい JSON が返された

コードをコピーしますコードは次のとおりです:

 
{"total":29,"rows":[ 
{"Id":25,"Ids":25,"name":"Municipality", "state":" Closed","_parentId":2,"orderId":2}, 
{"Id":44,"Ids ":44," name":"黒龍江省","state":"closed","_parentId":2,"orderId":110}、

。。。。
この木とこのツリーグリッドを繰り返し比較した後。最後に、treegrid には要求されたデータの合計と行が含まれていますが、tree には含まれていないことがわかりました。

合計と行が問題を引き起こしているのでしょうか? すぐに削除したところ、案の定、データが出てきました

百度で検索すると色々な意見があります。

最後のまとめ: easyui Treegrid を使用する場合、次の点に注意する必要があります。

1. ルートノードが存在する必要があります。

2.親ノードと子ノードがロードするデータの形式が異なります。
親ノードには合計と行が必要で、子ノードにはロード時にツリーと同じデータ形式が必要です。これまでのところ 2 レベルのものしか構築したことがなく、複数レベルのものはまだ試していません。後で参照できるようにこの記事を保存してください。

皆様からの修正も大歓迎です。