39. Datagrid 数据网格

扩展自.fn.panel.defaults。使用.fn.datagrid.defaults重写默认值对象。

DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分功能。

依赖关系

• panel
• resizable
• linkbutton
• pagination

使用案例

从现有的表格元素创建DataGrid，在HTML中定义列、行和数据。

<table class="easyui-datagrid">
    <thead>
        <tr>
            <th data-options="field:'code'">编码</th>
            <th data-options="field:'name'">名称</th>
            <th data-options="field:'price'">价格</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>001</td><td>名称1</td><td>2323</td>
        </tr>
        <tr>
            <td>002</td><td>名称2</td><td>4612</td>
        </tr>
    </tbody>
</table>

通过 <table> 标签创建DataGrid控件。在表格内使用 <th> 标签定义列。

<table class="easyui-datagrid" style="width:400px;height:250px" data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">
    <thead>
        <tr>
            <th data-options="field:'code',width:100">编码</th>
            <th data-options="field:'name',width:100">名称</th>
            <th data-options="field:'price',width:100,align:'right'">价格</th>
        </tr>
    </thead>
</table>

此外，也允许使用Javascript去创建DataGrid控件。

<table id="dg"></table>
$('#dg').datagrid({
    url:'datagrid_data.json',
    columns:[[
        {field:'code',title:'代码',width:100},
        {field:'name',title:'名称',width:100},
        {field:'price',title:'价格',width:100,align:'right'}
    ]]
});

使用一些参数查询数据。

$('#dg').datagrid('load', {
    name: 'easyui',
    address: 'ho'
});

改变的数据保存到服务器之后，刷新当前数据。

$('#dg').datagrid('reload');    // 重新载入当前页面数据

DataGrid属性

该属性扩展自panel(面板)，下面是DataGrid控件添加的属性。

代码示例：

toolbar:

在 <div> 标签上定义工具栏：

$('#dg').datagrid({
    toolbar: '#tb'
});
<div id="tb">
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">编辑</a>
    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true">帮助</a>
</div>

通过数组定义工具栏：

$('#dg').datagrid({
    toolbar: [{
        iconCls: 'icon-edit',
        handler: function(){alert('编辑按钮')}
    },'-',{
        iconCls: 'icon-help',
        handler: function(){alert('帮助按钮')}
    }]
});

data:

$('#dg').datagrid({
    data: [
        {f1:'value11', f2:'value12'},
        {f1:'value21', f2:'value22'}
    ]
});

queryParams:

$('#dg').datagrid({
    queryParams: {
        name: 'easyui',
        subject: 'datagrid'
    }
});

rowStyler：

$('#dg').datagrid({
    rowStyler: function(index,row){
        if (row.listprice>80){
            return 'background-color:#6293BB;color:#fff;';
        }
    }
});

// 译者注（1.3.4新增方式）：
$('#dg').datagrid({
    rowStyler: function(index,row){
        if (row.listprice>80){
            return 'rowStyle';    // rowStyle是一个已经定义了的ClassName(类名)
        }
    }
});

loadFilter:

// 从Web Service（asp.net、java、php等）输出的JSON对象中移除'd'对象
$('#dg').datagrid({
    loadFilter: function(data){
        if (data.d){
            return data.d;
        } else {
            return data;
        }
    }
});

列属性

DataGrid列是一个数组对象，该元素也是一个数组对象。元素数组里面的元素是一个配置对象，它用来定义每一个列字段。

代码示例：

columns:[[
    {field:'itemid',title:'Item ID',rowspan:2,width:80,sortable:true},
    {field:'productid',title:'Product ID',rowspan:2,width:80,sortable:true},
    {title:'Item Details',colspan:4}
],[
    {field:'listprice',title:'List Price',width:80,align:'right',sortable:true},
    {field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},
    {field:'attr1',title:'Attribute',width:100},
    {field:'status',title:'Status',width:60}
]]

代码示例：

formatter:

$('#dg').datagrid({
    columns:[[
        {field:'userId',title:'User', width:80,
            formatter: function(value,row,index){
                if (row.user){
                    return row.user.name;
                } else {
                    return value;
                }
            }
        }
    ]]
});

styler:

