jQuery EasyUI API 中文文档 - 表格树（Treegrid）

TreeGrid

由 $.fn.datagrid.defaults扩展而来。

default由$.fn.treegrid.defaults重载。

Treegrid用来在表格中显示层级数据。它基于datagrid,结合了treeview和editable grid。Treegrid可以自定义，异步展开行数据，在多列中展示层级数据。

依赖控件

• datagrid

用法

用HTML标记生成treegrid. 在大多数情况下，treegrid和datagrid 拥有相同的结构和格式；

 

    <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生成treegrid

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

属性

属性扩展自datagrid, 下面是为treegrid新增的属性：

<style> <!-- .doc-table {border-collapse:collapse; border-spacing:0; margin-left:9px; font-size:13px} .doc-table th, .doc-table td {border:1px solid #8CACBB; padding:0.3em 0.7em} .doc-table th {background:#eee} --> </style>

名称 类型 描述 缺省值

idField	string	树节点的key值。必需.	null
treeField	string	树节点值. 必需.	null
animate	boolean	定义节点展开或收敛时，是否显示动画效果.	false
loader	function(param,success,error)	定义怎样从远程服务器装载数据. return false 退出这个操作. 函数包括以下参数: param: 传递给远程服务器的参数对象. success(data): 查询数据成功后，会调用这个回调函数. error(): 查询数据失败后，会调用这个回调函数.	json loader
loadFilter	function(data,parentId)	返回过滤后的数据.

 

事件

事件扩展自datagrid, 下面是为treegrid新增的事件：

名称 参数 描述

onClickRow	row	用户点击节点时触发.
onDblClickRow	row	用户双击节点时触发.
onClickCell	field,row	用户点击单元格时触发.
onDblClickCell	field,row	用户双击单元格时触发.
onBeforeLoad	row, param	数据请求前触发, return false 删除请求动作.
onLoadSuccess	row, data	数据加载成功时触发.
onLoadError	arguments	数据加载失败时触发, 参数 arguments 与jQuery.ajax 的 'error' 函数相同 .
onBeforeExpand	row	节点展开前触发, return false 删除展开动作.
onExpand	row	节点展开后触发.
onBeforeCollapse	row	节点收敛前触发, return false 删除收敛动作.
onCollapse	row	节点收敛后触发.
onContextMenu	e, row	节点右击时触发.
onBeforeEdit	row	用户开始编辑节点时触发.
onAfterEdit	row,changes	用户完成编辑节点后触发.
onCancelEdit	row	用户放弃编辑节点时触发.

方法

许多方法有"id"这个参数，这个参数指的是tree节点的value值

名称 参数 描述

options	none	返回treegrid的可选项.
resize	options	设置treegrid 的大小, 选项包括两个属性: width: treegrid新的宽度. height: treegrid新的高度.
fixRowHeight	id	固定指定的行高.
loadData	data	加载treegrid 数据.
reload	id	重新加载treegrid 数据. 如果传递了参数 'id', 加载指定的行, 否则加载所有的行. Code example: $('#tt').treegrid('reload', 2); // 重新加载 value 等于 2 的行 $('#tt').treegrid('reload'); // 重新加载所有的行
reloadFooter	footer	重新加载 footer 数据.
getData	none	获取加载的数据.
getFooterRows	none	获取footer 数据.
getRoot	none	获取根节点, 返回node对象
getRoots	none	获取所有根节点, 返回node列表.
getParent	id	获取父节点.
getChildren	id	获取子节点.
getSelected	none	获取选择的节点并返回, 如果没有节点被选择 返回 null.
getSelections	none	获取所有选择节点.
getLevel	id	获取指定节点的level层级.
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: 节点数据列表. Code example: // append some nodes to the selected row var node = $('#tt').treegrid('getSelected'); $('#tt').treegrid('append',{ parent: node.id, // 节点有一个‘id'值，通过 'idField'属性指定 data: [{ id: '073', name: 'name73' }] });
insert	param	插入新节点到指定的节点. 参数'param'包括下列属性 : before: 插入节点之前的节点id. after: 插入节点之后的节点id. data: 新的节点数据. Code example: // 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' } }); } 该功能在版本 1.3.1 之后可用.
remove	id	移除一个节点和它的子节点.
pop	id	移除并返回一个节点和它的子节点. 该功能在版本 1.3.1 之后可用.
refresh	id	刷新指定的节点.
update	param	更新指定的节点. 参数'param'包括下列属性: id: 被更新的节点的id. row: 新的数据行. Code example: $('#tt').treegrid('update',{ id: 2, row: { name: 'new name', iconCls: 'icon-save' } }); 该功能在版本 1.3.1 之后可用.
beginEdit	id	开始编辑一个节点.
endEdit	id	结束编辑一个节点.
cancelEdit	id	取消编辑一个节点.
getEditors	id	获取指定的行编辑器. 每个编辑器有以下属性: actions: 编辑器可以做的actions. target: 目标编辑器的 jQuery 对象. field: field的名称. type: 编辑器的类型.
getEditor	param	获取指定的编辑器, param 包括两种属性: id: 行节点id. field: field 名称.

 

参考文档: http://www.jeasyui.com