jQuery EasyUI DataGrid and Tree Plugin - Tree

The defaults are rewritten by $.fn.tree.defaults.

The tree is displayed in a tree structure on the web page, showing hierarchical data. It provides users with functions such as expand, collapse, drag, edit, and asynchronous loading.

Dependencies

• draggable
• droppable

Usage

The tree is defined in the <ul> element. This markup can define leaf nodes and child nodes. The nodes will be <li> elements within the ul list. The following demonstrates the elements that will be used to create tree nodes nested within the ul element.

<ul id="tt" class="easyui-tree">
    <li>
        <span>Folder</span>
        <ul>
            <li>
                <span>Sub Folder 1</span>
                <ul>
                    <li><span><a href="#">File 11</a></span></li>
                    <li><span>File 12</span></li>
                    <li><span>File 13</span></li>
                </ul>
            </li>
            <li><span>File 2</span></li>
            <li><span>File 3</span></li>
        </ul>
    </li>
    <li><span>File21</span></li>
</ul>

The tree can also be defined in an empty <ul> element and data can be loaded using JavaScript.

<ul id="tt"></ul>

$('#tt').tree({
    url:'tree_data.json'
});

Use loadFilter to process JSON data from ASP.NET web services.

$('#tt').tree({
    url: ...,
    loadFilter: function(data){
        if (data.d){
            return data.d;
        } else {
            return data;
        }
    }
});

Tree Data Format

Each node can include the following properties:

• id: The node's id, which is important for loading remote data.
• text: The node text to be displayed.
• state: The node state, 'open' or 'closed', default is 'open'. When set to 'closed', the node has child nodes and they will be loaded from a remote site.
• checked: Indicates whether the node is checked.
• attributes: Custom attributes added to a node.
• children: An array of child nodes.

Example:

[{
    "id":1,
    "text":"Folder1",
    "iconCls":"icon-save",
    "children":[{
        "text":"File1",
        "checked":true
    },{
        "text":"Books",
        "state":"open",
        "attributes":{
            "url":"/demo/book/abc",
            "price":100
        },
        "children":[{
            "text":"PhotoShop",
            "checked":true
        },{
            "id": 8,
            "text":"Sub Bookds",
            "state":"closed"
        }]
    }]
},{
    "text":"Languages",
    "state":"closed",
    "children":[{
        "text":"Java"
    },{
        "text":"C#"
    }]
}]

Asynchronous Tree

The tree supports built-in asynchronous loading mode, so users can create an empty tree and then specify a server-side that dynamically returns JSON data to populate the tree asynchronously as needed. Here is an example:

<ul class="easyui-tree" data-options="url:'get_data.php'"></ul>

The tree is loaded via the URL 'get_data.php'. Child nodes are loaded depending on the parent node's state. When expanding a closed node, if the node has no child nodes loaded, it will send the node's id value to the server as an http request parameter named 'id' via the URL defined above to retrieve child nodes.

See the data returned from the server:

[{
    "id": 1,
    "text": "Node 1",
    "state": "closed",
    "children": [{
        "id": 11,
        "text": "Node 11"
    },{
        "id": 12,
        "text": "Node 12"
    }]
},{
    "id": 2,
    "text": "Node 2",
    "state": "closed"
}]

Node 1 and Node 2 are closed, when expanding Node 1, its child nodes will be displayed directly. When expanding Node 2, it will send value(2) to the server to retrieve child nodes.

The Creating an Asynchronous Tree in this tutorial demonstrates how to write server code to return tree data on demand.

Properties

Events

Many event callbacks require the 'node' parameter, which includes the following properties:

• id: The identifier value bound to the node.
• text: The text to be displayed.
• iconCls: The css class to display an icon.
• checked: Whether the node is checked.
• state: The node state, 'open' or 'closed'.
• attributes: Custom attributes bound to the node.
• target: The target's DOM object.

target: The drop target node as a DOM object. <br>source: The source node. <br>point: Indicates the drop action, possible values are: 'append', 'top', or 'bottom'. | | onBeforeEdit | node | Triggered before editing a node. | | onAfterEdit | node | Triggered after editing a node. | | onCancelEdit | node | Triggered when the editing action is canceled. |

Methods