easyUI自定义DataGrid分页栏

@author 雨泽

datagrid内置一个很好特性的分页功能,自定义也相当简单,在这个教程中,我们将创建一个datagrid 和添加一些自定义按钮在分页工具栏.

查看 Demo

创建 DataGrid

[html]  view plain copy

1. <table id="tt" title="Load Data" class="easyui-datagrid" style="width:550px;height:250px"    
2.         url="data/datagrid_data.json"    
3.         iconCls="icon-save" pagination="true">    
4.     <thead>    
5.         <tr>    
6.             <th field="itemid" width="80">Item ID</th>    
7.             <th field="productid" width="80">Product ID</th>    
8.             <th field="listprice" width="80" align="right">List Price</th>    
9.             <th field="unitcost" width="80" align="right">Unit Cost</th>    
10.             <th field="attr1" width="100">Attribute</th>    
11.             <th field="status" width="60" align="center">Stauts</th>    
12.         </tr>    
13.     </thead>    
14. </table>    

切记设置 pagination属性为true才会生成工具栏.

自定义工具栏

[javascript]  view plain copy

1. var pager = $('#tt').datagrid('getPager');    // 得到datagrid的pager对象  
2. pager.pagination({    
3.     showPageList:false,    
4.     buttons:[{    
5.         iconCls:'icon-search',    
6.         handler:function(){    
7.             alert('search');    
8.         }    
9.     },{    
10.         iconCls:'icon-add',    
11.         handler:function(){    
12.             alert('add');    
13.         }    
14.     },{    
15.         iconCls:'icon-edit',    
16.         handler:function(){    
17.             alert('edit');    
18.         }    
19.     }],    
20.     onBeforeRefresh:function(){    
21.         alert('before refresh');    
22.         return true;    
23.     }    
24. });    

正如你所看到的上面的,我们首先得到datagrid的 pager 对象,然后重新创建pagination,我们隐藏pageList和添加三个新的按钮.

下载 EasyUI示例代码:

easyui-datagrid-demo.zip