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

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

WBOY

풀어 주다： 2016-05-16 17:50:36

원래의

1411명이 탐색했습니다.

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

코드 복사 코드는 다음과 같습니다.

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

페이지 초기화입니다.
그의 JSON을 살펴보세요.

코드 복사 코드는 다음과 같습니다.

 
 {"총 ":117,"행":[ 
{"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", "이름":"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":"Jiangxi","state":"closed","_parentId":2,"orderId" :11}, 
 {"Id":51,"Ids":51,"name":"Shandong","state":"closed","_parentId":2,"orderId":12}, 
{"Id": 52,"Ids":52,"name":"Taiwan","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":"Qinghai" ,"state":"closed","_parentId":2,"orderId":17}, 
{"Id":56,"Ids":56,"name":" Xinjiang","state": "closed","_parentId":2,"orderId":18}, 
{"Id":57,"Ids":57,"name":"Yunnan","state ":"closed"," _parentId":2,"orderId":19}]} 

위 데이터에는 루트 노드가 없으므로 페이지에 아무것도 없습니다. . . . . 내 데이터에는 parentId만 있으므로 페이지가 비어 있습니다.
이 문제는 해결되었으나 새로운 문제가 나타났습니다. 처음에는 모든 데이터를 직접 로드하고 노드를 클릭하여 확장하는 방법이었는데 문제가 없었습니다. 그러나 모든 데이터를 함께 로드하면 성능이 소모될 뿐만 아니라 속도도 매우 느립니다.
그래서 비동기 로딩을 생각하게 되었습니다. 공식 홈페이지에 한참을 들어가 살펴보니 확장 트리거 등 이벤트가 많이 나와 있었는데 그 중 딱 맞는 게 하나도 없었습니다.
Firefox를 사용하여 매번 데이터가 로드되고 올바른 JSON이 반환되는지 모니터링했습니다.

코드 복사 코드는 다음과 같습니다:

 
{"total":29,"rows":[ 
{"Id":25,"Ids":25,"name":"Municipality", "state":" 닫힘","_parentId":2,"orderId":2}, 
{"Id":44,"Ids ":44," 이름":"헤이룽장","상태":"폐쇄됨","_parentId":2,"orderId":110}, 

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

혹시 합계와 행이 문제가 된 건 아닐까요? 급하게 삭제했더니 데이터가 나오네요

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

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

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

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

여러분의 지적도 진심으로 환영합니다.