文档章节

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

Miss_Hello_World
 Miss_Hello_World
发布于 2016/02/16 11:08
字数 315
阅读 28
收藏 2
点赞 1
评论 0

<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
粉丝 15
博文 593
码字总数 350067
作品 0
九龙坡
使用easyui的DataGrid实现即时编辑(CRUD)

首先来个users.sql /MySQL Data TransferSource Host: localhostSource Database: mydbTarget Host: localhostTarget Database: mydbDate: 2011/6/3 13:59:12/ SET FOREIGNKEYCHECKS=0; -- T......

styleman ⋅ 05/10 ⋅ 0

jquery easyui tree控件复选框选择处理

------上级状态改变(勾选或取消勾选),所有下级状态跟着改变 ,在tree控件的onCheck事件中实现--------- cascadeCheck: false,//默认为true表示上下级勾选联动,false表示取消联动 onCheck: f...

AIU_GS ⋅ 05/22 ⋅ 0

第五节 - easyUI的基本使用

1. 列表组件 datagrid 1.1 创建一个grid.html 1.2 引入easyUI的资源文件 1.3 绘制表格组件 Html: 效果: 1.1 编写后台程序,查询部门数据 在当前文件夹,新建一个dept.php 进行数据库连接测...

剽悍一小兔 ⋅ 05/07 ⋅ 0

第七节 - 部门管理模块(画一个datagrid表格)

在easyui中,datagrid组件需要用一个table标签去渲染。 PS: 在easyui的表格组件中,我们唯一要关心的就是 1.提交到什么地址: url 2.显示哪些字段。 比如,ID字段,你需要在th中设置一个fie...

剽悍一小兔 ⋅ 05/11 ⋅ 0

JEECG 3.7.5 Vue SPA 单页面应用版本发布

此版本为Vue+ElementUI SPA单页面应用版本,提供新一代风格代码生成器模板,采用Vue技术,提供两套精美模板ElementUI风格、Bootstrap分隔,大家速度体验,新鲜出炉,哇咔咔!! JEECG 是一款基...

Jeecg ⋅ 05/31 ⋅ 0

【php增删改查实例】第十四节 - 用户管理模块(起步)

从这一节开始,开始着手开发部门管理模块。 之后的内容就在此基础上进行增加。 1.用户查询 在目录中建立一个user文件夹,作为我们用户管理的模块。 打开这个文件,新建一个userManage.html文...

剽悍一小兔 ⋅ 06/01 ⋅ 0

EasyUI Combobox中getValue和getText

在组织部项目中使用的Combobox都是通过<input>标签实现的,如下: <input id="checkPlace" class="easyui-combobox" name="checkPlace" data-options="valueField:'id',textField:'text',ur......

霜叶情 ⋅ 04/12 ⋅ 0

第六节 - 部门管理模块(开始)

sql建表语句详见:https://www.jianshu.com/p/c88077ed9073 1.新建html模板 新建一个空白的txt文档,然后把后缀名改为.html 用任意一个编辑器打开,比如sublime,dreamweaver。 2.引入easyu...

剽悍一小兔 ⋅ 05/11 ⋅ 0

基于easyui的文档管理系统springmvc+mybaits实现

开发背景 最近需要开发一个后台项目,想来想去决定使用easyui来做页面处理,于是就先自己做了一个练手的文件管理后台。 2. 架构 架构方面才用srpingmvc+mybaits+maven方式,页面用jsp,数据库...

无小农 ⋅ 06/11 ⋅ 0

你这个easyui 列回显的问题最后解决了吗,求教

@小波刘 你好,想跟你请教个问题:https://www.oschina.net/question/10202142142095你这个easyui 列回显的问题最后解决了吗,求教

营养快线送你520 ⋅ 05/09 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Gitee 生成并部署SSH key

1.如何生成ssh公钥 你可以按如下命令来生成 sshkey: ssh-keygen -t rsa -C "xxxxx@xxxxx.com" # Generating public/private rsa key pair...# 三次回车即可生成 ssh key 查看你的 ...

晨猫 ⋅ 30分钟前 ⋅ 0

zblog2.3版本的asp系统是否可以超越卢松松博客的流量[图]

最近访问zblog官网,发现zlbog-asp2.3版本已经进入测试阶段了,虽然正式版还没有发布,想必也不久了。那么作为aps纵横江湖十多年的今天,blog2.2版本应该已经成熟了,为什么还要发布这个2.3...

原创小博客 ⋅ 今天 ⋅ 0

聊聊spring cloud的HystrixCircuitBreakerConfiguration

序 本文主要研究一下spring cloud的HystrixCircuitBreakerConfiguration HystrixCircuitBreakerConfiguration spring-cloud-netflix-core-2.0.0.RELEASE-sources.jar!/org/springframework/......

go4it ⋅ 今天 ⋅ 0

二分查找

二分查找,也称折半查找、二分搜索,是一种在有序数组中查找某一特定元素的搜索算法。搜素过程从数组的中间元素开始,如果中间元素正好是要查找的元素,则搜素过程结束;如果某一特定元素大于...

人觉非常君 ⋅ 今天 ⋅ 0

VS中使用X64汇编

需要注意的是,在X86项目中,可以使用__asm{}来嵌入汇编代码,但是在X64项目中,再也不能使用__asm{}来编写嵌入式汇编程序了,必须使用专门的.asm汇编文件来编写相应的汇编代码,然后在其它地...

simpower ⋅ 今天 ⋅ 0

ThreadPoolExecutor

ThreadPoolExecutor public ThreadPoolExecutor(int corePoolSize, int maximumPoolSize, long keepAliveTime, ......

4rnold ⋅ 昨天 ⋅ 0

Java正无穷大、负无穷大以及NaN

问题来源:用Java代码写了一个计算公式,包含除法和对数和取反,在页面上出现了-infinity,不知道这是什么问题,网上找答案才明白意思是负的无穷大。 思考:为什么会出现这种情况呢?这是哪里...

young_chen ⋅ 昨天 ⋅ 0

前台对中文编码,后台解码

前台:encodeURI(sbzt) 后台:String param = URLDecoder.decode(sbzt,"UTF-8");

west_coast ⋅ 昨天 ⋅ 0

实验楼—MySQL基础课程-挑战3实验报告

按照文档要求创建数据库 sudo sercice mysql startwget http://labfile.oss.aliyuncs.com/courses/9/createdb2.sqlvim /home/shiyanlou/createdb2.sql#查看下数据库代码 代码创建了grade......

zhangjin7 ⋅ 昨天 ⋅ 0

一起读书《深入浅出nodejs》-node模块机制

node 模块机制 前言 说到node,就不免得提到JavaScript。JavaScript自诞生以来,经历了工具类库、组件库、前端框架、前端应用的变迁。通过无数开发人员的努力,JavaScript不断被类聚和抽象,...

小草先森 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部