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

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



属性

属性扩展自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:

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

posted on 2013-04-11 18:16  dqsweet  阅读(7141)  评论(0)    收藏  举报

导航