数据表格属性（DataGrid Properties）

属性继承控制面板，以下是数据表格独有的属性。

名称

类型

描述

默认值

columns

array

数据表格列配置对象，查看列属性以获取更多细节。

undefined

frozenColumns

array

跟列属性一样，但是这些列固定在左边，不会滚动。

undefined

fitColumns

boolean

设置为true将自动使列适应表格宽度以防止出现水平滚动。

false

autoRowHeight

boolean

定义设置行的高度，根据该行的内容。设置为false可以提高负载性能。

true

toolbar

array,selector

数据表格顶部面板的工具栏。可能的值：

1）数组，每个工具选项和链接按钮相同。

2）选择显示的工具栏。

在一个<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('edit')}

    },'-',{

        iconCls: 'icon-help',

        handler: function(){alert('help')}

    }]

});

null

striped

boolean

设置为true将交替显示行背景。

false

method

string

请求远程数据的方法类型。

post

nowrap

boolean

设置为true，当数据长度超出列宽时将会自动截取。

true

idField

string

表明该列是一个唯一列。

null

url

string

一个用以从远程站点请求数据的超链接地址。

null

loadMsg

string

当从远程站点载入数据时，显示的一条快捷信息。

Processing, please wait …

pagination

boolean

设置true将在数据表格底部显示分页工具栏。

false

rownumbers

boolean

设置为true将显示行数。

false

singleSelect

boolean

设置为true将只允许选择一行。

false

checkOnSelect

boolean

如果为true，该复选框被选中/取消选中，当用户点击某一行上。如果为false，该复选框仅检查/取消选中，当用户点击完全的复选框。

此属性是1.3版本。

true

selectOnCheck

boolean

如果设置为true，单击一个复选框，将始终选择行。如果为false，不会选择行选中该复选框。

此属性是1.3版本。

true

pagePosition

string

定义的分页栏的位置。可用的值有


'top','bottom','both'。

此属性是可自1.3版本。

bottom

pageNumber

number

当设置分页属性时，初始化分页码。

1

pageSize

number

当设置分页属性时，初始化每页记录数。

10

pageList

array

当设置分页属性时，初始化每页记录数列表。

[10,20,30,40,50]

queryParams

object

当请求远程数据时，发送的额外参数。

示例:


$('#dg').datagrid({

    queryParams: {

        name: 'easyui',

        subject: 'datagrid'

    }

});

{}

sortName

string

当数据表格初始化时以哪一列来排序。

null

sortOrder

string

定义排序顺序，可以是'asc'或者'desc'（正序或者倒序）。

asc

remoteSort

boolean

定义是否通过远程服务器对数据排序。

true

showFooter

boolean

定义是否显示行底（如果是做统计表格，这里可以显示总计等）。

false

rowStyler

function

返回样式，如：'background:red'，function有2个参数：

index：行索引，从0开始.

row：对应于该行记录的对象。

示例:


$('#dg').datagrid({

    rowStyler: function(index,row){

        if (row.listprice>80){

            return 'background-color:#6293BB;color:#fff;';

        }

    }

});

 

loader

function

定义如何从远程服务器加载数据。返回false可以取消该操作。这个函数接受以下参数：

param:

参数对象传递到远程服务器。

success(data):

回调函数将被调用成功检索的数据。

error():回调函数将被调用失败时检索数据。

json loader

loadFilter

function

返回过滤的数据显示。该函数需要一个参数'data'，表示原始数据。您可以更改源数据的标准数据格式。此函数必须返回标准数据对象中包含的“total”和“rows”的属性。

示例:


// removing 'd' object from asp.net web service json output

$('#dg').datagrid({

    loadFilter: function(data){

        if (data.d){

            return data.d;

        } else {

            return data;

        }

    }

});

 

editors

object

定义当编辑一行时的编辑模式。

predefined editors

view

object

定义数据表格的视图。

default view

列属性（Column Properties）


数据表格的列是一个对象数组，即这个对象中的元素也是一个数组（js中数组是对象）。 对象数组中的每一个元素都是可配置的对象，每个可配置对象定义一个列。

示例:

columns:[[   

1. 
2.     {field:'itemid',title:'Item ID',rowspan:2,width:80,sortable:true},
  
3. 
4.     {field:'productid',title:'Product ID',rowspan:2,width:80,sortable:true},
  
5. 
6.     {title:'Item Details',colspan:4}
  
7. 
8. ],[   
9. 
10.     {field:'listprice',title:'List Price',width:80,align:'right',sortable:true},
  
11. 
12.     {field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},
  
13. 
14.     {field:'attr1',title:'Attribute',width:100},
  
15. 
16.     {field:'status',title:'Status',width:60}
  
17. 
18. ]]

名称

类型

描述

默认值

title

string

列标题。

undefined

field

string

列字段。

undefined

width

number

列宽。

undefined

rowspan

number

表明一个单元格跨几行。

undefined

colspan

number

表明一个单元格跨几列。

undefined

align

string

