EasyUI_Datagrid学习总结
2016年7月25日星期一
一、简介
Easyui中的datagrid从总的作用上讲，就是在列表上显示数据，类似于table，但是在table的基础上，此控件更加方便、快捷的实现想要的功能，且能在此控件属性中有分页等控件，也就更好的对数据进行处理等。
二．基本的属性介绍
1.Columns : 列的配置对象。
基本的用法是:
[[{field:'productid',title:’id’,100,align:'center',halign:'center',sortable:true}]]
上面的一行代码表示的是一列field表示这一列的数据显示的名称，也就是后台传回来数据的某一项属性：如id、name等等属性。title则表示这列的标题，相当于table中的<th>标签。在datagrid中列类似的属性有很多；下面说一些，我认为常用的属性:（更多的查看api）
title：（String）表示标题文本
field:（String）列字段名称
width：（number）宽度，不写将自动扩充以便适应内容
rowspan：（number）（合并行）。
colspan：（number）（合并列）。
align：(‘left’|’right’|’ center’)如何对其数据
halign: (‘left’|’right’|’ center’)如何对其标题（title）
sortable：（true|false）是否允许排序
order：(asc|desc)排序方式；如果写上了，传递参数的时候后自动传入到后台去。
checkbox：（true|false）true显示复选框。该复选框列固定宽度
editor：{'type':'numberbox','options':{precision:1}},对列中将要改变的数据做类型限制，共有
text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree。
后面的'options'做为相对应的类型属性。
formatter：function（value,row,index）{
//单元格formatter(格式化器)函数，带3个参数：
if (row.user){
return row.user.name;
} else {
return value;
}
}
以上是列的属性，还有相关的没有写完，可以查看api
2.toolbar: 顶部工具栏的DataGrid面板。
在<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('编辑按钮')}
},'-',{
iconCls: 'icon-help',
handler: function(){alert('帮助按钮')}
}]
});
3.striped:是否显示斑马线（true||false）
4.method：请求方式（String）
5. idField：指明那个字段是标识字段（主键）（String）
6. url：远程请求的地址
7. data：加载数据
8. loadMsg:加载数据显示的提示信息。（String）
9. pagination：是否需要分页（false||true）
10. rownumbers：每行是否显示行号列(false||true)
11. singleSelect: 如果为true，则只允许选择一行。
12. checkOnSelect:当为true，当选中行时。复选框也被选中。
13. selectOnCheck：当为true，当选中复选框时。行也被选中
14.pagePosition:(‘top’||‘bottom’||‘both’)//分页控件位置
15. pageNumber:(number)表示初始化。
16. pageSize:(number)//初始化页面大小
17. pageList：(array[number])//[10,20,30,40,50]
18. queryParams:object//传递参数
19. multiSort：（false||true）//是否允许多列排序
注：还有其他一些属性
三、事件(事件继承自panel(面板)，以下是DataGrid新增的事件。)
|
事件名 |
参数 |
描述 |
|
onLoadSuccess |
data |
在数据加载成功的时候触发。 |
|
onLoadError |
none |
在载入远程数据产生错误的时候触发。 |
|
onBeforeLoad |
param |
在载入请求数据数据之前触发，如果返回false可终止载入数据操作。 |
|
onClickRow |
index, row |
在用户点击一行的时候触发，参数包括： |
|
onDblClickRow |
index, row |
在用户双击一行的时候触发，参数包括： |
|
onClickCell |
index, field, value |
在用户点击一个单元格的时候触发。 |
|
onDblClickCell |
index, 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(); } }); |
|
onBeforeSortColumn |
sort, order |
在用户排序一个列之前触发，返回false可以取消排序。（该事件自1.3.6版开始可用） |
|
onSortColumn |
sort, order |
在用户排序一列的时候触发，参数包括： |
|
onResizeColumn |
field, width |
在用户调整列大小的时候触发。 |
|
onBeforeSelect |
index, row |
在用户选择一行之前触发，返回false则取消该动作。（该事件自1.4.1版开始可用） |
|
onSelect |
index, row |
在用户选择一行的时候触发，参数包括： |
|
onBeforeUnselect |
index, row |
在用户取消选择一行之前触发，返回false则取消该动作。（该事件自1.4.1版开始可用） |
|
onUnselect |
index, row |
在用户取消选择一行的时候触发，参数包括： |
|
onSelectAll |
rows |
在用户选择所有行的时候触发。 |
|
onUnselectAll |
rows |
在用户取消选择所有行的时候触发。 |
|
onBeforeCheck |
index, row |
在用户校验一行之前触发，返回false则取消该动作。（该事件自1.4.1版开始可用） |
|
onCheck |
index, row |
在用户勾选一行的时候触发，参数包括： |
|
onBeforeUncheck |
index, row |
在用户取消校验一行之前触发，返回false则取消该动作。（该事件自1.4.1版开始可用） |
|
onUncheck |
index, row |
在用户取消勾选一行的时候触发，参数包括： |
|
onCheckAll |
rows |
在用户勾选所有行的时候触发。（该事件自1.3版开始可用） |
|
onUncheckAll |
rows |
在用户取消勾选所有行的时候触发。（该事件自1.3版开始可用） |
|
onBeforeEdit |
index, row |
在用户开始编辑一行的时候触发，参数包括： |
|
onBeginEdit |
index, row |
在一行进入编辑模式的时候触发。（该事件自1.3.6版开始可用） |
|
onEndEdit |
index, row, changes |
在完成编辑但编辑器还没有销毁之前触发。（该事件自1.3.6版开始可用） |
|
onAfterEdit |
index, row, changes |
在用户完成编辑一行的时候触发，参数包括： |
|
onCancelEdit |
index,row |
在用户取消编辑一行的时候触发，参数包括： |
|
onHeaderContextMenu |
e, field |
在鼠标右击DataGrid表格头的时候触发。 |
|
onRowContextMenu |
e, index, row |
在鼠标右击一行记录的时候触发。 |
四、方法：
|
方法名 |
参数 |
说明 |
|
options |
none |
var opts = $('#dg').datagrid(' options '); |
|
getPager |
none |
var opts = $('#dg').datagrid(' getPager '); 或得此对象就可以对分页进行处理。具体使用可以查看pagination控件 |
|
getPanel |
none |
同上的使用方法，获得panel对象 |
|
getColumnFields |
frozen |
得到列的字段 $('#dg').datagrid('getColumnFields');//获取解冻列
$('#dg').datagrid('getColumnFields',true); // 获取冻结列
|
|
getColumnOption |
field |
返回指定列的属性，参数为相应列的字段 |
|
resize |
param |
做调整和布局 |
|
load |
param |
加载数据，param有值的话会替代属性中queryparam |
|
reload |
param |
重载，使用方法同上。重载后再当前页 |
|
reloadFooter |
footer |
重载页脚行。 |
|
loading |
none |
显示载入状态。 |
|
loaded |
none |
隐藏载入状态。 |
|
fitColumns |
none |
使列自动展开/收缩到合适的DataGrid宽度。 |
|
fixColumnSize |
field |
固定列大小。如果'field'参数未配置，所有列大小将都是固定的。 $('#dg').datagrid('fixColumnSize', 'name');// 固定'name'列大小
$('#dg').datagrid('fixColumnSize'); // 固定所有列大小
|
|
fixRowHeight |
index |
固定指定列高度。如果'index'参数未配置，所有行高度都是固定的。 |
|
freezeRow |
index |
冻结指定行，当DataGrid表格向下滚动的时候始终保持被冻结的行显示在顶部。（该方法自1.3.2版开始可用） |
|
autoSizeColumn |
field |
自动调整列宽度以适应内容。（该方法自1.3版开始可用） |
|
loadData |
data |
加载本地数据，旧的行将被移除。 |
|
getData |
none |
返回加载完毕后的数据。 |
|
getRows |
none |
返回当前页的所有行。 |
|
getFooterRows |
none |
返回页脚行。 |
|
getRowIndex |
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 |
获取指定行的编辑器。每个编辑器都有以下属性： |
|
getEditor |
options |
获取指定编辑器，options包含2个属性： 代码示例： // 获取日期输入框编辑器并更改它的值 var ed = $('#dg').datagrid('getEditor', {index:1,field:'birthday'}); $(ed.target).datebox('setValue', '5/4/2012'); |
|
refreshRow |
index |
刷新行。 |
|
validateRow |
index |
验证指定的行，当验证有效的时候返回true。 |
|
updateRow |
param |
更新指定行，参数包含下列属性： 代码示例： $('#dg').datagrid('updateRow',{ index: 2, row: { name: '新名称', note: '新消息' } }); |
|
appendRow |
row |
追加一个新行。新行将被添加到最后的位置。 $('#dg').datagrid('appendRow',{ name: '新名称', age: 30, note: '新消息' }); |
|
insertRow |
param |
插入一个新行，参数包括一下属性： index: 1, // 索引从0开始 row: { name: '新名称', age: 30, note: '新消息' } });//当添加成功时，用这种方式。就不需要再去后台请求刷新了。 如果排序的话就就不太合适。 |
|
deleteRow |
index |
删除行。 |
|
getChanges |
type |
从上一次的提交获取改变的所有行。类型参数指明用哪些类型改变的行，可以使用的值有：inserted,deleted,updated等。当类型参数未配置的时候返回所有改变的行。 |
|
acceptChanges |
none |
提交所有从加载或者上一次调用acceptChanges函数后更改的数据。 |
|
rejectChanges |
none |
回滚所有从创建或者上一次调用acceptChanges函数后更改的数据。 |
|
mergeCells |
options |
合并单元格，options包含以下属性： |
|
showColumn |
field |
显示指定的列。 |
|
hideColumn |
field |
隐藏指定的列。 |
|
sort |
param |
排序datagrid表格。（该方法自1.3.6版开始可用） 代码示例： $('#dg').datagrid('sort', 'itemid'); // 排序一个列
$('#dg').datagrid('sort', { // 指定了排序顺序的列
sortName: 'productid', sortOrder: 'desc' }); |