文档章节

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

Miss_Hello_World
 Miss_Hello_World
发布于 2016/02/16 11:08
字数 315
阅读 31
收藏 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
粉丝 18
博文 668
码字总数 404202
作品 0
九龙坡
jQuery EasyUI快速入门实战教程(一)-入门

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

神码小风
06/28
0
0
jQuery EasyUI入门视频教程【20讲】

jQuery EasyUI入门视频教程【20讲】 jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。非职业讲师孙宇讲授,全...

Amamatthew
2014/09/28
0
0
jquery easyui datagrid 分页数据请求

jquery easyui datagrid内置了分页的功能,当设置为 pagination: true 以后就能够启用分页功能。 启用分页以后,jquery easyui datagrid发送的数据请求中会包含两个参数: int iPageIndex =...

我吃火锅你吃调料-快给我打钱-房子不要钱
2015/11/02
0
0
jQuery EasyUI使用教程之创建可折叠面板

<jQuery EasyUI最新版下载> 在本教程中,你将学习到有关于easyui折叠面板的知识。折叠面板包含了一系列的面板,其中所有的面板标题都是可见的,但只有一个面板的主体内容在某个时间是可见的。...

Miss_Hello_World
2015/11/13
0
0
jQuery EasyUI使用教程之创建标签页

<jQuery EasyUI最新版下载> 本教程将展示如何使用easyui创建一个标签组件。标签可以动态地添加或删除多个面板,你可以使用标签在同一个页面上显示不同的实体。 标签一次只能显示一个面板,每...

Miss_Hello_World
2015/11/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Shell特殊符号总结以及cut,sort,wc,uniq,tee,tr,split命令

特殊符号总结一 * 任意个任意字符 ? 任意一个字符 # 注释字符 \ 脱义字符 | 管道符 # #号后的备注被忽略[root@centos01 ~]# ls a.txt # 备注 a.txt[root@centos01 ~]# a=1[root@centos01...

野雪球
28分钟前
1
0
OSChina 周二乱弹 —— 程序员圣衣

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @达尔文:分享Skeeter Davis的单曲《The End of the World》 《The End of the World》- Skeeter Davis 手机党少年们想听歌,请使劲儿戳(这里...

小小编辑
44分钟前
4
0
[ python import module ] 导入模块

import moudle_name ----> import module_name.py ---> import module_name.py文件路径 -----> sys.path (这里进行查找文件) # from app.web import Personimport app.web.Person as Pe......

_______-
昨天
3
0
Redis性能问题排查解决手册

一、性能相关的数据指标 通过Redis-cli命令行界面访问到Redis服务器,然后使用info命令获取所有与Redis服务相关的信息。通过这些信息来分析文章后面提到的一些性能指标。 nfo命令输出的数据可...

IT--小哥
昨天
1
0
mixin混入

①新建mixin.js文件 const mixin = { methods: { /** * 分页公共方法 */ handleSizeChange(val) { this.pageData.size = val; this.query(); }, hand......

不负好时光
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部