jqery-easyui的Datagrid的介绍-Pagination事件
Posted 醉里浪
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jqery-easyui的Datagrid的介绍-Pagination事件相关的知识，希望对你有一定的参考价值。
Datagrid(数据表)
依赖的组件
resizable
linkbutton
pagination
DataGrid Options对象的属性
| 名称(Name)
|
类型(Type)
|
描述(Description)
|
默认值(Default)
|
| Titile
|
string
|
Datagrid数据表的标题
|
null
|
| iconCls
|
string
|
一个样式类提供作为数据表图标的背景图标
|
null
|
| border
|
boolean
|
是否显示数据表边框,true-显示 false-不显示
|
true
|
| width
|
number
|
设置Datagrid的宽度
|
auto
|
| height
|
number
|
设置Datagrid的高度
|
auto
|
| columns
|
array
|
配置Datagrid列属性的Object对象
|
null
|
| frozenColumns
|
array
|
与columns属性一样，但是该属性设置的列会被冻结在Datagrid的左边
|
null
|
| striped
|
boolean
|
是否显示斑马线
|
false
|
| Method
|
string
|
远程数据的获取类型，可取值为post或get
|
post
|
| nowrap
|
boolean
|
是否把数据显示在一行上，如果设置为false，当数据长度超过列长度时，超过的部分被截掉
|
true
|
| idField
|
string
|
表明哪个字段是一个标识字段
|
null
|
| url
|
string
|
从远程地址请求数据的url
|
null
|
| loadMsg
|
string
|
当从远程站点加载数据时显示的提示消息
|
Processing, please wait …
|
| pagination
|
boolean
|
设置是否有分页功能
|
false
|
| rownumbers
|
number
|
是否显示行号列
|
false
|
| singleSelect
|
number
|
设置是否可只选一行
|
false
|
| fit
|
boolean
|
设置是否可以让表格自动缩放以适应父容器
|
false
|
| pageNumber
|
number
|
当设置pagination属性时，初始化页码
|
1
|
| pageSize
|
number
|
当设置pagination属性时，初始化每一页显示的数量
|
10
|
| pageList
|
array
|
当设置pagination属性时，初始化每页可选的数据大小清单
|
[10,20,30,40,50]
|
| queryParams
|
Object
|
当请求远程数据时，发送的额外的参数
|
{}
|
| sortName
|
string
|
定义哪一列可以排序
|
null
|
| sortOrder
|
string
|
定义列排序的方式，递增（asc）或递减（desc）
|
asc
|
Columns属性
| Name
|
Type
|
Description
|
Default
|
| title
|
字符串
|
列标题文字
|
undefined
|
| field
|
字符串
|
列字段名称
|
undefined
|
| width
|
数字
|
列宽度
|
undefined
|
| rowspan
|
数字
|
该列占几行单元格
|
undefined
|
| colspan
|
数字
|
该列占几列单元格
|
undefined
|
| align
|
字符串
|
数据对其方式，可选值有left,right,center
|
undefined
|
| sortable
|
布尔
|
是否允许该列排序
|
undefined
|
| checkbox
|
布尔
|
是否显示选择框
|
undefined
|
| formatter
|
函数
|
包含三个参数：
value: 列字段对应的值 rowData: 行数据对象 rowIndex: 行索引 |
undefined
|
| editor
|
string,object
|
指示编辑类型，有两个子属性，type和options；type可选的编辑框有:text，textarea，checkbox，numberbox，validatebox，datebox，combobox，combotree；options指定一个对象，与编辑类型对应，数字框对应的options属性中有precision,表示小数点位数
|
undefined
|
事件
| Name
|
Parameters
|
Description
|
| onLoadSuccess
|
none
|
远程数据成功加载时触发
|
| onLoadError
|
none
|
远程数据加载发生错误时触发
|
| onClickRow
|
rowIndex,rowData
|
用户点击一行时触发，参数包括：
rowIndex:被点击行的索引，索引从0开始 rowData:被点击行对应的数据记录 |
| onDblClickRow
|
rowIndex,rowData
|
用户双击一行时触发，参数同上
|
| onSortColumn
|
sort,order
|
用户对一列进行排序时触发，参数包括：
sort:被排序的类字段名称 order:排序的命令，asc 或者 desc |
| onSelect
|
rowIndex,rowData
|
用户选择一行时触发
|
| onUnselect
|
rowIndex,rowData
|
当用取消选择一行时触发
|
方法
| Name
|
Parameters
|
Description
|
| options
|
none
|
返回一个options对象
|
| resize
|
none
|
调整表格大小和布局
|
| reload
|
none
|
重新加载行
|
| fixColumnSize
|
none
|
固定列的大小
|
| loadData
|
param
|
加载本地数据，旧行将被删除
|
| getSelected
|
none
|
返回被选中的第一行记录或者null
|
| getSelections
|
none
|
返回所有被选中的行，当没有一条记录别选中时则返回一个空的数组对象
|
| clearSelections
|
none
|
取消所有选中
|
| selectRow
|
index
|
选择一行，行索引从0开始
|
| selectRecord
|
idValue
|
通过行id值选择一行
|
| unselectRow
|
index
|
取消选中某行
|
| beginEdit
|
index
|
开始编辑某行
|
| endEdit
|
index
|
结束编辑某行
|
| cancelEdit
|
index
|
取消编辑某行
|
| refreshRow
|
index
|
刷新一行的数据
|
| appendRow
|
row
|
添加新行
|
| deleteRow
|
index
|
删除一行
|
| getChanges
|
type
|
自最后一次数据提交开始获取被改变的行，类型参数指示的是行的改变类型，可能的值是：inserted,deleted,updated等，当类型参数没有指定时将返回所有被改变的行
|
| acceptChanges
|
none
|
自数据被加载或者最后一次调用acceptChanges的时间开始，提交所有的数据变化
|
| rejectChanges
|
none
|
自所有数据被创建或者最后一次调用accepChanges方法开始回滚所有变化了的数据
|
注：示例中用到了分页，Datagrid依赖pagination(分页)组件，下面讲解以下pagination组件的属性和事件
Pagination属性
| 属性名
|
类型
|
描述
|
默认值
|
| total
|
数字
|
当分页建立时设置记录的总数量
|
1
|
| pageSize
|
数字
|
每一页显示的数量
|
10
|
| pageNumber
|
数字
|
当分页建立时，显示的页数
|
1
|
| pageList
|
数组
|
用户可以修改每一页的大小，pageList属性定义了多少种大小可以改变.
|
[10,20,30,50]
|
| loading
|
布尔
|
定义数据是否正在加载
|
false
|
| buttons
|
数组
|
定义自定义按钮，每个按钮包含两个属性：iconCls: 显示背景图像的CSS类
handler: 当一个按钮被点击时的处理函数 |
null
|
| showPageList
|
布尔
|
定义是否显示页面列表
|
true
|
| showRefresh
|
布尔
|
定义是否显示刷新按钮
|
true
|
| beforePageText
|
字符串
|
在输入框组件前显示的标签
|
Page
|
| afterPageText
|
字符串
|
在输入框组件后显示的标签
|
Of {pages}
|
| displayMsg
|
字符串
|
显示一个页面的信息。
|
Displaying {from} {to} of {total} items 注：{param}是固定的参数设置，不能修改
|
Pagination事件
| 事件名
|
参数
|
描述 |
| onSelectPage
|
pageNumber, pageSize
|
当用户选择一个新页时触发，回调函数包含两个参数：pageNumber: 新页面的页数pageSize: 新页面的大小 |
| onBeforeRefresh
|
ageNumber, pageSize
|
刷新按钮被点击之前触发，如果返回false则取消刷新操作 |
| onRefresh
|
ageNumber, pageSize
|
刷新以后触发 |
| onChangePageSize
|
ageSize
|
改变页面大小时触发
|
1.实例 (1)代码 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>EasyUI Datagrid</title> <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../themes/icon.css"> <script type="text/javascript" src="../jquery-1.4.2.min.js"></script> <script type="text/javascript" src="../jquery.easyui.min.js"></script> <script> $(function(){ $(‘#test‘).datagrid({ title:‘My Title‘, iconCls:‘icon-save‘, width:800, height:450, nowrap: true, striped: true, url:‘datagrid_data.json‘, sortName: ‘code‘, sortOrder: ‘desc‘, idField:‘code‘, frozenColumns:[[ {field:‘ck‘,checkbox:true}, {title:‘code‘,field:‘code‘,width:80,sortable:true} ]], columns:[[ {title:‘Base Information‘,colspan:3}, {field:‘opt‘,title:‘Operation‘,width:100,align:‘center‘ ,rowspan:2,formatter:function(value,rec){ return ‘<span style="color:red">Edit Delete</span>‘; } }], [{field:‘name‘,title:‘Name‘,width:120}, {field:‘addr‘,title:‘Address‘,width:120,rowspan:2,sortable:true}, {field:‘col4‘,title:‘Col41‘,width:150,rowspan:2} ]], pagination:true, rownumbers:true, singleSelect:true, //事件调用的方式 onLoadSuccess: function (){alert(‘load data successfully!‘);} toolbar:[{ //设置工具条，该工具条中设置了三个功能按钮 text:‘Add‘, //标题为’Add’的工具条按钮 iconCls:‘icon-add‘,//工具条按钮显示的图标 handler:function(){//工具条按钮实现的功能函数 alert(‘add‘) } },{ text:‘Cut‘, //标题为’Cut’的工具条按钮 iconCls:‘icon-cut‘, disabled:true, handler:function(){ alert(‘cut‘) } },‘-‘,{ text:‘Save‘, iconCls:‘icon-save‘, handler:function(){ alert(‘save‘) } }] }); //获取页面分页对象 var p = $(‘#test‘).datagrid(‘getPager‘); if (p){ $(p).pagination({ //设置分页功能栏 //分页功能可以通过Pagination的事件调用后台分页功能来实现 onBeforeRefresh:function(){ alert(‘before refresh‘); } }); } }); function resize(){ $(‘#test‘).datagrid({ title: ‘New Title‘, striped: true, width: 650, queryParams:{ p:‘param test‘, name:‘My Name‘ } }); } //获取Datagrid Options对象属性的方式 function getGridProperty(){ //先获取Options对象，然后通过Options获取其属性 var optionsObj = $(‘#test‘).datagrid(‘options‘); var queryParams = optionsObj.queryParams; } //以下为调用Datagrid的函数的自定义方法 function getSelected(){ var selected = $(‘#test‘).datagrid(‘getSelected‘); alert(selected.code+":"+selected.name); } function getSelections(){ var ids = []; var rows = $(‘#test‘).datagrid(‘getSelections‘); for(var i=0;i<rows.length;i++){ ids.push(rows[i].code); } alert(ids.join(‘:‘)) } function clearSelections(){ $(‘#test‘).datagrid(‘clearSelections‘); } function selectRow(){ $(‘#test‘).datagrid(‘selectRow‘,2); } function selectRecord(){ $(‘#test‘).datagrid(‘selectRecord‘,‘002‘); } function unselectRow(){ $(‘#test‘).datagrid(‘unselectRow‘,2); } </script> </head> <body> <h1>DataGrid</h1> <div style="margin-bottom: 10px;"> <a href="#" onclick="resize()">resize</a> <a href="#" onclick="getSelected()">getSelected</a> <a href="#" onclick="getSelections()">getSelections</a> <a href="#" onclick="clearSelections()">clearSelections</a> <a href="#" onclick="selectRow()">selectRow</a> <a href="#" onclick="selectRecord()">selectRecord</a> <a href="#" onclick="unselectRow()">unselectRow</a> </div> <table id="test"></table> </body> </html>
以上是关于jqery-easyui的Datagrid的介绍-Pagination事件的主要内容，如果未能解决你的问题，请参考以下文章