EasyUI_Datagrid学习总结

时间:2022-02-14 14:29:24

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