扩展自 $.fn.panel.defaults。通过 $.fn.datagrid.defaults 重写默认的 defaults。
数据网格（datagrid）以表格格式显示数据，并为选择、排序、分组和编辑数据提供了丰富的支持。数据网格（datagrid）的设计目的是为了减少开发时间，且不要求开发人员具备指定的知识。它是轻量级的，但是功能丰富。它的特性包括单元格合并，多列页眉，冻结列和页脚，等等。
panel
resizable
linkbutton
pagination
从已有的表格元素创建数据网格（datagrid），在 html 中定义列、行及数据。
<table class="easyui-datagrid">
<thead>
<th data-options="field:'code'">Code</th>
<th data-options="field:'name'">Name</th>
<th data-options="field:'price'">Price</th>
</thead>
<tbody>
<td>001</td><td>name1</td><td>2323</td>
<td>002</td><td>name2</td><td>4612</td>
</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>
<th data-options="field:'code',width:100">Code</th>
<th data-options="field:'name',width:100">Name</th>
<th data-options="field:'price',width:100,align:'right'">Price</th>
</thead>
</table>
也可以使用 javascript 创建数据网格（datagrid）。
<table id="dg"></table>
$('#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'}
通过一些参数查询数据。
$('#dg').datagrid('load', {
name: 'easyui',
address: 'ho'
在向服务器改变数据之后，更新前台数据。
$('#dg').datagrid('reload'); // reload the current page data
数据网格（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，则可以提高加载性能。
toolbar
array,selector
数据网格（datagrid）面板的头部工具栏。可能的值：
1、数组，每个工具选项与链接按钮（linkbutton）一样。
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>
通过数组定义工具栏：
$('#dg').datagrid({
toolbar: [{
iconCls: 'icon-edit',
handler: function(){alert('edit')}
},'-',{
iconCls: 'icon-help',
handler: function(){alert('help')}
striped
boolean
设置为 true，则把行条纹化。（即奇偶行使用不同背景色）
false
method
string
请求远程数据的方法（method）类型。
nowrap
boolean
设置为 true，则把数据显示在一行里。设置为 true 可提高加载性能。
idField
string
指示哪个字段是标识字段。
string
从远程站点请求数据的 URL。
array,object
要加载的数据。该属性自版本 1.3.2 起可用。
代码实例：
$('#dg').datagrid({
data: [
{f1:'value11', f2:'value12'},
{f1:'value21', f2:'value22'}
loadMsg
string
当从远程站点加载数据时，显示的提示消息。
Processing, please wait …
pagination
boolean
设置为 true，则在数据网格（datagrid）底部显示分页工具栏。
false
rownumbers
boolean
设置为 true，则显示带有行号的列。
false
singleSelect
boolean
设置为 true，则只允许选中一行。
false
checkOnSelect
boolean
如果设置为 true，当用户点击某一行时，则会选中/取消选中复选框。如果设置为 false 时，只有当用户点击了复选框时，才会选中/取消选中复选框。
该属性自版本 1.3 起可用。
selectOnCheck
boolean
如果设置为 true，点击复选框将会选中该行。如果设置为 false，选中该行将不会选中复选框。
该属性自版本 1.3 起可用。
pagePosition
string
定义分页栏的位置。可用的值有：'top'、'bottom'、'both'。
该属性自版本 1.3 起可用。
bottom
pageNumber
number
当设置了 pagination 属性时，初始化页码。
pageSize
number
当设置了 pagination 属性时，初始化页面尺寸。
pageList
array
当设置了 pagination 属性时，初始化页面尺寸的选择列表。
[10,20,30,40,50]
queryParams
object
当请求远程数据时，发送的额外参数。
代码实例：
$('#dg').datagrid({
queryParams: {
name: 'easyui',
subject: 'datagrid'
sortName
string
定义可以排序的列。
sortOrder
string
定义列的排序顺序，只能用 'asc' 或 'desc'。
multiSort
boolean
定义是否启用多列排序。该属性自版本 1.3.4 起可用。
false
remoteSort
boolean
定义是否从服务器排序数据。
showHeader
boolean
定义是否显示行的头部。
showFooter
boolean
定义是否显示行的底部。
false
scrollbarSize
number
滚动条宽度（当滚动条是垂直的时候）或者滚动条的高度（当滚动条是水平的时候）。
rowStyler
function
返回例如 'background:red' 的样式。该函数需要两个参数：
rowIndex：行的索引，从 0 开始。
rowData：该行相应的记录。
代码实例：
$('#dg').datagrid({
rowStyler: function(index,row){
if (row.listprice>80){
return 'background-color:#6293BB;color:#fff;'; // return inline style
// the function can return predefined css class and inline style
// return {class:'r1', style:{'color:#fff'}};
定义如何从远程服务器加载数据。返回 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;
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：行的索引。
代码实例：
$('#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' 。该函数需要三个参数：
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;';
// the function can return predefined css class and inline style
// return {class:'c1',style:'color:red'}
undefined
sorter
function
用于本地排序的自定义字段的排序函数，需要两个参数：
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
指示编辑类型。当是字符串（string）时则指编辑类型，当是对象（object）时则包含两个属性：
type：字符串，编辑类型，可能的类型：text、textarea、checkbox、numberbox、validatebox、datebox、combobox、combotree。
options：对象，编辑类型对应的编辑器选项。
undefined
编辑器（Editor）
通过 $.fn.datagrid.defaults.editors 重写默认的 defaults。
每个编辑器有下列行为：
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
当数据加载成功时触发。
onLoadError
加载远程数据发生某些错误时触发。
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();
param
加载并显示第一页的行，如果指定 'param' 参数，它将替换 queryParams 属性。通常情况下，通过传递一些从参数进行查询，该方法被调用来从服务器加载新数据。
$('#dg').datagrid('load',{
code: '01',
name: 'name01'
// 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}
// get the datebox editor and change its value
var ed = $('#dg').datagrid('getEditor', {index:1,field:'birthday'});
$(ed.target).datebox('setValue', '5/4/2012');
// 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'
getChanges
获取最后一次提交以来更改的行，type 参数表示更改的行的类型，可能的值是：inserted、deleted、updated，等等。当 type 参数没有分配时，返回所有改变的行。
acceptChanges
提交自从被加载以来或最后一次调用 acceptChanges 以来所有更改的数据。
rejectChanges
回滚自从创建以来或最后一次调用 acceptChanges 以来所有更改的数据。
mergeCells
options
把一些单元格合并为一个单元格，options 参数包括下列特性：
index：列的索引。
field：字段名。
rowspan：合并跨越的行数。
colspan：合并跨越的列数。
showColumn
field
显示指定的列。
hideColumn
field
隐藏指定的列。
jQuery EasyUI 插件
