EasyUI 树形菜单网格

树形网格（treegrid）用于以网格形式显示分层数据。它是基于数据网格（datagrid）的，并结合了树视图（treeview）和可编辑网格。树形网格（treegrid）允许您创建可定制的、可异步展开的行，并以多列形式显示分层数据。

1、用法

（1）、在 HTML 标记中创建树形网格（treegrid）。在大多数情况下，树形网格（treegrid）遵循与数据网格（datagrid）相同的结构和格式。

[html] view plain copy

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

（2）、使用 JavaScript 创建树形网格（treegrid）。

[html] view plain copy

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

2、属性

该属性扩展自数据网格（datagrid），下面是为树形网格（treegrid）添加的属性。

名称	类型	描述	默认值
idField	string	定义标识树节点的键名字段。必需。	null
treeField	string	定义树节点的字段。必需。	null
animate	boolean	定义当节点展开或折叠时是否显示动画效果。	false
loader	function(param,success,error)	定义如何从远程服务器加载数据。返回 false 则取消该动作。该函数有下列参数： param：要传递到远程服务器的参数对象。 success(data)：当检索数据成功时调用的回调函数。 error()：当检索数据失败时调用的回调函数。	json loader
loadFilter	function(data,parentId)	返回要显示的过滤数据。

3、事件

该事件扩展自数据网格（datagrid），下面是为树形网格（treegrid）添加的事件。

名称	参数	描述
onClickRow	row	当用户点击一个节点时触发。
onDblClickRow	row	当用户双击一个节点时触发。
onClickCell	field,row	当用户点击一个单元格时触发。
onDblClickCell	field,row	当用户双击一个单元格时触发。
onBeforeLoad	row, param	当加载数据的请求发出前触发，返回 false 则取消加载动作。
onLoadSuccess	row, data	当数据加载成功时触发。
onLoadError	arguments	当数据加载失败时触发，arguments 参数和 jQuery.ajax 的 'error' 方法一样。
onBeforeExpand	row	节点展开前触发，返回 false 则取消展开动作。
onExpand	row	当节点展开时触发。
onBeforeCollapse	row	节点折叠前触发，返回 false 则取消折叠动作。
onCollapse	row	当节点折叠时触发。
onContextMenu	e, row	当右键点击节点时触发。
onBeforeEdit	row	当用户开始编辑节点时触发。
onAfterEdit	row,changes	当用户完成编辑时触发。
onCancelEdit	row	当用户取消编辑节点时触发。

4、方法

很多方法需要一个名为 'id' 的参数，该参数表示树节点的值。

名称	参数	描述
options	none	返回树形网格（treegrid）的选项（options）。
resize	options	设置树形网格（treegrid）的尺寸， options 参数包含两个属性： width：树形网格（treegrid）的新宽度。 height：树形网格（treegrid）的新高度。
fixRowHeight	id	固定指定行的高度。
loadData	data	加载树形网格（treegrid）的数据。
load	param	加载并显示第一页。该方法自版本 1.3.4 起可用。
reload	id	重新加载树形网格（treegrid）的数据。如果传递了 'id' 参数，则重新加载树的指定行，否则重新加载树的所有行。
reloadFooter	footer	重新加载底部数据。
getData	none	获取加载的数据。
getFooterRows	none	获取底部数据。
getRoot	none	获取根节点，返回节点对象。
getRoots	none	获取根节点，返回节点数组。
getParent	id	获取父节点。
getChildren	id	获取子节点。
getSelected	none	获取选中的节点并返回它，如果没有选中节点则返回 null。
getSelections	none	获取所有选中的节点。
getLevel	id	获取指定节点的层级。
find	id	找到指定节点并返回该节点数据。
select	id	选择节点。
unselect	id	取消选择节点。
selectAll	none	选择所有节点。
unselectAll	none	取消选择所有节点。
collapse	id	折叠节点。
expand	id	展开节点。
collapseAll	id	折叠所有的节点。
expandAll	id	展开所有的节点。
expandTo	id	从根部展开一个指定的节点。
toggle	id	切换节点的展开/折叠状态。
append	param	追加一些子节点到一个父节点，'param' 参数包括下列属性： parent：父节点的 id，如果没有分配，则追加为根节点。 data：数组，节点的数据。
insert	param	在指定节点的前边或后边插入一个节点，'param' 参数包括下列属性： before：前边插入的节点的 id 值。 after：后边插入的节点的 id 值。 data：新的节点数据。该方法自版本 1.3.1 起可用。
remove	id	移除节点和它的子节点。
pop	id	弹出节点并在移除该节点后返回包含其子节点的节点数据。该方法自版本 1.3.1 起可用。
refresh	id	刷新指定的节点。
update	param	更新指定的节点。'param' 参数包括下列属性： id：表示要被更新的节点的 id。 row：新的行数据。该方法自版本 1.3.1 起可用。
beginEdit	id	开始编辑节点。
endEdit	id	结束编辑节点。
cancelEdit	id	取消编辑节点。
getEditors	id	获取指定行的编辑器。每个编辑器有下列属性： actions：编辑器可以做的动作。 target：目标编辑器的 jquery 对象。 field：字段名。 type：编辑器的类型。
getEditor	param	获取指定的编辑器，param 参数包含两个属性： id：行节点的 id。 field：字段名。

5、实例

[html] view plain copy

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic TreeGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../css/easyui.css">
<link rel="stylesheet" type="text/css" href="../css/icon.css">
<link rel="stylesheet" type="text/css" href="../css/demo.css"/>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
</head>
<body>
<h2>基础树网络</h2>
<table title="Folder Browser" class="easyui-treegrid" style="width:520px;height:250px"
data-options="
url: 'treegrid_data1.json',
method: 'get',
rownumbers: true,
idField: 'id',
treeField: 'name'
">
<thead>
<tr>
<th data-options="field:'name'" width="220">Name</th>
<th data-options="field:'size'" width="100" align="right">Size</th>
<th data-options="field:'date'" width="150">Modified Date</th>
</tr>
</thead>
</table>
<h2>树网络的线</h2>
<table title="TreeGrid Lines" class="easyui-treegrid" style="width:520px;height:250px"
data-options="
url: 'treegrid_data1.json',
method: 'get',
lines: true,
rownumbers: true,
idField: 'id',
treeField: 'name'
">
<thead>
<tr>
<th data-options="field:'name'" width="220">Name</th>
<th data-options="field:'size'" width="100" align="right">Size</th>
<th data-options="field:'date'" width="150">Modified Date</th>
</tr>
</thead>
</table>
</body>
</html>