EASYUI TREEGRID 비동기 로딩 데이터 구현 방법

모두가 볼 수 있도록 treegrid의 공식 ex를 게시하겠습니다.

$(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},

. . . .
트리를 이 트리그리드와 반복해서 비교한 후입니다. 마지막으로, treegrid에는 요청한 데이터에 대한 합계와 행이 있지만 tree에는 없다는 것을 발견했습니다.

혹시 그 합계와 행이 문제를 일으키고 있는 건 아닐까요? 급하게 삭제했더니 데이터가 나오네요

바이두에 검색해보시면 다양한 의견이 있습니다.

마지막 요약: easyui treegrid를 사용할 때 주의할 점:

　1. 루트 노드가 있어야 합니다.

2. 상위 노드와 하위 노드가 로드한 데이터의 형식이 다릅니다.
상위 노드에는 합계와 행이 필요하고, 하위 노드에는 로드 시 트리와 동일한 데이터 형식이 필요합니다. 지금까지 2단만 만들었고, 다단은 아직 시도하지 않았습니다. 나중에 참조할 수 있도록 이 문서를 저장하세요.

EASYUI TREEGRID 비동기 로딩 데이터 구현 방식에 대한 더 많은 글은 PHP 중국어 홈페이지를 참고해주세요!