jquery Easyui:easyui Treegrid Tree grid __easyui

With the jquery Easyui Treegrid tree grid for data display, but the official website API and demo let me Leng for a long time, groping after sorting out for everyone to see in detail.
jquery Easyui official website: http://www.jeasyui.net/plugins/186.html
Take the city as an example, show the final effect chart first

The first step: the introduction of JS and CSS

<link rel= "stylesheet" type= text/css "href=". /.. /themes/default/easyui.css ">
<link rel=" stylesheet "type=" Text/css "href=". /.. /themes/icon.css ">
<link rel=" stylesheet "type=" Text/css "href=". /demo.css ">
<script type=" Text/javascript "src=". /.. /jquery.min.js "></script>
<script type=" Text/javascript "src=". /.. /jquery.easyui.min.js "></script>

Step two: Use JavaScript to create a tree grid (Treegrid). (people who like to use HTML can be replaced)

<table id= "tt" ></table>

Because in order to explain it in detail, use your own field information parameters without demo

$ (function () {
    $ (' #tt '). Treegrid ({
        URL: ' ${pagecontext.request.contextpath}/city/getcitylist ',
        Method: ' Post ',//          request mode
        IDfield: ' id ',           ///define the key name segment of the Identity tree node
        treefield: ' name ',///       define the field fit for the tree node
        : True,               //grid automatically fills
        fitcolumns:true,//        set to True, the column size is automatically enlarged or scaled to fit the width of the grid and prevents horizontal scrolling.
        columns:[[
            {field: ' Name ', title: ' Names ', width:100},
            {field: ' _parentid ', title: ' Parent ', width:100},
        ]]
    });
});

IDfield: generally defined as a primary key can be
Treefield: is to specify that the column should be shown as a tree
The left is defined as "name" and the right is defined as "_parentid"

Step three: Define entity classes

The red box is Easyui-tree's own property value, but also the main display of the effect

_parentid (MUST): Remember "_" in front, he is used to record the parent node, without this attribute, is unable to show the parent node
second is that the parent node must exist, otherwise the information is not displayed, in the background traversal combination, if the parent node does not exist or 0 o'clock, at this time _ ParentID should not be assigned a value. If the assignment "0" does not show the state
: whether
to expand checked: whether (for check boxes)
iconcls: The icon in front of the option, if you do not set, the parent node defaults to the folder icon, the child node is the file icon

Other property fields can be added by themselves.

Easyui-treegrid Splicing Data Format display

{"Total
    ": "
    Rows": [
        {
            "id": 1, "name": "National",
            "_parentid": null,            //No corresponding parent node is null
            State ":" Closed ","
            iconcls ":" Icon-city ",
            " checked ": false
        },
        {
            " id ": 2,
            " name ":" Beijing ",
            " _parentid ": 1,               //corresponding parent node" state
            ":" Closed ",
            " Iconcls ":" Icon-city ",
            " checked ": false
        }
    ]
}