@author 雨澤

datagrid內建一個很好特性的分頁功能,自定義也相當簡單,在這個教程中,我們將建立一個datagrid 和新增一些自定義按鈕在分頁工具欄.

建立 DataGrid

1. <tableid="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.             <thfield="itemid"width="80">Item ID</th>
7.             <thfield="productid"width="80">Product ID</th>
8.             <thfield="listprice"width="80"align="right">List Price</th>
9.             <thfield="unitcost"width="80"align="right">Unit Cost</th>
10.             <thfield="attr1"width="100">Attribute</th>
11.             <thfield="status"width="60"align="center">Stauts</th>
12.         </tr>
13.     </thead>
14. </table>

自定義工具欄

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.         returntrue;    
23.     }    
24. });    

下載 EasyUI示例程式碼: