42. Treegrid 树形网格

扩展自.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>
$('#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 (数据表格)，树形表格新增的属性如下：

代码示例：

checkbox:

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

事件

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

方法

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

代码示例：

load:

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

reload:

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

append:

// 追加若干节点到选中节点的后面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:

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

update:

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