jQuery EasyUI 数据网格与树插件 – Treegrid 树形网格

扩展自 $.fn.datagrid.defaults。通过 $.fn.treegrid.defaults 重写默认的 defaults。

树形网格（treegrid）用于以网格形式显示分层数据。它是基于数据网格（datagrid）的，并结合了树视图（treeview）和可编辑网格。树形网格（treegrid）允许您创建可定制的、可异步展开的行，并以多列形式显示分层数据。

依赖

• datagrid

用法

在 HTML 标记中创建树形网格（treegrid）。在大多数情况下，树形网格（treegrid）遵循与数据网格（datagrid）相同的结构和格式。

<table id="tt"
    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）添加的属性。

事件

该事件扩展自数据网格（datagrid），下面是为树形网格（treegrid）添加的事件。

方法

很多方法需要一个名为 'id' 的参数，该参数表示树节点的值。

// load and send some request parameters
$('#tg').treegrid('load', {
    q: 'abc',
    name: 'name1'
});

$('#tt').treegrid('reload', 2);    // reload the row which value is equals to 2
$('#tt').treegrid('reload');    // reload the all rows
$('#tt').treegrid('reload', {id:2, q:'abc'});  // reload the specified row with 'q' parameter passing to server

// append some nodes to the selected row
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'
    }]
});

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