EasyUI 自定义DataGrid分页

DataGrid内建分页能力是强大的，它比自定义相对容易。在这个教程，我们将要创建DataGrid并且在页面工具栏中添加一些自定义按钮。

标记
<table id="tt"></table>
创建DataGrid

$('#tt').datagrid({

    title:'Load Data',

    iconCls:'icon-save',

    width:550,

    height:250,

    pagination:true,

    url:'datagrid_data.json',

    columns:[[

        {field:'itemid',title:'Item ID',width:80},

        {field:'productid',title:'Product ID',width:80},

        {field:'listprice',title:'List Price',width:80,align:'right'},

        {field:'unitcost',title:'Unit Cost',width:80,align:'right'},

        {field:'attr1',title:'Attribute',width:100},

        {field:'status',title:'Status',width:60}

    ]]

});

记住设置pagination属性为true产生页面工具栏。
自定义页面工具栏

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

    }

});

我们得到DataGrid页，然后重新构建页面。我们隐藏页列表然后添加新按钮