easyUI自定義DataGrid分頁欄

@author YHC

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

查看 Demo

創建 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>  

切記設置 pagination屬性為true才會生成工具欄.

自定義工具欄

var pager = $('#tt').datagrid('getPager');    // 得到datagrid的pager對象
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;  
    }  
});  

正如你所看到的上面的,我們首先得到datagrid的 pager 對象,然后重新創建pagination,我們隱藏pageList和添加三個新的按鈕.

下載 EasyUI示例代碼:

easyui-datagrid-demo.zip