EASYUI TREEGRID asynchronous loading data implementation method_jquery

Let me post the official ex of treegrid for everyone to take a look at:

Copy the code The code is as follows:

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

This is page initialization.
Look at his JSON:

Copy the code The code is as follows:

{"total ":117,"rows":[
{"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", "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}
]}

The places marked in red are particularly useful, I follow his instructions I made this method myself, but there was always no data. Later I discovered a problem,

Copy the code The code is as follows:

{"total":29,"rows":[
{"Id":25,"Ids":25,"name":"Municipality","state":"closed ","_parentId":2,"orderId":2},
{"Id":44,"Ids":44,"name ":"Heilongjiang","state":"closed","_parentId":2,"orderId":110},
{"Id":45,"Ids":45,"name":"Jilin" ,"state":"closed","_parentId":2,"orderId":1},
{"Id":46,"Ids":46,"name":"Liaoning","state": "closed","_parentId":2,"orderId":3},
{"Id":47,"Ids":47,"name":"Hebei","state":"closed"," _parentId":2,"orderId":4},
{"Id":48,"Ids":48,"name":"Inner Mongolia","state":"closed","_parentId":2, "orderId":111},
{"Id":49,"Ids":49,"name":"Shanxi","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 ":"Ningxia","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}]}

The above data does not have a root node, so there is nothing on the page. . . . . My data only has parentId, so the page is blank.
This problem has been fixed, but a new problem has appeared. At first, my method was to load all the data directly and click on the node to expand it. There was no problem. However, loading all the data together not only consumes performance, but is also extremely slow.
So I thought of asynchronous loading. I went to the official website for a long time and looked at it. The official website provided a lot of events, such as expansion triggers, etc., but none of them were on point.
I used Firefox to monitor that the data was loaded every time, and the correct JSON was returned

Copy the code The code is as follows:

{"total":29,"rows":[
{"Id":25,"Ids":25,"name":"Municipality","state":" closed","_parentId":2,"orderId":2},
{"Id":44,"Ids":44," name":"Heilongjiang","state":"closed","_parentId":2,"orderId":110},

. . . .
After I repeatedly compared the tree with this treegrid. Finally, I found that treegrid has total and rows on the requested data, but tree does not.

Could it be that the total and rows were causing trouble? I quickly deleted this, and sure enough the data came out

You can search on Baidu, there are various opinions.

The last summary: When using easyui treegrid, you need to pay attention to:

　1. There must be a root node;

2. The data format loaded by the parent node and the data loaded by the child node The format is different.
The parent node requires total and rows, and the child node needs the same data format as the tree when loading. I have only built a two-level one so far, and I haven’t tried the multi-level one yet. Save this article for later reference.

We also warmly welcome everyone’s corrections.