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

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

jQuery EasyUI 插件

依賴

• datagrid

用法

在 HTML 標(biāo)記中創(chuàng)建樹形網(wǎng)格（treegrid）。在大多數(shù)情況下，樹形網(wǎng)格（treegrid）遵循與數(shù)據(jù)網(wǎng)格（datagrid）相同的結(jié)構(gòu)和格式。

<table id="tt" class="easyui-treegrid" style="width:600px;height:400px"     data-options="url:'get_data.php',idField:'id',treeField:'name'">
    <thead>
		<tr>
			<th data-options="field:'name',width:180">Task Name</th>
			<th data-options="field:'persons',width:60,align:'right'">Persons</th>
			<th data-options="field:'begin',width:80">Begin Date</th>
			<th data-options="field:'end',width:80">End Date</th>
		</tr>
    </thead>
</table>

使用 javascript 創(chuàng)建樹形網(wǎng)格（treegrid）。

<table id="tt" style="width:600px;height:400px"></table>

$('#tt').treegrid({
    url:'get_data.php',
    idField:'id',
    treeField:'name',
    columns:[[
		{title:'Task Name',field:'name',width:180},
		{field:'persons',title:'Persons',width:60,align:'right'},
		{field:'begin',title:'Begin Date',width:80},
		{field:'end',title:'End Date',width:80}
    ]]
});

屬性

該屬性擴(kuò)展自數(shù)據(jù)網(wǎng)格（datagrid），下面是為樹形網(wǎng)格（treegrid）添加的屬性。

事件

該事件擴(kuò)展自數(shù)據(jù)網(wǎng)格（datagrid），下面是為樹形網(wǎng)格（treegrid）添加的事件。

方法

很多方法需要一個(gè)名為 'id' 的參數(shù)，該參數(shù)表示樹節(jié)點(diǎn)的值。

// load and send some request parameters
$('#tg').treegrid('load', {
	q: 'abc',
	name: 'name1'
});

$('#tt').treegrid('reload', 2);	// reload the row which value is equals to 2
$('#tt').treegrid('reload');	// reload the all rows
$('#tt').treegrid('reload', {id:2, q:'abc'});  // reload the specified row with 'q' parameter passing to server

// append some nodes to the selected row
var node = $('#tt').treegrid('getSelected');
$('#tt').treegrid('append',{
	parent: node.id,  // the node has a 'id' value that defined through 'idField' property
	data: [{
		id: '073',
		name: 'name73'
	}]
});

// insert a new node before the selected node
var node = $('#tt').treegrid('getSelected');
if (node){
	$('#tt').treegrid('insert', {
		before: node.id,
		data: {
			id: 38,
			name: 'name38'
		}
	});
}

$('#tt').treegrid('update',{
	id: 2,
	row: {
		name: 'new name',
		iconCls: 'icon-save'
	}
});

jQuery EasyUI 插件