EASYUI TREEGRID非同期ロードデータ実装方法

皆さんが見ていただけるように、Treegrid の公式の元ファイルを投稿します:

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

これはページの初期化用です。
彼の 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} 
]}

赤でマークされた領域は、彼のアプローチに従って自分で作成しましたが、常にデータがありませんでした。後で問題を発見しました。

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

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

もしかしてtotalとrowsが問題を起こしていたのでしょうか?すぐに削除したら案の定データが出てきました

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

最後のまとめ: easyui Treegridを使用する場合、次の点に注意してください:

1. ルートノードが必要です;

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

EASYUI TREEGRID 非同期読み込みデータの実装方法に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。