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頁，然后重新構建頁面。我們隱藏頁列表然后添加新按鈕