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