EasyUI Datagrid 分页的情况下实现点击表头的小三角图标对数据库中所有数据重新排序
说明一下:
当点击 datagrid 表头某一列的小三角图标时,easyui 本身是有排序的,但是在当我们对 datagrid 进行了分页的情况下,点击排序只是对当前页的数据进行排序,而需求需要我对数据库里面的所有数据进行排序,这样的话只能从后台先排好序再返回了。
看了一下文档,发现点击小三角图标时会触发 onSortColumn 事件,于是我们只要在触发这个事件的时候重新向后台请求一遍 datagrid 的数据好了。
那就直接上代码吧~~
var sortOrder = "asc"; // 排序方式,asc:正序,desc:倒序
var sortField = "NickName"; // 要排序的列名称
// 初始化数据列表
function initDatagrid() {
$('#dg').datagrid({
url: '/api/Member',
method: "get",
striped: true,
border: true,
selectOnCheck: false,
checkOnSelect: false,
remoteSort: true, // 定义是否从服务器排序数据,要设置为true
singleSelect: false,
idField: 'MemberId',
pagination: true,
rownumbers: false,
pageSize: 20,
fitColumns: true,
columns: [[
...
]],
// 把要排序的列名称与正序/倒序这两个参数也传到后台进行处理
onBeforeLoad: function (params) {
params.nickName = $("#nickName").val();
params.phone = $('#phone').val();
params.sortField = sortField;
params.sortOrder = sortOrder;
},
// 点击某一列进行排序时触发的事件
onSortColumn: function (sort, order) {
sortField = sort; // 要排序的列名称
sortOrder = order; // 正序or倒序
$('#dg').datagrid('reload');
}
});
}
不过这样还没完善,在 easyui 里本来点击 onSortColumn 就是请求了一次后台的,这一点可以打断点测试一下。
所以,我们需要把原来的那次请求屏蔽掉,否则会请求两次后台。
具体的做法,就是修改 jquery.easyui.js / jquery.easyui.min.js 文件。
在 jquery.easyui.js / jquery.easyui.min.js 文件中搜 remoteSort,找到下面这段代码
if(opts.remoteSort){
_646(_63c);
}else{
_647(_63c,$(_63c).datagrid("getData"));
}
opts.onSortColumn.call(_63c,opts.sortName,opts.sortOrder);
};
把 if 里面执行的代码注释掉就好了。(在上图中是 _646(_63c);,有可能不一样??)。
PS:datagrid 和 treegrid 都有 remoteSort 这个东东,别搞错了!!
End.
EasyUI Datagrid 分页的情况下实现点击表头的小三角图标对数据库中所有数据重新排序的更多相关文章
- EasyUI Datagrid 分页显示(客户端)
转自:https://blog.csdn.net/metal1/article/details/17536185 EasyUI Datagrid 分页显示(客户端) By ZYZ 在使用JQuery ...
- EasyUI DataGrid分页数据绑定
记录东西感觉很痛苦,总结东西很痛苦,麻烦,不过为了下次的方便和知识的牢固以后要坚持总结. EasyUI DataGrid分页数据绑定 在解决方案中新建两个文件FormMain.aspx(html也可以 ...
- EasyUI datagrid 分页Json字符串格式
//EasyUI datagrid 分页Json字符串格式 //{"total":xx,"rows":[{...},{...}]} total:总数 rows: ...
- asp.net mvc easyui datagrid分页
提到 asp.net mvc 中的分页,很多是在用aspnetpager,和easyui datagrid结合的分页却不多,本文介绍的是利用easyui 中默认的分页控件,实现asp.net mvc分 ...
- easyUI datagrid 分页参数page和rows
Struts2获取easyUI datagrid 分页参数page和rows 用pageHelper分页时,只要是能够获取前台传来的两个参数page和rows基本就完成了很大一部分. 获取方法:定义两 ...
- js+jquery+html实现在三种不通的情况下,点击图片放大的效果
js+jquery+html实现在三种不通的情况下,点击图片放大的效果. 三种情况分别是:图片的父元素宽高固定; 图片的宽高固定; 图片的父元素宽固定,高度不固定 第一种情况:图片的父元素宽高固定 ...
- MVC设计模式((javaWEB)在数据库连接池下,实现对数据库中的数据增删改查操作)
设计功能的实现: ----没有业务层,直接由Servlet调用DAO,所以也没有事务操作,所以从DAO中直接获取connection对象 ----采用MVC设计模式 ----采用到的技术 .MVC设计 ...
- MongoDB数据库中查询数据(下)
MongoDB数据库中查询数据(下) 在find中,options参数值为一个对象,用来设置查询数据时使用的选项,下面我们来对该参数值对象中可以使用的属性进行介绍: 1. fields; 该属性值为一 ...
- EasyUI动态显示后台数据库中的数据
最近在完成一个项目,采用SSM框架搭建完成,前端使用EasyUI搭建页面: 其中涉及到一个查询显示功能:查询数据库中的数据,动态显示在页面之中,刚开始这部分十分有疑问,所以虚心向同学学习,现总结至博客 ...
随机推荐
- 未来已来,腾讯AI计算网络
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 作者:由鹅厂网事发表在云+社区 "鹅厂网事"由深圳市腾讯计算机系统有限公司技术工程事业群网络平台部运营,我们希望与业界各位志同道合的伙伴交流 ...
- TypeScript入门知识一(字符串特性)
一,TypeScript多行字符串 传统JavaScript字符串换行需要+进行拼接,而TypeScript不需要+拼接.看下面实例: javaScript: var content = " ...
- three.js引擎基础知识—摄像机、场景及渲染器
一.three.js采用右手坐标系: x轴正方向向右,y轴正方向向上,z轴由屏幕从里向外,如下图右: 二.3D编程三要素:场景.渲染器.摄像机 1.场景:创建的物品和模型都需放入场景中 threejs ...
- .msi安装包安装方法(安装错误2503和2502)
把鼠标放到Win8屏幕的最左下角,等待Win8 Metro界面的缩略图出现后点击鼠标右键,在弹出的菜单中选择“命令提示符(管理员)”在“命令提示符(管理员)”中输入 msiexec /package ...
- celery学习之入门
Celery 简介 Celery 是一个简单.灵活且可靠的,处理大量消息的分布式系统,并且提供维护这样一个系统的必需工具.它是一个专注于实时处理的任务队列,同时也支持任务调度. broker:一个消息 ...
- Gatling - 用 session 实现关联 传递 token 值
项目中的某个接口必须先登录后调用,但是 header 中的Authorization 需要在登录返回的token中添加一个字串,所以需要先获得 token 并修改后传递给该接口的请求. 虽然这是常见的 ...
- 简单http代理服务器搭建
1. yum install squid2. vi /etc/squid/squid.conf 将http_access deny all 中deny 改为allow,http_port后面的是端口号 ...
- 网站压力测试ab 命令
网站压力测试ab 命令 author: headsen chen 2017-10-25 10:06:35 个人原创,转载请注明作者,出处,否则依法追究法律责任! 1,制作一个a ...
- 以太坊go-ethereum签名部分源码解析
以太坊go-ethereum签名部分源码解析 golang标准库里的crypto/ecdsa椭圆曲线加密算法所提供的函数有: ecdsa.PublicKey结构体通过持有一个elliptic,Curv ...
- Mycat 分片规则详解--取模范围分片
实现方式:该算法先进行取模,然后根据取模值所属范围进行分片 优点:可以自主决定取模后数据的节点分布 缺点:dataNode 划分节点是事先建好的,需要扩展时比较麻烦. 配置示例: <tableR ...