$('#dg').datagrid({
    columns:[[
        {field:'listprice',title:'List Price', width:80, align:'right',
            styler: function(value,row,index){
                if (value < 20){
                    return 'background-color:#ffee00;color:red;';
                }
            }
        }
    ]]
});

sorter:

$('#dg').datagrid({
    remoteSort: false,
    columns: [[
        {field:'date',title:'Date',width:80,sortable:true,align:'center',
            sorter:function(a,b){
                a = a.split('/');
                b = b.split('/');
                if (a[2] == b[2]){
                    if (a[0] == b[0]){
                        return (a[1]>b[1]?1:-1);
                    } else {
                        return (a[0]>b[0]?1:-1);
                    }
                } else {
                    return (a[2]>b[2]?1:-1);
                }
            }
        }
    ]]
});

Editor（编辑器）

使用$.fn.datagrid.defaults.editors重写默认值对象。

每一个编辑器都有下面的动作：

代码示例：

resize:

$.extend($.fn.datagrid.defaults.editors, {
    text: {
        init: function(container, options){
            var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container);
            return input;
        },
        getValue: function(target){
            return $(target).val();
        },
        setValue: function(target, value){
            $(target).val(value);
        },
        resize: function(target, width){
            var input = $(target);
            if ($.boxModel == true){
                input.width(width - (input.outerWidth() - input.width()));
            } else {
                input.width(width);
            }
        }
    }
});

DataGrid View

使用$.fn.datagrid.defaults.view重写默认值对象。

该视图是一个对象，将告诉DataGrid如何渲染行。该对象必须定义下列函数：

事件

事件继承自panel(面板)，以下是DataGrid新增的事件。

代码示例：

onDblClickCell:

// 在双击一个单元格的时候开始编辑并生成编辑器，然后定位到编辑器的输入框上
$('#dg').datagrid({
    onDblClickCell: function(index,field,value){
        $(this).datagrid('beginEdit', index);
        var ed = $(this).datagrid('getEditor', {index:index,field:field});
        $(ed.target).focus();
    }
});

方法

代码示例：

getColumnFields:

var opts = $('#dg').datagrid('getColumnFields');               // 获取解冻列
var opts = $('#dg').datagrid('getColumnFields', true);       // 获取冻结列

load:

通常可以通过传递一些参数执行一次查询，通过调用这个方法从服务器加载新数据。

$('#dg').datagrid('load',{
    code: '01',
    name: 'name01'
});

getFooterRows:

// 更新页脚行的值并刷新
var rows = $('#dg').datagrid('getFooterRows');
rows[0]['name'] = 'new name';
rows[0]['salary'] = 60000;
$('#dg').datagrid('reloadFooter');
 
// 更新页脚行并载入新数据
$('#dg').datagrid('reloadFooter',[
    {name: 'name1', salary: 60000},
    {name: 'name2', salary: 65000}
]);

fixColumnSize:

$('#dg').datagrid('fixColumnSize', 'name');        // 固定'name'列大小
$('#dg').datagrid('fixColumnSize');                    // 固定所有列大小

gotoPage:

// 跳转到第3页
$('#dg').datagrid('gotoPage', 3);
 
// 跳转到第3页并执行回调函数
$('#dg').datagrid('gotoPage', {
    page: 3,
    callback: function(page){
        console.log(page)
    }
})

getEditor:

// 获取日期输入框编辑器并更改它的值
var ed = $('#dg').datagrid('getEditor', {index:1,field:'birthday'});
$(ed.target).datebox('setValue', '5/4/2012');

updateRow:

$('#dg').datagrid('updateRow',{
    index: 2,
    row: {
        name: '新名称',
        note: '新消息'
    }
});

appendRow:

$('#dg').datagrid('appendRow',{
    name: '新名称',
    age: 30,
    note: '新消息'
});

insertRow:

// 在第二行的位置插入一个新行
$('#dg').datagrid('insertRow',{
    index: 1,   // 索引从0开始
    row: {
        name: '新名称',
        age: 30,
        note: '新消息'
    }
});

sort:

$('#dg').datagrid('sort', 'itemid');    // 排序一个列
$('#dg').datagrid('sort', {         // 指定了排序顺序的列
    sortName: 'productid',
    sortOrder: 'desc'
});