EasyUI_Datagrid学习总结

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	在用户点击一行的时候触发，参数包括： index：点击的行的索引值，该索引值从0开始。 row：对应于点击行的记录。
onDblClickRow	index, row	在用户双击一行的时候触发，参数包括： index：点击的行的索引值，该索引值从0开始。 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	在用户排序一列的时候触发，参数包括： sort：排序列字段名称。 order：排序列的顺序(ASC或DESC)
onResizeColumn	field, width	在用户调整列大小的时候触发。
onBeforeSelect	index, row	在用户选择一行之前触发，返回false则取消该动作。（该事件自1.4.1版开始可用）
onSelect	index, row	在用户选择一行的时候触发，参数包括： index：选择的行的索引值，索引从0开始。 row：对应于取消选择行的记录。
onBeforeUnselect	index, row	在用户取消选择一行之前触发，返回false则取消该动作。（该事件自1.4.1版开始可用）
onUnselect	index, row	在用户取消选择一行的时候触发，参数包括： index：选择的行的索引值，索引从0开始。 row：对应于取消选择行的记录。
onSelectAll	rows	在用户选择所有行的时候触发。
onUnselectAll	rows	在用户取消选择所有行的时候触发。
onBeforeCheck	index, row	在用户校验一行之前触发，返回false则取消该动作。（该事件自1.4.1版开始可用）
onCheck	index, row	在用户勾选一行的时候触发，参数包括： index：选中的行索引，索引从0开始。 row：对应于所选行的记录。 （该事件自1.3版开始可用）
onBeforeUncheck	index, row	在用户取消校验一行之前触发，返回false则取消该动作。（该事件自1.4.1版开始可用）
onUncheck	index, row	在用户取消勾选一行的时候触发，参数包括： index：选中的行索引，索引从0开始。 row：对应于取消勾选行的记录。 （该事件自1.3版开始可用）
onCheckAll	rows	在用户勾选所有行的时候触发。（该事件自1.3版开始可用）
onUncheckAll	rows	在用户取消勾选所有行的时候触发。（该事件自1.3版开始可用）
onBeforeEdit	index, row	在用户开始编辑一行的时候触发，参数包括： index：编辑行的索引，索引从0开始。 row：对应于编辑行的记录。
onBeginEdit	index, row	在一行进入编辑模式的时候触发。（该事件自1.3.6版开始可用）
onEndEdit	index, row, changes	在完成编辑但编辑器还没有销毁之前触发。（该事件自1.3.6版开始可用）
onAfterEdit	index, row, changes	在用户完成编辑一行的时候触发，参数包括： index：编辑行的索引，索引从0开始。 row：对应于完成编辑的行的记录。 changes：更改后的字段(键)/值对。
onCancelEdit	index,row	在用户取消编辑一行的时候触发，参数包括： index：编辑行的索引，索引从0开始。 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	获取指定行的编辑器。每个编辑器都有以下属性： actions：编辑器可以执行的动作，同编辑器定义。 target：目标编辑器的jQuery对象。 field：字段名称。 type：编辑器类型，比如：'text','combobox','datebox'等。
getEditor	options	获取指定编辑器，options包含2个属性： index：行索引。 field：字段名称。 代码示例： // 获取日期输入框编辑器并更改它的值 var ed = $('#dg').datagrid('getEditor', {index:1,field:'birthday'}); $(ed.target).datebox('setValue', '5/4/2012');
refreshRow	index	刷新行。
validateRow	index	验证指定的行，当验证有效的时候返回true。
updateRow	param	更新指定行，参数包含下列属性： index：执行更新操作的行索引。 row：更新行的新数据。 代码示例： $('#dg').datagrid('updateRow',{ index: 2, row: { name: '新名称', note: '新消息' } });
appendRow	row	追加一个新行。新行将被添加到最后的位置。 $('#dg').datagrid('appendRow',{ name: '新名称', age: 30, note: '新消息' });
insertRow	param	插入一个新行，参数包括一下属性： index：要插入的行索引，如果该索引值未定义，则追加新行。 row：行数据。代码示例：// 在第二行的位置插入一个新行$('#dg').datagrid('insertRow',{ index: 1,    // 索引从0开始 row: { name: '新名称', age: 30,               note: '新消息'           } });//当添加成功时，用这种方式。就不需要再去后台请求刷新了。 如果排序的话就就不太合适。
deleteRow	index	删除行。
getChanges	type	从上一次的提交获取改变的所有行。类型参数指明用哪些类型改变的行，可以使用的值有：inserted,deleted,updated等。当类型参数未配置的时候返回所有改变的行。
acceptChanges	none	提交所有从加载或者上一次调用acceptChanges函数后更改的数据。
rejectChanges	none	回滚所有从创建或者上一次调用acceptChanges函数后更改的数据。
mergeCells	options	合并单元格，options包含以下属性： index：行索引。 field：字段名称。 rowspan：合并的行数。 colspan：合并的列数。
showColumn	field	显示指定的列。
hideColumn	field	隐藏指定的列。
sort	param	排序datagrid表格。（该方法自1.3.6版开始可用） 代码示例： $('#dg').datagrid('sort', 'itemid');    // 排序一个列 $('#dg').datagrid('sort', {          // 指定了排序顺序的列           sortName: 'productid',           sortOrder: 'desc' });