场景

效果

EasyUI中Datagride数据网格的简单使用_字段

数据网格（DataGrid）属性

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

名称

类型

描述

默认值

columns

array

数据网格（datagrid）的列（column）的配置对象，更多细节请参见列（column）属性。

undefined

frozenColumns

array

和列（column）属性一样，但是这些列将被冻结在左边。

undefined

fitColumns

boolean

设置为 true，则会自动扩大或缩小列的尺寸以适应网格的宽度并且防止水平滚动。

false

resizeHandle

string

调整列的位置，可用的值有：'left'、'right'、'both'。当设置为 'right' 时，用户可通过拖拽列头部的右边缘来调整列。

该属性自版本 1.3.2 起可用。

right

autoRowHeight

boolean

定义是否设置基于该行内容的行高度。设置为 false，则可以提高加载性能。

true

toolbar

array,selector

数据网格（datagrid）面板的头部工具栏。可能的值：

1、数组，每个工具选项与链接按钮（linkbutton）一样。

2、选择器，只是工具栏。


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

 


  1. $('#dg').datagrid({
  2. toolbar: '#tb'
  3. });
  4. <div id="tb">
  5. <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"></a>
  6. <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"></a>
  7. </div>

通过数组定义工具栏：

 


  1. $('#dg').datagrid({
  2. toolbar: [{
  3. iconCls: 'icon-edit',
  4. handler: function(){alert('edit')}
  5. },'-',{
  6. iconCls: 'icon-help',
  7. handler: function(){alert('help')}
  8. }]
  9. });

null

striped

boolean

设置为 true，则把行条纹化。（即奇偶行使用不同背景色）

false

method

string

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

post

nowrap

boolean

设置为 true，则把数据显示在一行里。设置为 true 可提高加载性能。

true

idField

string

指示哪个字段是标识字段。

null

url

string

从远程站点请求数据的 URL。

null

data

array,object

要加载的数据。该属性自版本 1.3.2 起可用。

代码实例：

 


  1. $('#dg').datagrid({
  2. data: [
  3. {f1:'value11', f2:'value12'},
  4. {f1:'value21', f2:'value22'}
  5. ]
  6. });

null

loadMsg

string

当从远程站点加载数据时，显示的提示消息。

Processing, please wait …

pagination

boolean

设置为 true，则在数据网格（datagrid）底部显示分页工具栏。

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

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

1

pageSize

number

当设置了 pagination 属性时，初始化页面尺寸。

10

pageList

array

当设置了 pagination 属性时，初始化页面尺寸的选择列表。

[10,20,30,40,50]

queryParams

object

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

代码实例：

 


  1. $('#dg').datagrid({
  2. queryParams: {
  3. name: 'easyui',
  4. subject: 'datagrid'
  5. }
  6. });

{}

sortName

string

定义可以排序的列。

null

sortOrder

string

定义列的排序顺序，只能用 'asc' 或 'desc'。

asc

multiSort

boolean

定义是否启用多列排序。该属性自版本 1.3.4 起可用。

false

remoteSort

boolean

定义是否从服务器排序数据。

true

showHeader

boolean

定义是否显示行的头部。

true

showFooter

boolean

定义是否显示行的底部。

false

scrollbarSize

number

滚动条宽度（当滚动条是垂直的时候）或者滚动条的高度（当滚动条是水平的时候）。

18

rowStyler

function

返回例如 'background:red' 的样式。该函数需要两个参数：

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

rowData：该行相应的记录。


代码实例：

 


  1. $('#dg').datagrid({
  2. rowStyler: function(index,row){
  3. if (row.listprice>80){
  4. return 'background-color:#6293BB;color:#fff;'; // return inline style
  5. // the function can return predefined css class and inline style
  6. // return {class:'r1', style:{'color:#fff'}};
  7. }
  8. }
  9. });

 

loader

function

定义如何从远程服务器加载数据。返回 false 则取消该动作。该函数有下列参数：

param：要传递到远程服务器的参数对象。

success(data)：当检索数据成功时调用的回调函数。

error()：当检索数据失败时调用的回调函数。

json loader

loadFilter

function

返回要显示的过滤数据。该函数有一个参数 'data' ，表示原始数据。您可以把原始数据变成标准数据格式。该函数必须返回标准数据对象，含有 'total' 和 'rows' 属性。

代码实例：

 


  1. // removing 'd' object from asp.net web service json output
  2. $('#dg').datagrid({
  3. loadFilter: function(data){
  4. if (data.d){
  5. return data.d;
  6. } else {
  7. return data;
  8. }
  9. }
  10. });

 

editors

object

定义编辑行时的编辑器。

predefined editors

view

object

定义数据网格（datagrid）的视图。

default view

列（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}

]]

名称

类型

描述

默认值

title

string

列的标题文本。

undefined

field

string

列的字段名。

undefined

width

number

