Méthode de mise en œuvre des données de chargement asynchrone EASYUI TREEGRID-PHP开发-php.cn

Méthode de mise en œuvre des données de chargement asynchrone EASYUI TREEGRID

高洛峰

Libérer： 2016-12-29 13:34:14

original

1582 Les gens l'ont consulté

Je publierai l'ex officiel de treegrid pour que tout le monde puisse y jeter un œil :

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

Copier après la connexion

Ceci est pour l'initialisation de la page.
Regardez son 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} 
]}

Copier après la connexion

Les endroits marqués en rouge sont particulièrement utiles. J'ai suivi son approche et en ai fait un moi-même, mais il n'y avait toujours aucune donnée. Plus tard, j'ai découvert un problème. 🎜>

{"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}]}

Copier après la connexion

Les données ci-dessus n'ont pas de nœud racine, il n'y a donc rien sur la page. . . . . Mes données n'ont que parentId, donc la page est vide.

Ce problème a été résolu, mais un nouveau problème est apparu. Au début, ma méthode consistait à charger toutes les données directement et à cliquer sur le nœud pour le développer. Il n'y avait aucun problème. Cependant, le chargement de toutes les données ensemble consomme non seulement des performances, mais est également extrêmement lent.
J'ai donc pensé au chargement asynchrone. Je suis allé longtemps sur le site officiel et je l'ai regardé. Le site officiel proposait de nombreux événements, tels que les déclencheurs d'extension, etc., mais aucun d'entre eux n'était pertinent.
J'ai utilisé Firefox pour vérifier que les données étaient chargées à chaque fois et que le JSON correct était renvoyé

{"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},

Copier après la connexion

. . . .
Après des comparaisons répétées entre l'arbre et cette grille arborescente. Enfin, j'ai trouvé que Treegrid avait un total et des lignes sur les données demandées, mais pas Tree.

EASYUI TREEGRID异步加载数据实现方法

Se pourrait-il que le total et les lignes causent des problèmes ? J'ai rapidement supprimé cela, et bien sûr, les données sont sorties

EASYUI TREEGRID异步加载数据实现方法

Vous pouvez effectuer une recherche sur Baidu, il existe différentes opinions.

Le dernier résumé : lorsque vous utilisez easyui treegrid, vous devez faire attention à :

　1. Il doit y avoir un nœud racine

2. le nœud parent et les données chargées par le nœud enfant Le format est différent.
Le nœud parent nécessite un total et des lignes, tandis que le nœud enfant a besoin du même format de données que l'arborescence lors du chargement. Jusqu’à présent, je n’en ai fait qu’un à deux niveaux et je n’ai pas encore essayé celui à plusieurs niveaux. Enregistrez cet article pour référence ultérieure.

Pour plus d'articles liés à la méthode d'implémentation des données de chargement asynchrone EASYUI TREEGRID, veuillez faire attention au site Web PHP chinois !