EasyUI Datagrid 自定义分页

时间:13-06-04 栏目:EasyUI 作者:zongyan86 评论:0 点击: 3,137 次

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页,然后重新构建页面。我们隐藏页列表然后添加新按钮。



声明: 本文由( zongyan86 )原创编译,转载请保留链接: EasyUI Datagrid 自定义分页

EasyUI Datagrid 自定义分页:等您坐沙发呢!

发表评论



热搜关键词: easyui   开发   web开发
广告虚位以待

读者排行

关注我们