JQuery Datagrid 数据网格_func jqgrid 网格

**

Datagrid 数据网格

原文链接

扩展自 $.fn.panel.defaults。通过 $.fn.datagrid.defaults 重写默认的 defaults。
数据网格（datagrid）以表格格式显示数据，并为选择、排序、分组和编辑数据提供了丰富的支持。数据网格（datagrid）的设计目的是为了减少开发时间，且不要求开发人员具备指定的知识。它是轻量级的，但是功能丰富。它的特性包括单元格合并，多列页眉，冻结列和页脚，等等。

依赖

• panel
• resizable
• linkbutton
• pagination

用法

从已有的表格元素创建数据网格（datagrid），在 html 中定义列、行及数据。

使用 javascript 创建数据网格（datagrid）。

<table id="dg"></table>
1

$('#dg').datagrid({
    url:'datagrid_data.json',
    columns:[[
        {field:'code',title:'Code',width:100},
        {field:'name',title:'Name',width:100},
        {field:'price',title:'Price',width:100,align:'right'}
    ]]
});
1
2
3
4
5
6
7
8

通过一些参数查询数据。

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

在向服务器改变数据之后，更新前台数据。

$('#dg').datagrid('reload');    // reload the current page data
1

数据网格（DataGrid）属性

该属性扩展自面板（panel），下面是为数据网格（datagrid）添加的属性。

列（Column）属性

数据网格（DataGrid） 的列（Column）是一个数组对象，它的每个元素也是一个数组。元素数组的元素是一个配置对象，它定义了每个列的字段。
代码实例：

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}
]]
1
2
3
4
5
6
7
8
9
10

编辑器（Editor）

通过 $.fn.datagrid.defaults.editors 重写默认的 defaults。
每个编辑器有下列行为：

例如，文本编辑器（text editor）定义如下：

$.extend($.fn.datagrid.defaults.editors, {
    text: {
        init: function(container, options){
            var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container);
            return input;
        },
        destroy: function(target){
            $(target).remove();
        },
        getValue: function(target){
            return $(target).val();
        },
        setValue: function(target, value){
            $(target).val(value);
        },
        resize: function(target, width){
            $(target)._outerWidth(width);
        }
    }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

数据网格视图（DataGrid View）

通过 $.fn.datagrid.defaults.view 重写默认的 defaults。
视图（view）是一个对象，它告诉数据网格（datagrid）如何呈现行。该对象必须定义下列函数：

事件

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

未完待续