jQuery EasyUI使用教程之自定义数据网格分页
jQuery EasyUI使用教程之自定义数据网格分页
Miss_Hello_World 发表于2年前
jQuery EasyUI使用教程之自定义数据网格分页
  • 发表于 2年前
  • 阅读 27
  • 收藏 2
  • 点赞 1
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

<jQuery EasyUI最新试用版免费下载>

数据网格内置一个很好特性的分页功能,自定义也相当简单。在本教程中,我们将创建一个数据网格,并在分页工具栏上添加一些自定义按钮。

自定义数据网格分页

查看jQuery EasyUI演示

创建数据网格

< 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' );  // get the pager of 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 ;
}
});

正如您所看到的,我们首先得到数据网格的pager对象,然后重新创建分页。我们隐藏页面列表,并添加三个新的按钮。

下载EasyUI示例:easyui-datagrid-demo.zip

有兴趣的朋友可以点击查看更多有关jQuery EasyUI的教程!

共有 人打赏支持
粉丝 13
博文 513
码字总数 302955
×
Miss_Hello_World
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: