TreeGrid Document

扩展自$.fn.datagrid.defaults。使用$.fn.treegrid.defaults重写默认值对象。
树形表格用于显示分层数据表格。它是基于数据表格、组合树控件和可编辑表格。树形表格允许用户创建可定制的、异步展开行和显示在多列上的分层数据。

依赖关系：

datagrid

用法：

使用HTML标签创建树形表格。在大多数情况下，树形表格遵循数据表格的结构。

					
<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创建树形表格。

					
<table id="tt" style="width:600px;height:400px"></table>  
<script type="text/javascript">
$('#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}    
    ]]    
}); 
</script>
					
				

属性：

树形表格扩展自datagrid(数据表格)，树形表格新增的属性如下：

							
$('#tg').treegrid({
  checkbox: function(row){
    var names = ['Java','eclipse.exe','eclipse.ini'];
    if ($.inArray(row.name, names)>=0){
      return true;
    }
  }
})
							
						

事件：

树形表格的事件扩展自datagrid(数据表格)，树形表格新增的时间如下：

方法：

很多方法都使用'id'命名参数，而'id'参数代表树节点的值。

							
// 读取并发送请求参数
$('#tg').treegrid('load', {
  q: 'abc',
  name: 'name1'
});
							
						

							
$('#tt').treegrid('reload', 2);  // 重新载入值为2的行
$('#tt').treegrid('reload');  // 重新载入所有行
							
						

							
// 追加若干节点到选中节点的后面var node = $('#tt').treegrid('getSelected');
$('#tt').treegrid('append',{
  parent: node.id,  // the node has a 'id' value that defined through 'idField' property
  data: [{
    id: '073',
    name: 'name73'
  }]
});
							
						

							
// 插入一个新节点到选择的节点之前
var node = $('#tt').treegrid('getSelected');
if (node){
  $('#tt').treegrid('insert', {
    before: node.id,
    data: {
      id: 38,
      name: 'name38'
    }
  });
}
							
						

							
// 插入一个新节点到选择的节点之前
$('#tt').treegrid('update',{
  id: 2,
  row: {
    name: '新名称',
    iconCls: 'icon-save'
  }
});