jEasyUI 自定義分頁

數(shù)據(jù)網(wǎng)格（datagrid）內(nèi)置一個很好特性的分頁功能，自定義也相當(dāng)簡單。在本教程中，我們將創(chuàng)建一個數(shù)據(jù)網(wǎng)格（datagrid），并在分頁工具欄上添加一些自定義按鈕。

創(chuàng)建數(shù)據(jù)網(wǎng)格（DataGrid）

????<table id="tt" title="Load Data" class="easyui-datagrid" style="width:550px;height:250px"
????????????url="data/datagrid_data.json"
????????????iconCls="icon-save" pagination="true">
????????<thead>
????????????<tr>
????????????????<th field="itemid" width="80">Item ID</th>
????????????????<th field="productid" width="80">Product ID</th>
????????????????<th field="listprice" width="80" align="right">List Price</th>
????????????????<th field="unitcost" width="80" align="right">Unit Cost</th>
????????????????<th field="attr1" width="100">Attribute</th>
????????????????<th field="status" width="60" align="center">Stauts</th>
????????????</tr>
????????</thead>
????</table>

請記得，設(shè)置 'pagination' 屬性為 true，這樣才會生成分頁工具欄。

自定義分頁工具欄

????var pager = $('#tt').datagrid('getPager');    // get the pager of datagrid
????pager.pagination({
????????showPageList:false,
????????buttons:[{
????????????iconCls:'icon-search',
????????????handler:function(){
????????????????alert('search');
????????????}
????????},{
????????????iconCls:'icon-add',
????????????handler:function(){
????????????????alert('add');
????????????}
????????},{
????????????iconCls:'icon-edit',
????????????handler:function(){
????????????????alert('edit');
????????????}
????????}],
????????onBeforeRefresh:function(){
????????????alert('before refresh');
????????????return true;
????????}
????});

正如您所看到的，我們首先得到數(shù)據(jù)網(wǎng)格（datagrid）的 pager 對象，然后重新創(chuàng)建分頁（pagination）。我們隱藏頁面列表，并添加三個新的按鈕。

上一篇：jEasyUI 添加復(fù)選框下一篇：jEasyUI 啟用行內(nèi)編輯