表明如何对其列数据，可选值：'left'，'right'，'center'。

undefined

sortable

boolean

设置为true允许对该列排序。

undefined

resizable

boolean

设置为true允许该列被缩放。

undefined

hidden

boolean

设置为true将隐藏列。

undefined

checkbox

boolean

设置为true将显示复选框。

undefined

formatter

function

格式化单元格函数，有3个参数：

value：字段的值。

rowData：行数据。

rowIndex：行索引。

示例:


$('#dg').datagrid({

    columns:[[

        {field:'userId',title:'User', width:80,

            formatter: function(value,row,index){

                if (row.user){

                    return row.user.name;

                } else {

                    return value;

                }

            }

        }

    ]]

});

undefined

styler

function

单元格样式函数，返回样式字符串装饰表格如'background:red'，function有3个参数：

value：字段值。

rowData：行数据。

rowIndex：行索引。

示例:


$('#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;';

                }

            }

        }

    ]]

});

undefined

sorter

function

T自定义字段排序函数，有2个参数：

a：该列的第一个值。

b：该列的第二个值。

示例:


$('#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);  

                }  

            }  

        }

    ]]

});

undefined

editor

string,object

表明编辑类型。如果属性是字符串类型表示编辑类型，如果是对象则包含2个参数：

type：字符串，编辑类型，可选值：text，textarea，checkbox，numberbox，validatebox，datebox，combobox，combotree。

options：对象，对象于编辑类型的编辑器属性。

undefined


事件（Events）

事件继承控制面板，以下是数据表格独有的属性。


名称

属性

描述

onLoadSuccess

data

当数据载入成功时触发。

onLoadError

none

当载入远程数据发生错误时触发。

onBeforeLoad

param

在请求载入数据之前触发，如果返回false将取消载入。

onClickRow

rowIndex, rowData

当用户点击行时触发，参数如下：

rowIndex：被点击的行索引，从0开始。

rowData：对应于被点击的行的记录。

onDblClickRow

rowIndex, rowData

当用户双击一行时触发，参数如下：

rowIndex：被点击的行索引，从0开始。

rowData：对应于被点击的行的记录。

onClickCell

rowIndex, field, value

当用户点击单元格时触发。

onDblClickCell

rowIndex, field, value

当用户双击单元格时触发。

示例:

// when double click a cell, begin editing and make the editor get focus

$('#dg').datagrid({

    onDblClickCell: function(index,field,value){

        $(this).datagrid('beginEdit', index);

        var ed = $(this).datagrid('getEditor', {index:index,field:field});

        $(ed.target).focus();

    }

});

onSortColumn

sort, order

当用户对列排序时触发，参数如下：

sort：排序字段名称。

order：排序顺序。

onResizeColumn

field, width

当用户调整列宽时触发。

onSelect

rowIndex, rowData

当用户选择一行是触发，参数如下：

rowIndex：被选择的行索引，从0开始。

rowData：对应于被选择行的记录。

onUnselect

rowIndex, rowData

当用户取消选择一行时触发，参数如下：

rowIndex：被取消选择的行索引，从0开始。

rowData：对应于被取消选择行的记录。

onSelectAll

rows

当用户选择所有行时触发。

onUnselectAll

rows

当用户取消选择所有行时触发。

onCheck

rowIndex,rowData

当用户选中行时触发，参数包含：

rowIndex：选中行的索引，从0开始

rowData：选中的行对应的记录

此属性是1.3版本。

onUncheck

rowIndex,rowData

当用户取消选中行时触发，参数包含：

rowIndex：取消选中行的索引，从0开始

rowData：未经检查的行对应的记录

此属性是1.3版本。

onCheckAll

rows

当用户检查所有行时触发。此属性是1.3版本。

onUncheckAll

rows

用户取消所有行时触发。此属性是1.3版本。

onBeforeEdit

rowIndex, rowData

当用户开始编辑一行时触发，参数如下：

rowIndex：正在编辑的行索引，从0开始。

rowData：对应于正在编辑的行的记录。

onAfterEdit

rowIndex, rowData, changes

当用户编辑完成时触发，参数如下：

rowIndex：正在编辑的行索引，从0开始。

rowData：对应于正在编辑的行的记录。

changes：被改变的字段内容，对应方式为字段：值。

onCancelEdit

rowIndex, rowData

当用户取消编辑行时触发，参数如下：

rowIndex：正在编辑的行索引，从0开始。

rowData：对应于正在编辑的行的记录。

onHeaderContextMenu

e, field

当数据表格的列标题被鼠标右键单击时触发。

onRowContextMenu

e, rowIndex, rowData

当一行被鼠标右键单击时触发。



方法（Methods）

名称

属性

描述

options

none

返回属性对象。

getPager

none

返回页面对象。

getPanel

none

返回控制面板对象。

getColumnFields

frozen

返回列字段，如果设置了frozen属性为true，将返回固定列的字段名。

示例:


var opts = $('#dg').datagrid('getColumnFields');    // get unfrozen columns

