jQuery EasyUI data grid and tree widget - Tree Tree

rely

• draggable
• droppable

usage

Tree (tree) is defined in the <ul> element. The tag can be defined leaf nodes and sub-nodes. Node is <li> ul element in the list. The following shows will be used for the production of elements nested within the ul element tree node.

<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>

Tree (Tree) can also be defined in an empty <ul> element, you can use javascript to load data.

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

$ ( '# Tt'). Tree ({
    url: 'tree_data.json'
});

Use loadFilter to handle json data from ASP.NET web service.

$ ( '# Tt'). Tree ({
    url: ...,
    loadFilter: function (data) {
		if (data.d) {
			return data.d;
		} Else {
			return data;
		}
    }
});

Tree data format (Tree Data Format)

Each node can include the following attributes:

• id: node id, it is important to load remote data.
• text: text to be displayed node.
• state: node status, 'open' or 'closed', the default is 'open'. When set to 'closed', the node has child nodes, and load them from a remote site.
• checked: Indicates whether the node is selected.
• attributes: a node to add custom attributes.
• children: defines the array of nodes 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

Built-in support for asynchronous loading tree mode, so users can create an empty tree, then specify a server-side dynamic returns JSON data, according to the demand for asynchronously populated tree. Here is an example:

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

Tree by URL 'get_data.php' loaded. Child nodes depends on the parent node status is loaded. When you expand a closed node, if the node has no children loaded, it will send to the id value of the server node as http named 'id' request URL parameters defined above, in order 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"
}]

Nodes 1 and 2 are closed, when you expand a node, will showcase its child nodes directly. When you expand the node 2, the server will send the value (2) in order to retrieve the child nodes.

This tutorial to create an asynchronous trees demonstrate how to write code to the server according to the demand to return the tree data.

Attributes

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

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

event

Many events require a callback function 'node' parameters, which include the following properties:

• id: bound to the identity value of the node.
• text: text to be displayed.
• iconCls: to display the icon css class.
• checked: whether the node is selected.
• state: node status, 'open' or 'closed'.
• attributes: bind to custom attribute node.
• target: DOM objects targets.

$('#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>

method

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'
	});
}