本文标签： 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页，然后重新构建页面。我们隐藏页列表然后添加新按钮。
声明: 本文由( zongyan86 )原创编译，转载请保留链接: EasyUI Datagrid 自定义分页
