easyui datagrid 部分参数
数据表格属性（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 '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:[[
- {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
|
|
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 '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，所有的变化数据。
|
转载：https://www.cnblogs.com/wangyt223/p/4181071.html