var opts = $('#dg').datagrid('getColumnFields', true); // get frozen columns

getColumnOption

field

返回特定的列属性。

resize

param

缩放和布局。

load

param

载入并显示第一页的记录，如果传递了'param'参数，它将会覆盖查询参数属性的值。通过传递一些参数，通常做一个查询，这个方法可以被称为从服务器加载新数据。

$('#dg').datagrid('load',{

    code: '01',

    name: 'name01'

});

reload

param

重载记录，跟'load'方法一样但是重载的是当前页的记录而非第一页。

reloadFooter

footer

重载行底记录。 示例:

// update footer row values and then refresh

var rows = $('#dg').datagrid('getFooterRows');

rows[0]['name'] = 'new name';

rows[0]['salary'] = 60000;

$('#dg').datagrid('reloadFooter');


// update footer rows with new data

$('#dg').datagrid('reloadFooter',[

    {name: 'name1', salary: 60000},

    {name: 'name2', salary: 65000}

]);

loading

none

显示载入状态。

loaded

none

隐藏载入状态。

fitColumns

none

让列宽自动适应数据表格的宽度。

fixColumnSize

field

固定列尺寸。如果“field' 参数未指定，将所有列的大小固定。

示例:


$('#dg').datagrid('fixColumnSize', 'name');  // fix the 'name' column size

$('#dg').datagrid('fixColumnSize');  // fix all columns size

fixRowHeight

index

固定特定列的高度。如果“index' 参数未指定，将所有列的高度固定。

autoSizeColumn

field

自动调整列宽，以适应内容。此方法是1.3版本特有的。

loadData

data

载入本地数据，旧记录将被移除。

getData

none

返回已载入数据。

getRows

none

返回当前页的记录。

getFooterRows

none

返回行底记录。

getRowIndex

row

返回指定行的索引，row参数可以是行记录或者是一个id字段的值。

getChecked

none

返回所有行的复选框已被选中。此方法是1.3版本特有的。

getSelected

none

返回第一个被选择的行记录或null。

getSelections

none

返回所有被选择的行，当没有记录被选择时，将返回一个空数组。

clearSelections

none

取消所有的已选择项。

selectAll

none

选择所有页面的行。

unselectAll

none

取消选择所有页面的行。

selectRow

index

选择一行，行索引从0开始。

selectRecord

idValue

通过传递id参数来选择一行。

unselectRow

index

取消选择一行。

checkAll

none

检查所有页面的行。此方法是1.3版本特有的。

uncheckAll

none

取消检查所有当前页面的行。此方法是1.3版本特有的。

checkRow

index

检查行，行索引从0开始。此方法是1.3版本特有的。

uncheckRow

index

取消检查行，行索引从0开始。此方法是1.3版本特有的。

beginEdit

index

开始编辑一行。

endEdit

index

结束编辑。

cancelEdit

index

取消编辑。

getEditors

index

获取指定行的编辑器，每个编辑器有如下属性：

actions：编辑器可以做的行为。

target：目标编辑器jQuery对象。

field：字段名。

type：编辑器类型。

getEditor

options

获取特定的编辑器，options参数有2个属性：

index：行索引。

field:字段名。

示例:


// get the datebox editor and change its value

var ed = $('#dg').datagrid('getEditor', {index:1,field:'birthday'});

$(ed.target).datebox('setValue', '5/4/2012');

refreshRow

index

刷新一行。

validateRow

index

校验指定的行，如果有效返回true。

updateRow

param

更新指定的行，param参数包含如下属性：

index：要更新的行索引。

row：新的行数据。

示例:


$('#dg').datagrid('updateRow',{

    index: 2,

    row: {

        name: 'new name',

        note: 'new note message'

    }

});

appendRow

row

添加一行。 新的行会被添加到最后一个位置:

$('#dg').datagrid('appendRow',{

    name: 'new name',

    age: 30,

    note: 'some messages'

});

insertRow

param


插入一个新行，param参数包含如下属性：
index：要插入的行索引，如果没有定义则在最后面添加一个新行。
row：行数据。


示例:


// insert a new row at second row position

$('#dg').datagrid('insertRow',{

    index: 1,    // index start with 0

    row: {

        name: 'new name',

        age: 30,

        note: 'some messages'

    }

});

deleteRow

index

删除一行。

getChanges

type

获取从最后一次提交开始的被修改的所有行，type参数表明修改的类型，可选值：inserted，deleted，updated等 。当没有传递type参数时，返回所有被修改的行。

acceptChanges

none

提交所有修改的数据，提交后的数据将不能再修改或者回滚。

rejectChanges

none

回滚自创建以来或自上次调用AcceptChanges，所有的变化数据。

mergeCells

options

合并单元格，options参数包含如下属性：

index：行索引。

field：字段名。

rowspan：整合单元格要跨的行数。

colspan：整合单元格要跨的列数。

showColumn

field

显示特定的列。

hideColumn

field

隐藏特定的列。