jQuery EasyUI 數(shù)據(jù)網(wǎng)格與樹插件 – Tree 樹

jQuery EasyUI 數(shù)據(jù)網(wǎng)格與樹插件 - Tree 樹

jQuery EasyUI 插件

依賴

• draggable
• droppable

用法

樹（tree）定義在 <ul> 元素中。該標(biāo)記可定義葉節(jié)點和子節(jié)點。節(jié)點將是 ul 列表內(nèi)的 <li> 元素。下面演示了將被用于制作嵌套在 ul 元素內(nèi)的樹節(jié)點的元素。

<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）也可以在一個空的 <ul> 元素中定義，可使用 javascript 加載數(shù)據(jù)。

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

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

使用 loadFilter 來處理來自 ASP.NET web 服務(wù)的 json 數(shù)據(jù)。

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

樹的數(shù)據(jù)格式（Tree Data Format）

每個節(jié)點可以包括下列屬性：

• id：節(jié)點的 id，它對于加載遠(yuǎn)程數(shù)據(jù)很重要。
• text：要顯示的節(jié)點文本。
• state：節(jié)點狀態(tài)，'open' 或 'closed'，默認(rèn)是 'open'。當(dāng)設(shè)置為 'closed' 時，該節(jié)點有子節(jié)點，并且將從遠(yuǎn)程站點加載它們。
• checked：指示節(jié)點是否被選中。
• attributes：給一個節(jié)點添加的自定義屬性。
• children：定義了一些子節(jié)點的節(jié)點數(shù)組。

實例：

[{
    "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#"
    }]
}]

異步樹

樹支持內(nèi)置的異步加載模式，因此用戶可以創(chuàng)建一個空的樹，然后指定一個動態(tài)返回 JSON 數(shù)據(jù)的服務(wù)器端，用于根據(jù)需求異步填充樹。下面是一個實例：

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

樹是通過 URL 'get_data.php' 加載的。子節(jié)點依賴于父節(jié)點狀態(tài)被加載。當(dāng)展開一個關(guān)閉的節(jié)點時，如果該節(jié)點沒有子節(jié)點加載，它將通過上面定義的 URL 向服務(wù)器發(fā)送節(jié)點的 id 值作為名為 'id' 的 http 請求參數(shù)，以便檢索子節(jié)點。

請看從服務(wù)器返回的數(shù)據(jù)：

[{
    "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"
}]

節(jié)點 1 和節(jié)點 2 是關(guān)閉的，當(dāng)展開節(jié)點 1 時，將直接展示它的子節(jié)點。當(dāng)展開節(jié)點 2 時，將向服務(wù)器發(fā)送 value(2) 以便檢索子節(jié)點。

本教程中的 創(chuàng)建異步樹 演示了如何編寫服務(wù)器代碼來根據(jù)需求返回樹的數(shù)據(jù)。

屬性

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

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

事件

很多事件的回調(diào)函數(shù)需要 'node' 參數(shù)，它包括下列屬性：

• id：綁定到節(jié)點的標(biāo)識值。
• text：要顯示的文本。
• iconCls：用來顯示圖標(biāo)的 css class。
• checked：節(jié)點是否被選中。
• state：節(jié)點狀態(tài)，'open' 或 'closed'。
• attributes：綁定到節(jié)點的自定義屬性。
• target：目標(biāo)的 DOM 對象。

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

方法

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