jQuery EasyUI API 中文文档 - 表格树(Treegrid)

87281248 2013-04-11


TreeGrid

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

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

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

jQuery EasyUI API 中文文档 - 表格树(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>

idFieldstring树节点的key值。必需.null
treeFieldstring树节点值. 必需.null
animateboolean定义节点展开或收敛时,是否显示动画效果.false
loaderfunction(param,success,error)

定义怎样从远程服务器装载数据. return false 退出这个操作. 函数包括以下参数:
param: 传递给远程服务器的参数对象.
success(data): 查询数据成功后,会调用这个回调函数.
error(): 查询数据失败后,会调用这个回调函数.

json loader
loadFilterfunction(data,parentId)返回过滤后的数据. 

 

事件

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

onClickRowrow用户点击节点时触发.
onDblClickRowrow用户双击节点时触发.
onClickCellfield,row用户点击单元格时触发.
onDblClickCellfield,row用户双击单元格时触发.
onBeforeLoadrow, param数据请求前触发, return false 删除请求动作.
onLoadSuccessrow, data数据加载成功时触发.
onLoadErrorarguments数据加载失败时触发, 参数 arguments 与jQuery.ajax 的 'error' 函数相同 .
onBeforeExpandrow节点展开前触发, return false 删除展开动作.
onExpandrow节点展开后触发.
onBeforeCollapserow节点收敛前触发, return false 删除收敛动作.
onCollapserow节点收敛后触发.
onContextMenue, row节点右击时触发.
onBeforeEditrow用户开始编辑节点时触发.
onAfterEditrow,changes用户完成编辑节点后触发.
onCancelEditrow用户放弃编辑节点时触发.

方法

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

optionsnone返回treegrid的可选项.
resizeoptions设置treegrid 的大小, 选项包括两个属性:
width: treegrid新的宽度.
height: treegrid新的高度.
fixRowHeightid固定指定的行高.
loadDatadata加载treegrid 数据.
reloadid重新加载treegrid 数据. 如果传递了参数 'id', 加载指定的行, 否则加载所有的行.

Code example:

$('#tt').treegrid('reload', 2);	// 重新加载 value 等于 2 的行  
$('#tt').treegrid('reload');	// 重新加载所有的行
reloadFooterfooter重新加载 footer 数据.
getDatanone获取加载的数据.
getFooterRowsnone获取footer 数据.
getRootnone获取根节点, 返回node对象
getRootsnone获取所有根节点, 返回node列表.
getParentid获取父节点.
getChildrenid获取子节点.
getSelectednone获取选择的节点并返回, 如果没有节点被选择 返回 null.
getSelectionsnone获取所有选择节点.
getLevelid获取指定节点的level层级.
findid查找指定的节点,返回节点数据.
selectid选择一个节点.
unselectid取消选择一个节点.
selectAllnone选择所有节点.
unselectAllnone取消选择所有节点.
collapseid收敛一个节点.
expandid展开一个节点.
collapseAllid收敛所有节点.
expandAllid展开所有节点.
expandToid从根节点展开到指定的节点.
toggleid切换节点的展开/收敛.
appendparam

附加节点到父节点. 参数'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'  	
           }] 
 });
insertparam插入新节点到指定的节点. 参数'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 之后可用.
removeid移除一个节点和它的子节点.
popid

移除并返回一个节点和它的子节点.

该功能在版本 1.3.1 之后可用.

refreshid刷新指定的节点.
updateparam更新指定的节点. 参数'param'包括下列属性:
id: 被更新的节点的id.
row: 新的数据行.

Code example:

$('#tt').treegrid('update',{  	
            id: 2,  
            row: {  		
                 name: 'new name',  		
                 iconCls: 'icon-save'  
               	}  
});
该功能在版本 1.3.1 之后可用.
beginEditid开始编辑一个节点.
endEditid结束编辑一个节点.
cancelEditid取消编辑一个节点.
getEditorsid获取指定的行编辑器. 每个编辑器有以下属性:
actions: 编辑器可以做的actions.
target: 目标编辑器的 jQuery 对象.
field: field的名称.
type: 编辑器的类型.
getEditorparam获取指定的编辑器, param 包括两种属性:
id: 行节点id.
field: field 名称.

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

相关推荐