easyui是jQuery中的一个轻量级UI插件,提供了一些诸如window、datagrid、button等控件。现在主要说说Datagrid中分页控件的使用。
easyui中可以单独添加分页pagination控件,也可以在datagrid中添加paginatio控件。
如在datagrid中添加分页控件:
- $('#tt').datagrid({
- title:'Load Data',
- iconCls:'icon-save',
- width:600,
- height:250,
- url:'/demo3/data/getItems',
- columns:[[
- {field:'itemid',title:'Item ID',width:80},
- {field:'productid',title:'Product ID',width:80},
- {field:'listprice',title:'List Price',width:80,align:'right'},
- {field:'unitcost',title:'Unit Cost',width:80,align:'right'},
- {field:'attr1',title:'Attribute',width:100},
- {field:'status',title:'Status',width:60}
- ]],
- pagination:true //这里添加分页控件
- });
可以扑捉分页的触发事件,方法如下:
- var pg = $("#tt").datagrid("getPager");
- if(pg)
- {
- $(pg).pagination({
- onBeforeRefresh:function(){
- alert('before refresh');
- },
- onRefresh:function(pageNumber,pageSize){
- alert(pageNumber);
- alert(pageSize);
- },
- onChangePageSize:function(){
- alert('pagesize changed');
- },
- onSelectPage:function(pageNumber,pageSize){
- alert(pageNumber);
- alert(pageSize);
- }
- });
- }
在触发onChangePageSize事件时,会同时触发onSelectPage事件。onSelectPage事件会传递2个参数pageNumber、pageSize.
pageSize是页大小,pageNumber为下一次显示的页号,默认从第一页开始。
上面的用法是1.4.*的用法。
今天用jquery1.6.4的时候,发现传递的参数已经变成page,rows. page 默认为1 ,rows默认为10.