@author YHC
从$.fn.panel.defaults继承,覆盖默认值 $.fn.datagrid.defaults.
datagrid 以列表形式显示数据,和提供丰富的功能支持,选择, 排序, 分组显示 和编辑数据,datagrid 的设计是为了减少开发时间,和开发者不需要对其特定的了解,它是一个拥有丰富功能的轻量级,表格合并,和多表头,列冻结,页脚,仅仅只是它的一部分功能.
相关依赖
- panel
- resizable
- linkbutton
- pagination
使用示例
从一个已存在的table元素创建 datagrid ,定义列,行还有数据在html中.
<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>
创建
datagrid 通过<table>标记,和内嵌的<th>标记定义行在table中.
<table class="easyui-datagrid" style="width:400px;height:250px"
data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">
<thead>
<tr>
<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>
</tr>
</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'); // 重新加载当前页数据
DataGrid 属性
属性从 pane继承.以下是datagrid新增的属性.
Name | Type | Description | Default |
---|---|---|---|
columns | array | datagrid 行配置对象, 请见column属性得到更多的信息. | undefined |
frozenColumns | array | 和columns属性相同,但是这个columns将冻结在左边. | undefined |
fitColumns | boolean | true将自动扩展/收缩columns大小适应grid的宽度,防止水平滚动. | false |
autoRowHeight | boolean | 定义是否基于某行的内容设置行的高度.设置为false改善加载数据的性能.因为这个操作是在数据加载之后完成的.添加了true会增加加载的时间. | true |
toolbar | array,selector | datagrid 顶部的工具栏. 可用值: 1) 一个数组,工具的options(配置项)和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> </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改善加载性能. | true |
idField | string | 指明那一个字段是标识列. | null |
url | string | 一个从远程服务器请求数据的站点URL. | null |
loadMsg | string | 当从远程服务器加载数据的时候,显示的提示消息. | Processing, please wait … |
pagination | boolean | true显示一个分页工具栏在datagrid 下面. | false |
rownumbers | boolean | true显示一个行号列. | false |
singleSelect | boolean | true允许只能选择一行. | false |
checkOnSelect | boolean | 如果设置为 true,当用户点击一行的时候 checkbox checked(选择)/unchecked(取消选择). 如果为false,当用户点击刚好在checkbox的时候, checkbox checked(选择)/unchecked(取消选择). 注意:这个属性从1.3版本开始可用. | true |
selectOnCheck | boolean | 如果设置为true,点击checkbox将永远选择这行.如果设置为false, 选择一个行将不会选择checkbox. 注意:这个属性从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 | 当请求远程服务器数据时候, 并且发送的额外的参数. 示例代码: $('#dg').datagrid({ queryParams: { name: 'easyui', subject: 'datagrid' } }); | {} |
sortName | string | 定义那个列可以排序. | null |
sortOrder | string | 定义列排序方式, 仅仅只能是 'asc' or 'desc'. | asc |
remoteSort | boolean | 定义是否远程排序. | true |
showHeader | boolean | 定义是否显示行标题 . | true |
showFooter | boolean | 定义是否显示行页脚. | false |
scrollbarSize | number | 定义滚动条宽度 (当滚动条是垂直的时候) 或者高度(当滚动条是水平的时候). | 18 |
rowStyler | function | 返回样式 例如 'background:red'. 这个函数提供连个参数: rowIndex: 行的下标, 起始值 0 rowData: 这个记录代表这一行 示例代码: $('#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 | 顶datagrid的view. | default view |
Column属性
DataGrid 列是一个数组对象,其中元素也是一个数组对象. 数组元素中的元素是一个配置对象,定义每一列的字段.
示例代码:
- 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}
- ]]
Name | Type | Description | Default |
---|---|---|---|
title | string | 列标题文本. | undefined |
field | string | 列字段名称. | undefined |
width | number | 列宽度,如果未定义,宽度自动扩展适应其内容. | undefined |
rowspan | number | 指定一个cell应该占据多少行. | undefined |
colspan | number | 指定一个cell应该占据多少列. | undefined |
align | string | 指定如何对齐列数据 . 'left','right','center' 可以使用. | undefined |
sortable | boolean | true允许列可以排序. | undefined |
resizable | boolean | true允许列可改变大小. | undefined |
hidden | boolean | true将隐藏该列. | undefined |
checkbox | boolean | true将显示一个checkbox. checkbox列有固定的宽度. | 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'.这个函数提供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 | 自定义字段排序函数,使用在本地排序,提供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: string类型,编辑类型,可用类型有: text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree. options: object类型,代表编辑类型的编辑选项(options). | undefined |
Editor
覆盖默认值 $.fn.datagrid.defaults.editors.
每一个编辑器都有以下动作:
Name | Parameters | Description |
---|---|---|
init | container, options | 初始化编辑器 和返回目标对象. |
destroy | target | 销毁编辑器,如果有必要. |
getValue | target | 从编辑器得到值. |
setValue | target , value | 设置editor值. |
resize | target , width | 改变编辑器大小,如果有必要. |
例如,一个文本编辑器,定义如下:
- $.extend($.fn.datagrid.defaults.editors, {
- text: {
- init: function(container, options){
- var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container);
- return input;
- },
- getValue: function(target){
- return $(target).val();
- },
- setValue: function(target, value){
- $(target).val(value);
- },
- resize: function(target, width){
- var input = $(target);
- if ($.boxModel == true){
- input.width(width - (input.outerWidth() - input.width()));
- } else {
- input.width(width);
- }
- }
- }
- });
DataGrid View
覆盖默认值 $.fn.datagrid.defaults.view.
view是一个对象,他将告诉datagrid如何渲染行.对象必须定义下列函数:
Name | Parameters | Description |
---|---|---|
render | target, container, frozen | 当数据加载完毕后调用. target: DOM 对象, datagrid 对象. container: rows(行) 容器. frozen:指定是否渲染冻结容器. |
renderFooter | target, container, frozen | 这个选项函数渲染行页脚. |
renderRow | target, fields, frozen, rowIndex, rowData | 这个选项函数将通过render函数调用. |
refreshRow | target, rowIndex | 定义如何刷新特定的行. |
onBeforeRender | target, rows | 在view渲染之前触发. |
onAfterRender | target | 在view渲染之后触发. |
Events
事件从panel触发,以下是datagrid的新增事件.
Name | Parameters | Description |
---|---|---|
onLoadSuccess | data | 当数据加载成功触发. |
onLoadError | none | 当加载远程数据的时候有一些问题发生时触发. |
onBeforeLoad | param | 在一个请求加载数据之前触发. 如果返回fales将取消加载动作. |
onClickRow | rowIndex, rowData | 当用户点击一行的时候触发,参数包含: rowIndex: 点击行的下标,起始值 0 rowData: 这个记录代表点击行数据 |
onDblClickRow | rowIndex, rowData | 当用户双击的时候触发,参数包含: rowIndex: 点击行下标,起始值 0 rowData: 这个记录代表点击行数据. |
onClickCell | rowIndex, field, value | 当用户点击一个表格的时候触发. |
onDblClickCell | rowIndex, field, value | 当用户双击表格的时候触发.
示例代码:
// 当用户双击一个表格的时候,开始编辑使编辑器获得焦点 $('#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 | datagrid 的header上右键点击的时候触发 |
onRowContextMenu | e, rowIndex, rowData | 当在某行右键点击的时候触发. |
Methods
Name | Parameter | Description |
---|---|---|
options | none | 返回 options 对象. |
getPager | none | 返回 pager 对象. |
getPanel | none | 返回panel 对象. |
getColumnFields | frozen | 返回所有column字段. 如果forzen设置为true那么forzen(冻结列)列返回. 示例代码: var opts = $('#dg').datagrid('getColumnFields'); // 得到未冻结列 var opts = $('#dg').datagrid('getColumnFields', true); // 得到冻结列 |
getColumnOption | field | 返回特定的列选项. |
resize | param | 改变大小和布局. |
load | param | 加载数据和显示第一页的行数据.如果'param'是定义的,将替换queryParams属性. 通常在做查询的时候传入一些参数,这个方法可以调用从远程服务器加载新的数据. $('#dg').datagrid('load',{ code: '01', name: 'name01' }); |
reload | param | 重新加载行数据.和'load'一样,但是停留在当前页. |
reloadFooter | footer | 重新加载页脚行数据.示例代码: //更新页脚行值然后刷新 var rows = $('#dg').datagrid('getFooterRows'); rows[0]['name'] = 'new name'; rows[0]['salary'] = 60000; $('#dg').datagrid('reloadFooter'); // 更新页脚行数据为新数据 $('#dg').datagrid('reloadFooter',[ {name: 'name1', salary: 60000}, {name: 'name2', salary: 65000} ]); |
loading | none | 显示加载状态. |
loaded | none | 隐藏加载状态. |
fitColumns | none | 使行自动 扩展/折叠 适应datagrid的宽度. |
fixColumnSize | field | 固定列大小.如果'field'参数没有分配, 所有列大小将固定. 示例代码: $('#dg').datagrid('fixColumnSize', 'name'); // 固定 'name' 列大小 $('#dg').datagrid('fixColumnSize'); // 固定所有列大小 |
fixRowHeight | index | 固定特定行高度.如果'index'没有分配,所有行高度将固定. |
autoSizeColumn | field | 调整行的宽度适应内容.注意:这个方法从1.3版本开始可用. |
loadData | data | 加载本地数据,之前的原始行数据将被移除. |
getData | none | 返回加载数据. |
getRows | none | 返回当前页行数据. |
getFooterRows | none | 返回页脚行数据. |
getRowIndex | row | 返回特定的行下标,row参数可以是一个行记录或者是一个标识列的id值. |
getChecked | none | 返回checkbox被选中的所有行数据.注意:这个方法从1.3版本开始可用. |
getSelected | none | 返回第一个被选择的行数据记录或者null. |
getSelections | none | 返回所有选中行数据,当没有记录选择时候, 一个空数组将返回.此空(内容为空,也就是length为0)非彼null |
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: 编辑器类型, 例如 'text','combobox','datebox', 等等... |
getEditor | options | 得到一个特定的编辑器,options包含两个属性: index: 行下标. field: 字段名称. 示例代码: //得到datebox编辑器,改变其值 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: 插入位置的行下标, 如果未定义, 使用append一个新行. row: 行数据. 示例代码: // 插入一个新行到第二行位置 $('#dg').datagrid('insertRow',{ index: 1, // 下标从0开始 row: { name: 'new name', age: 30, note: 'some messages' } }); |
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 | 隐藏特定的列. |
如有错误信息,请指出,thanks!