列的宽度。如果未定义，则宽度会自动扩展以适应它的内容。没有定义宽度将会降低性能。

undefined

rowspan

number

指示一个单元格占据多少行。

undefined

colspan

number

指示一个单元格占据多少列。

undefined

align

string

指示如何对齐该列的数据，可以用 'left'、'right'、'center'。

undefined

halign

string

指示如何对齐该列的头部，可能的值：'left'、'right'、'center'。如果没有分配值，则头部对齐方式将与通过 'align' 属性定义的数据对齐方式一致。该属性自版本 1.3.2 起可用。

undefined

sortable

boolean

设置为 true，则允许该列被排序。

undefined

order

string

默认的排序顺序，只能用 'asc' 或 'desc'。该属性自版本 1.3.2 起可用。

undefined

resizable

boolean

设置为 true，则允许该列可调整尺寸。

undefined

fixed

boolean

设置为 true，则当 'fitColumns' 设置为 true 时放置调整宽度。

undefined

hidden

boolean

设置为 true，则隐藏该列。

undefined

checkbox

boolean

设置为 true，则显示复选框。复选框有固定宽度。

undefined

formatter

function

单元格的格式化函数，需要三个参数：

value：字段的值。

rowData：行的记录数据。

rowIndex：行的索引。


代码实例：

 


  1. $('#dg').datagrid({
  2. columns:[[
  3. {field:'userId',title:'User', width:80,
  4. formatter: function(value,row,index){
  5. if (row.user){
  6. return row.user.name;
  7. } else {
  8. return value;
  9. }
  10. }
  11. }
  12. ]]
  13. });

undefined

styler

function

单元格的样式函数，返回样式字符串来自定义该单元格的样式，例如 'background:red' 。该函数需要三个参数：

value：字段的值。

rowData：行的记录数据。

rowIndex：行的索引。


代码实例：

 


  1. $('#dg').datagrid({
  2. columns:[[
  3. {field:'listprice',title:'List Price', width:80, align:'right',
  4. styler: function(value,row,index){
  5. if (value < 20){
  6. return 'background-color:#ffee00;color:red;';
  7. // the function can return predefined css class and inline style
  8. // return {class:'c1',style:'color:red'}
  9. }
  10. }
  11. }
  12. ]]
  13. });

undefined

sorter

function

用于本地排序的自定义字段的排序函数，需要两个参数：

a：第一个字段值。

b：第二个字段值。


代码实例：

 


  1. $('#dg').datagrid({
  2. remoteSort: false,
  3. columns: [[
  4. {field:'date',title:'Date',width:80,sortable:true,align:'center',
  5. sorter:function(a,b){
  6. a = a.split('/');
  7. b = b.split('/');
  8. if (a[2] == b[2]){
  9. if (a[0] == b[0]){
  10. return (a[1]>b[1]?1:-1);
  11. } else {
  12. return (a[0]>b[0]?1:-1);
  13. }
  14. } else {
  15. return (a[2]>b[2]?1:-1);
  16. }
  17. }
  18. }
  19. ]]
  20. });

undefined

editor

string,object

指示编辑类型。当是字符串（string）时则指编辑类型，当是对象（object）时则包含两个属性：

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

options：对象，编辑类型对应的编辑器选项。

undefined

编辑器（Editor）

通过 $.fn.datagrid.defaults.editors 重写默认的 defaults。

每个编辑器有下列行为：

名称

参数

描述

init

container, options

初始化编辑器并且返回目标对象。

destroy

target

如果必要就销毁编辑器。

getValue

target

从编辑器的文本获取值。

setValue

target , value

给编辑器设置值。

resize

target , width

如果必要就调整编辑器的尺寸。

例如，文本编辑器（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);

}

}

});

数据网格视图（DataGrid View）

通过 $.fn.datagrid.defaults.view 重写默认的 defaults。

视图（view）是一个对象，它告诉数据网格（datagrid）如何呈现行。该对象必须定义下列函数：

名称

参数

描述

render

target, container, frozen

当数据加载时调用。

target：DOM 对象，数据网格（datagrid）对象。

container：行的容器。

frozen：指示是否呈现冻结容器。

renderFooter

target, container, frozen

这是呈现行脚的选项函数。

renderRow

target, fields, frozen, rowIndex, rowData

这是将会被 render 函数调用的选项函数。

refreshRow

target, rowIndex

定义如何刷新指定的行。

onBeforeRender

target, rows

视图被呈现前触发。

onAfterRender

target

视图被呈现后触发。

事件

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

名称

参数

描述

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

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

代码实例：

 


  1. // when double click a cell, begin editing and make the editor get focus
  2. $('#dg').datagrid({
  3. onDblClickCell: function(index,field,value){
  4. $(this).datagrid('beginEdit', index);
  5. var ed = $(this).datagrid('getEditor', {index:index,field:field});
  6. $(ed.target).focus();
  7. }
  8. });

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

