jQueryEasyUIAPI中⽂⽂档-表格树（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"
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
<table id="tt" ></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新增的属性：
名称类型描述缺省值
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:
jquery官方文档下载$('#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 名称.
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论