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>

事件

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

方法

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

$('#tt').treegrid('reload', 2);	// 重新加载 value 等于 2 的行  
$('#tt').treegrid('reload');	// 重新加载所有的行

// 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 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'  		
                     }  
	});  
}

$('#tt').treegrid('update',{  	
            id: 2,  
            row: {  		
                 name: 'new name',  		
                 iconCls: 'icon-save'  
               	}  
});

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