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搭建页面: 其中涉及到一个查询显示功能:查询数据库中的数据,动态显示在页面之中,刚开始这部分十分有疑问,所以虚心向同学学习,现总结至博客 ...
随机推荐
- 在hive下使用dual伪表
[hive@nn1 ~]$ touch dual.txt[hive@nn1 ~]$ echo 'X' >dual.txt hive> load data local inpath '/ho ...
- mysql的下载安装
不知道为什么,写这篇文章我总是想感慨一下.首先我的感谢和敬佩那些能把知识和技术分享出来的开发者,不管你的技术是否很牛,但是你的精神让我十分敬佩.学java的已经二天了,除了问问朋友,给我最大帮助的就是 ...
- Django---第三方
第三方: 3.富文本编辑器:此处以tinymce为例 使用编辑器的显示效果为: 1.下载安装 在网站pypi网站搜索并下载"django-tinymce-2.4.0" 解压 tar ...
- java的枚举2
首先先理解一下java中枚举的本质. java的世界中一切皆是类,下面通过一个例子解释一下enum的本质: package cn.xnchall.enumeration; public class G ...
- JavaScript中的execCommand
execCommand方法是执行一个对当前文档,当前选择或者给出范围的命令.处理Html数据时常用 如下格式:document.execCommand(sCommand[,交互方式, 动态参数]) , ...
- Linux Centos 下安装软件 三种方式(转)
Linux学习的路还很远呢,各位码农,新年快乐哈! 1)一种是软件的源代码,您需要自己动手编译它.这种软件安装包通常是用gzip压缩过的tar包(后缀为.tar.gz). 2)另一种是软件的可执行程序 ...
- 数据定义: CREATE、DROP、ALTER
CREATE DATABASE 句法 CREATE DATABASE [IF NOT EXISTS] db_name 数据库.表.索引.列和别名 中被给出. 如果数据库已经存在,并且你没有指定 IF ...
- 优化python程序的几点建议
1.在需要只读序列时,最好使用元组而非列表: 2.使用生成器yield,而不是创建大的元组和列表并在其上进行迭代处理: 3.尽量使用python内置的数据结构,而不实现自己的自定义结构: 4.从小字符 ...
- ASP.NET MVC上传图片的奇怪问题
本文来源于博客园-钱智慧,转载请注明出处 表现:客户说就华为的手机有问题,而且是在QQ里打开有问题,如果在手机的浏览器上,则可以正常上传图片. 有问题的代码如下: private ResultMode ...
- C++环境搭建与atom编译器编译C++
Windows下安装 方法一--VS: 使用windows开发神器visio studio.这种方法比较简单,直接下载一个最新的vs安装就行.不单单是C++,C.C#.VB等都可以开发. 方法二--只 ...