jQueryEasyUIDataGridAPI中⽂⽂档
(学习留存，如有侵权，请告知，⽴刻删除！)
扩展⾃$.fn.panel.defaults，⽤ $.fn.datagrid.defaults重写了 defaults 。
依赖
panel
resizable
linkbutton
pagination
⽤法
1.  <table id="tt"></table>
1.  $('#tt').datagrid({
2.      url:'datagrid_data.json',
3.      columns:[[
4.          {field:'code',title:'Code',width:100},
5.          {field:'name',title:'Name',width:100},
6.          {field:'price',title:'Price',width:100,align:'right'}
7.      ]]
8.  });
数据表格（DataGrid）的特性
其特性扩展⾃panel，下列是为 datagrid增加的特性。
名称类型说明默认值
columns array datagrid 的column的配置对象，更多详细请参见 column 的特性。null frozenColumns array和列的特性⼀样，但是这些列将被冻结在左边。null
fitColumns boolean True 就会⾃动扩⼤或缩⼩列的尺⼨以适应表格的宽度并且防⽌⽔平滚动。false
striped boolean True 就把⾏条纹化。（即奇偶⾏使⽤不同背景⾊）false
method string请求远程数据的 method 类型。post
nowrap boolean True 就会把数据显⽰在⼀⾏⾥。true
idField string标识字段。null
url string从远程站点请求数据的 URL。null
loadMsg string当从远程站点加载数据时，显⽰的提⽰信息。Processing, please
wait …
pagination boolean True 就会在 datagrid 的底部显⽰分页栏。false
rownumbers boolean True 就会显⽰⾏号的列。false
rownumbers boolean True 就会显⽰⾏号的列。false
singleSelect boolean True 就会只允许选中⼀⾏。false pageNumber number当设置了pagination特性时，初始化页码。1
pageSize number当设置了pagination特性时，初始化页码尺⼨。10
pageList array当设置了pagination特性时，初始化页⾯尺⼨的选择列表。[10,20,30,40,50] queryParams object当请求远程数据时，发送的额外参数。{}
sortName string定义可以排序的列。null
sortOrder string定义列的排序顺序，只能⽤'asc' 或 'desc'。asc
remoteSort boolean定义是否从服务器给数据排序。true
showFooter boolean定义是否显⽰⼀⾏页脚。false
rowStyler function 返回例如 'background:red'的样式，该函数需要两个参数：
rowIndex：⾏的索引，从 0 开始。
rowData：此⾏相应的记录。
span>
loadFilter function 返回过滤的数据去显⽰。这个函数需要⼀个参数'data'，表⽰原始数据。你可以把原始数据变成标准数据格式，此函数必须返回标准数据对象，含有'total' 和 'rows'特性。
editors object定义编辑⾏时的editor 。预定义的 editor
view object定义datagrid的 view 。默认的 view
jquery官方文档下载列（Column）的特性
DataGrid 的Column是⼀个数组对象，它的每个元素也是⼀个数组。数组元素的元素是⼀个配置对象，它定义了每个列的字段。
代码⽰例：
1.  columns:[[
2.      {field:'itemid',title:'Item ID',rowspan:2,width:80,sortable:true},
3.      {field:'productid',title:'Product ID',rowspan:2,width:80,sortable:true},
4.      {title:'Item Details',colspan:4}
5.  ],[
6.      {field:'listprice',title:'List Price',width:80,align:'right',sortable:true},
7.      {field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},
8.      {field:'attr1',title:'Attribute',width:100},
9.      {field:'status',title:'Status',width:60}
10.]]
名称类型说明默认值
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 b
oolean True 就允许此列被调整尺⼨。undefined hidden boolean True 就隐藏此列。undefined checkbox boolean True 就显⽰ checkbox。undefined
formatter function 单元格的格式化函数，需要三个参数：
value：字段的值。
rowData：⾏的记录数据。
rowIndex：⾏的索引。
undefined
styler function 单元格的样式函数，返回样式字符串来⾃定义此单元格的样式，例如'background:red'。此函
数需要三个参数：
value：字段的值。
rowData：⾏的记录数据。
rowIndex：⾏的索引。
undefined
sorter function ⾃定义字段的排序函数，需要两个参数：
a：第⼀个字段值。
b：第⼆个字段值。
undefined
editor string,object 指编辑类型。当是 string 时指编辑类型，当 object 时包含两个特性：
type：string，编辑类型，可能的类型是：
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）像下⾯这样定义：
1.  $.extend($.fn.datagrid.defaults.editors, {
2.      text: {
3.          init: function(container, options){
4.  var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container);
5.  return input;
6.          },
7.          getValue: function(target){
8.  return $(target).val();
9.          },
10.        setValue: function(target, value){
11.            $(target).val(value);
12.        },
13.        resize: function(target, width){
14.var input = $(target);
15.if ($.boxModel == true){
16.                input.width(width - (input.outerWidth() - input.width()));
17.            } else {
18.                input.width(width);
19.            }
20.        }
21.    }
22.});
数据表格视图（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当⽤户双击⼀个单元格时触发。
onSortColumn sort, order 当⽤户对⼀列进⾏排序时触发，参数包括： sort：排序的列的字段名
order：排序的列的顺序
onResizeColumn field, width当⽤户调整列的尺⼨时触发。
onSelect rowIndex, rowData 当⽤户选中⼀⾏时触发，参数包括： rowIndex：选中⾏的索引，从 0 开始rowData：选中⾏对应的记录
onUnselect rowIndex, rowData 当⽤户取消选择⼀⾏时触发，参数包括： rowIndex：取消选中⾏的索引，从 0 开始rowData：取消选中⾏对应的记录
onSelectAll rows当⽤户选中全部⾏时触发。onUnselectAll rows当⽤户取消选中全部⾏时触发。
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当右键点击⾏时触发。
⽅法
名称参数说明

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。