文档章节

jQuery EasyUI使用教程之自定义数据网格分页

Miss_Hello_World
 Miss_Hello_World
发布于 2016/02/16 11:08
字数 315
阅读 161
收藏 2

#程序员薪资揭榜#你做程序员几年了?月薪多少?发量还在么?>>>

<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的教程!

© 著作权归作者所有

Miss_Hello_World
粉丝 23
博文 668
码字总数 404202
作品 0
九龙坡
私信 提问
加载中

评论(0)

jQuery EasyUI框架使用文档

jQuery EasyUI是一个基于jQuery实现的Web UI框架,用法非常简单,但是功能非常强大,使用它你可以使用很少的Javascript代码来制作适合自己的网页。 主页:http://jquery-easyui.wikidot.com 下...

monkey's
2011/10/13
0
0
EasyUI+bootsrtap混合前端框架

EasyUI+bootsrtap混合前端框架 http://www.jeasyui.com/download/index.php 用户没有登录前浏览的页面用bootsrtap框架 用户登录进去后的商家管理的用 jQuery EasyUI 1.4.5 框架 商家管理的大...

osc_779ncf3o
2018/08/12
30
0
EasyUI DataGrid Live Demo

Live Demo - jQuery EasyUI https://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&theme=material-teal&dir=ltr&pitem=&sort=asc EasyUI 数据表格的客户端分页(Client Side Pagina......

rgqancy
05/12
0
0
jQuery EasyUI快速入门实战教程(一)-入门

1、jQuery EasyUI概述 jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,...

神码小风
2018/06/28
0
0
jQuery EasyUI的各历史版本和应用

from:http://blog.sina.com.cn/s/blog_b8be6dc40102xpe6.html 各历史版本下载地址: http://www.jeasyui.com/download/list.php jQuery团队在2013放出了两个版本。 第一个版本保持1.x的编号...

osc_gpaqd6ej
2018/03/12
7
0

没有更多内容

加载失败,请刷新页面

加载更多

适合小白的Demo_easyui+core3第四章登录

1、先新建个base控制器,作为一个顶层,其他控制器都会集成与baseController base用于获取登录信息的记录 public class baseController : Controller {   public loginlog getbase() {   ...

osc_idh31hqp
5分钟前
8
0
Visual Studio之代码清理(一)

vs2017的格式设置对应vs2019的代码清理: vs2019: 执行代码清理时,可以点击那个扫把小图片,会按照默认的第一种配置文件来自动修复。也可以点击下拉三角符合,选择不同的配置文件,然后进行...

osc_sd3vf5bk
5分钟前
5
0
适合小白的Demo_easyui+core3第四章用户登录

1、添加用户列表控制器,用于用户列表显示,登录,增删改查,邮件发送,下载 public userlistController(MainDbContext _db, ILogger<operatorlog> _logger, IOptions<email> sendMail) {  ......

osc_l4ynn973
7分钟前
11
0
游戏音乐制作中,编曲和作曲的区别

在游戏音乐制作中,不仅有作曲、还有音乐编曲,那么什么是作曲、什么是编曲呢?作曲和编曲到底有什么作用?今天 游戏音乐制作小编一起来和大家聊聊。 游戏作曲,从无到有创作出一段乐曲,这部...

奇亿音乐
7分钟前
10
0
在手机上怎么将图片生成PDF?超实用的文字识别软件!

在手机上怎么将图片生成PDF?在电脑上我们可以通过PDF相关的一些软件将图片转换成PDF文档,但是在手机中要想将图片生成PDF文档就难得多了。今天小编就给大家带来能够将图片迅速生成PDF的一款...

dawda
8分钟前
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部