jQuery EasyUI DataGrid & Tree Plugin – Tree

jQuery EasyUI Plugin

Override the default defaults via $.fn.tree.defaults.

The tree displays hierarchical data in a tree structure on a webpage. It provides users with expand, collapse, drag-and-drop, edit, and asynchronous loading functionalities.

Dependencies

• draggable
• droppable

Usage

The tree is defined within a <ul> element. This markup can define leaf nodes and child nodes. Nodes will be <li> elements within the ul list. The following demonstrates the elements used to create tree nodes nested within a <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 an ASP.NET web service.

$('#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 text to display for the node.
• 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 nodes defining some 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#"
    }]
}]

Async Tree

The tree supports a built-in asynchronous loading mode, allowing users to create an empty tree and then specify a server-side script that dynamically returns JSON data to asynchronously populate the tree 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 based on the parent node's state. When a closed node is expanded, if it 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 the child nodes.

Look at 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 Node 1 is expanded, its child nodes will be displayed directly. When Node 2 is expanded, a value (2) will be sent to the server to retrieve the child nodes.

The Create Async Tree tutorial in this series demonstrates how to write server code to return tree data as needed.

Properties

$('#tt').tree({
    data: [{
        text: 'Item1',
        state: 'closed',
        children: [{
            text: 'Item11'
        },{
            text: 'Item12'
        }]
    },{
        text: 'Item2'
    }]
});

$('#tt').tree({
    formatter:function(node){
        return node.text;
    }
});

Events

Many event callback functions require a 'node' parameter, which includes the following properties:

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

$('#tt').tree({
    onClick: function(node){
        alert(node.text); // alert node text property when clicked
    }
});

// right click node and then display the context menu
$('#tt').tree({
    onContextMenu: function(e, node){
        e.preventDefault();
        // select the node
        $('#tt').tree('select', node.target);
        // display context menu
        $('#mm').menu('show', {
            left: e.pageX,
            top: e.pageY
        });
    }
});

// the context menu is defined as below:
<div id="mm" class="easyui-menu" style="width:120px;">
    <div onclick="append()" data-options="iconCls:'icon-add'">Append</div>
    <div onclick="remove()" data-options="iconCls:'icon-remove'">Remove</div>
</div>

Methods

var nodes = $('#tt').tree('getChecked');	// get checked nodes
var nodes = $('#tt').tree('getChecked', 'unchecked');	// get unchecked nodes
var nodes = $('#tt').tree('getChecked', 'indeterminate');	// get indeterminate nodes
var nodes = $('#tt').tree('getChecked', ['checked','indeterminate']);	// get checked and indeterminate nodes

// find a node and then select it
var node = $('#tt').tree('find', 12);
$('#tt').tree('select', node.target);

// append some nodes to the selected node
var selected = $('#tt').tree('getSelected');
$('#tt').tree('append', {
    parent: selected.target,
    data: [{
        id: 23,
        text: 'node23'
    },{
        text: 'node24',
        state: 'closed',
        children: [{
            text: 'node241'
        },{
            text: 'node242'
        }]
    }]
});

var node = $('#tt').tree('getSelected');
if (node){
    $('#tt').tree('insert', {
        before: node.target,
        data: {
            id: 21,
            text: 'node text'
        }
    });
}

// update the selected node text
var node = $('#tt').tree('getSelected');
if (node){
    $('#tt').tree('update', {
        target: node.target,
        text: 'new text'
    });
}

jQuery EasyUI Plugin