jQuery EasyUI Data Grid and Tree Plugin –Tree

jQuery EasyUI Plugin

Dependencies

• draggable
• droppable

Usage

The tree is defined in a <ul> element. This tag can define leaf nodes and child nodes. The nodes will be <li> elements inside the ul list. The following demonstrates the elements used to create tree nodes nested inside 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="../index.html">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>

A 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 contain the following properties:

• id: The id of the node, 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 the remote site.
• checked: Indicates whether the node is checked.
• attributes: Custom attributes added to a node.
• children: An array of nodes that defines 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#"
    }]
}]

Asynchronous Tree

The tree supports a 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. The following 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 state of the parent node. When a closed node is expanded, if no child nodes have been loaded for it, it sends the node's id value to the server through the URL defined above as an HTTP request parameter named 'id' to retrieve 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, value(2) will be sent to the server to retrieve child nodes.

In this tutorial,Creating an Asynchronous Treedemonstrates how to write server code to return tree data on demand.

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 be displayed.
• iconCls: The CSS class used to display the icon.
• checked: Whether the node is checked.
• state: The node state, 'open' or 'closed'.
• attributes: Custom properties 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