EasyUI_Datagrid学习总结
2016年7月25日星期一
一、简介
Easyui中的datagrid从总的作用上讲,就是在列表上显示数据,类似于table,但是在table的基础上,此控件更加方便、快捷的实现想要的功能,且能在此控件属性中有分页等控件,也就更好的对数据进行处理等。
二.基本的属性介绍
1.Columns : 列的配置对象。
基本的用法是:
[[{field:'productid',title:’id’,width: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', var ed $(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 = |
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', $(ed.target).datebox('setValue', '5/4/2012'); |
refreshRow |
index |
刷新行。 |
validateRow |
index |
验证指定的行,当验证有效的时候返回true。 |
updateRow |
param |
更新指定行,参数包含下列属性: 代码示例: $('#dg').datagrid('updateRow',{ index: row: { name: note: } }); |
appendRow |
row |
追加一个新行。新行将被添加到最后的位置。 $('#dg').datagrid('appendRow',{ name: age: 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' }); |