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', 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' }); |