学步园

easyui是Jquery中的一个轻量级UI插件，提供了一些诸如window、datagrid、button等控件。现在主要说说Datagrid中分页控件的使用。

easyui中可以单独添加分页pagination控件，也可以在datagrid中添加paginatio控件。

如在datagrid中添加分页控件：$('#tt').datagrid({<br /> title:'Load Data',<br /> iconCls:'icon-save',<br /> width:600,<br /> height:250,<br /> url:'/demo3/data/getItems',<br /> columns:[[<br /> {field:'itemid',title:'Item ID',width:80},<br /> {field:'productid',title:'Product ID',width:80},<br /> {field:'listprice',title:'List Price',width:80,align:'right'},<br /> {field:'unitcost',title:'Unit Cost',width:80,align:'right'},<br /> {field:'attr1',title:'Attribute',width:100},<br /> {field:'status',title:'Status',width:60}<br /> ]],<br /> pagination:true //这里添加分页控件<br /> }); 

可以扑捉分页的触发事件，方法如下：

var pg = $("#tt").datagrid("getPager");<br /> if(pg)<br /> {<br /> $(pg).pagination({<br /> onBeforeRefresh:function(){<br /> alert('before refresh');<br /> },<br /> onRefresh:function(pageNumber,pageSize){<br /> alert(pageNumber);<br /> alert(pageSize);<br /> },<br /> onChangePageSize:function(){<br /> alert('pagesize changed');<br /> },<br /> onSelectPage:function(pageNumber,pageSize){<br /> alert(pageNumber);<br /> alert(pageSize);<br /> }<br /> });<br /> } 

在触发onChangePageSize事件时，会同时触发onSelectPage事件。onSelectPage事件会传递2个参数pageNumber、pageSize.

pageSize是页大小，pageNumber为下一次显示的页号，默认从第一页开始。

上面的用法是1.4.*的用法。

今天用jquery1.6.4的时候，发现传递的参数已经变成page，rows.  page 默认为1 ，rows默认为10.