当数据网格（datagrid）的头部被右键单击时触发。

onRowContextMenu

e, rowIndex, rowData

当右键点击行时触发。

方法

名称

参数

描述

options

none

返回选项（options）对象。

getPager

none

返回分页（pager）对象。

getPanel

none

返回面板（panel）对象。

getColumnFields

frozen

返回列的字段，如果 frozen 设置为 true，则冻结列的字段被返回。

代码实例：

 


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

getColumnOption

field

返回指定列的选项。

resize

param

调整尺寸和布局。

load

param

加载并显示第一页的行，如果指定 'param' 参数，它将替换 queryParams 属性。通常情况下，通过传递一些从参数进行查询，该方法被调用来从服务器加载新数据。

 


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

reload

param

重新加载行，就像 load 方法一样，但是保持在当前页。

reloadFooter

footer

重新加载底部的行。代码实例：

 


  1. // update footer row values and then refresh
  2. var rows = $('#dg').datagrid('getFooterRows');
  3. rows[0]['name'] = 'new name';
  4. rows[0]['salary'] = 60000;
  5. $('#dg').datagrid('reloadFooter');
  6.  
  7. // update footer rows with new data
  8. $('#dg').datagrid('reloadFooter',[
  9. {name: 'name1', salary: 60000},
  10. {name: 'name2', salary: 65000}
  11. ]);

loading

none

显示正在加载状态。

loaded

none

隐藏正在加载状态。

fitColumns

none

使列自动展开/折叠以适应数据网格（datagrid）的宽度。

fixColumnSize

field

固定列的尺寸。如果 'field' 参数未设置，所有的列的尺寸将是固定的。

代码实例：

 


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

fixRowHeight

index

固定指定行的高度。如果 'index' 参数未设置，所有的行的高度将是固定的。

freezeRow

index

冻结指定的行，以便数据网格（datagrid）向下滚动时这些冻结行总是被显示在顶部。该方法自版本 1.3.2 起可用。

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

清除所有的选择。

clearChecked

none

清除所有勾选的行。该方法自版本 1.3.2 起可用。

scrollTo

index

滚动到指定行。该方法自版本 1.3.3 起可用。

highlightRow

index

高亮显示一行。该方法自版本 1.3.3 起可用。

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：编辑器的类型，比如：'text'、'combobox'、'datebox'，等等。

getEditor

options

获取指定的编辑器， options 参数包含两个属性：

index：行的索引。

field：字段名。


代码实例：

 


  1. // get the datebox editor and change its value
  2. var ed = $('#dg').datagrid('getEditor', {index:1,field:'birthday'});
  3. $(ed.target).datebox('setValue', '5/4/2012');

refreshRow

index

刷新一行。

validateRow

index

验证指定的行，有效时返回 true。

updateRow

param

更新指定的行， param 参数包括下列属性：

index：要更新的行的索引。

row：新的行数据。


代码实例：

 


  1. $('#dg').datagrid('updateRow',{
  2. index: 2,
  3. row: {
  4. name: 'new name',
  5. note: 'new note message'
  6. }
  7. });

appendRow

row

追加一个新行。新的行将被添加在最后的位置：

 


  1. $('#dg').datagrid('appendRow',{
  2. name: 'new name',
  3. age: 30,
  4. note: 'some messages'
  5. });

insertRow

param

插入一个新行， param 参数包括下列属性：

index：插入进去的行的索引，如果没有定义，就追加该新行。

row：行的数据。


代码实例：

 


  1. // insert a new row at second row position
  2. $('#dg').datagrid('insertRow',{
  3. index: 1, // index start with 0
  4. row: {
  5. name: 'new name',
  6. age: 30,
  7. note: 'some messages'
  8. }
  9. });

deleteRow

index

删除一行。

getChanges

type

获取最后一次提交以来更改的行，type 参数表示更改的行的类型，可能的值是：inserted、deleted、updated，等等。当 type 参数没有分配时，返回所有改变的行。

acceptChanges

none

提交自从被加载以来或最后一次调用 acceptChanges 以来所有更改的数据。

rejectChanges

none

回滚自从创建以来或最后一次调用 acceptChanges 以来所有更改的数据。

mergeCells

options

把一些单元格合并为一个单元格，options 参数包括下列特性：

index：列的索引。

field：字段名。

rowspan：合并跨越的行数。

colspan：合并跨越的列数。

showColumn

field

显示指定的列。

hideColumn

field

隐藏指定的列。

实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
    <script type="text/javascript" src="/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<table class="easyui-datagrid">
    <thead>
    <tr>
        <th data-options="field:'code'">Code</th>
        <th data-options="field:'name'">Name</th>
        <th data-options="field:'price'">Price</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>001</td><td>name1</td><td>2323</td>
    </tr>
    <tr>
        <td>002</td><td>name2</td><td>4612</td>
    </tr>
    </tbody>
</table>
</body>
</html>