Easyui Treegrid Asynchronous Load Data implementation method _jquery

Source: Internet
Author: User
Officially provided by Treegrid ex I'll post it for you to see:
Copy Code code as follows:

$ (function () {
$ (' #tt '). Treegrid ({
URL: ' Treegrid_data3.json ',
Onafteredit:function (row,changes) {
alert (row.name);
}
});
})

This is the page initialization.
Look at his JSON:
Copy Code code as follows:

{"Total": 117, "Rows": [
<span style= "COLOR: #ff0000" >{"id": 1, "code": "Code1", "name": "Name1", "addr": "Address1", "state": "Closed"}, </SPAN>
{"id": One, "code": "Code11", "name": "Name11", "addr": "Address11", "<span style=" COLOR: #ff0000 ">_parentid":1< /span>},
{"id": "Code": "Code12", "name": "Name12", "addr": "Address12", "<span style=" COLOR: #ff0000 ">_parentid":1< /span>},
{"id": "Code": "Code21", "name": "Name21", "addr": "Address21", "_parentid": 1},
{"id": "Code": "Code22", "name": "Name22", "addr": "Address22", "_parentid": 1},
{"id": "Code": "Code31", "name": "Name31", "addr": "Address31", "_parentid": 1},
{"id": "Code": "Code32", "name": "Name32", "addr": "Address32", "_parentid": 1},
{"id": "Code": "Code41", "name": "Name41", "addr": "Address41", "_parentid": 1},
{"id": "Code": "Code42", "name": "Name42", "addr": "Address42", "_parentid": 1},
{"id": Wuyi, "code": "Code51", "name": "Name51", "addr": "Address51", "_parentid": 1},
{"id": "Code": "Code52", "name": "Name52", "addr": "Address52", "_parentid": 1},
{"id": "Code": "Code61", "name": "Name61", "addr": "Address61", "_parentid": 1},
{"id": "Code": "Code62", "name": "Name62", "addr": "Address62", "_parentid": 1},
{"id":, "code": "Code71", "name": "Name71", "addr": "Address71", "_parentid": 1},
{"id":, "code": "Code72", "name": "Name72", "addr": "Address72", "_parentid": 1},
{"id": Bayi, "code": "Code81", "name": "Name81", "addr": "Address81", "_parentid": 1},
{"id": "," Code ":" Code82 "," name ":" Name82 "," addr ":" Address82 "," _parentid ": 1},
{"id": "Code": "Code91", "name": "Name91", "addr": "Address91", "_parentid": 1},
{"id": "" Code ":" Code92 "," name ":" Name92 "," addr ":" Address92 "," _parentid ": 1},
{"id": $, "code": "code110", "name": "name110", "addr": "address110", "_parentid": 1},
{"id": "Code": "code120", "name": "name120", "addr": "address120", "_parentid": 1}
]}

The red place is particularly useful, I followed his practice, I did one, always is no data, and later found a problem,
Copy Code code as follows:

{"Total": "Rows": [
{"Id": "IDs": "A", "name": "municipality", "state": "Closed", <span style= "COLOR: #ff0000" > "_parentid": 2</span>, " OrderId ": 2},
{"Id": "IDs": "Name": "Heilongjiang", "state": "Closed", "_parentid": 2, "OrderId": 110},
{"Id": "" IDs ":", "name": "Jilin", "state": "Closed", "_parentid": 2, "OrderId": 1},
{"Id": +, "IDs": +, "name": "Liaoning", "state": "Closed", "_parentid": 2, "OrderId": 3},
{"Id": "IDs": "", "name": "Hebei", "state": "Closed", "_parentid": 2, "OrderId": 4},
{"Id": "" IDs ":", "name": "Inner Mongolia", "state": "Closed", "_parentid": 2, "OrderId": 111},
{"Id": "IDs": "2", "name": "Shanxi", "state": "Closed", "_parentid": 6},
{"Id": "IDs": 2, "name": "Jiangxi", "state": "Closed", "_parentid": 11},
{"Id": "IDs": Wuyi, "name": "Shandong", "state": "Closed", "_parentid": 2, "OrderId": 12},
{"Id": "IDs": "Name": "Taiwan", "state": "Closed", "_parentid": 2, "OrderId": 13},
{"Id": "IDs": 2, "name": "Gansu", "state": "Closed", "_parentid": 15},
{"Id": "IDs": "The Name": "Ningxia", "state": "Closed", "_parentid": 2, "orderId": 16},
{"Id": "IDs": "," "Name": "Qinghai", "state": "Closed", "_parentid": 2, "OrderId": 17},
{"Id": "" IDs ":", "name": "Xinjiang", "state": "Closed", "_parentid": 2, "orderId": 18},
{"Id": "IDs": "Name": "Yunnan", "state": "Closed", "_parentid": 2, "orderId": 19}]}

The above data does not have a root node, so the page is out of nothing ... My data only parentid this thing, so the page is blank.
The problem has been fixed, but new problems have arisen. The beginning of my approach is to direct all data load in, click on the node to expand is no problem. But all the data is loaded together, not only the performance is not said, but also very slow.
So think of asynchronous loading. and went to the official to see for a long time, the official provided a lot of events, what launched the trigger Oh, and not a point.
I use Firefox to listen every time the data is loaded, and there is return the correct JSON
Copy Code code as follows:

{"Total": "Rows": [
{"Id": "IDs": "A", "name": "municipality", "state": "Closed", <span style= "COLOR: #ff0000" > "_parentid": 2</span>, " OrderId ": 2},
{"Id": "IDs": "Name": "Heilongjiang", "state": "Closed", "_parentid": 2, "OrderId": 110},

。。。。 <BR> through my repeated comparisons of tree and this treegrid. Finally found that Treegrid had a total and rows on the requested data, but the tree did not.

Is this total and rows in the mischief, I hastened to delete this, and sure enough the data came out

We can Baidu a bit, all kinds of statements have.

The last summary: Easyui Treegrid Use should be noted:

1, must have the root node;

2. The data format loaded by the parent node is not the same as the data format loaded by the child nodes.
The parent node requires total and rows while the child nodes are loaded with the same data format as the tree. Currently only got a level two, multi-level has not yet to try. Leave an article for later use.

We also warmly welcome you to correct me.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.