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搭建页面: 其中涉及到一个查询显示功能:查询数据库中的数据,动态显示在页面之中,刚开始这部分十分有疑问,所以虚心向同学学习,现总结至博客 ...
随机推荐
- 服务器 Disk full
General error: 1021 Disk full (/tmp/#sql_24a3_0.MAI); waiting for someone to free some space... (err ...
- Java 容器之Hashset 详解
Java 容器之Hashset 详解.http://blog.csdn.net/nvd11/article/details/27716511
- 很简单的Java断点续传实现原理
原理解析 在开发当中,"断点续传"这种功能很实用和常见,听上去也是比较有"逼格"的感觉.所以通常我们都有兴趣去研究研究这种功能是如何实现的? 以Java来说,网 ...
- js常见算法(一)
1.每个单词手字母大写 var capitalizeEveryWord = str => str.replace(/\b[a-z]/g, char => char.toUpperCase( ...
- 【python学习笔记】7.更加抽象
[python学习笔记]7.更加抽象 类的定义就是执行代码块 在内存保存一个原始实例,可以通过类名来访问 类的实例化,是创建一个原始实例的副本, 并且所有成员变量与原始实例绑定 通过修改实例变量,可以 ...
- PAT乙级-1036.跟奥巴马一起编程(15)
题解 题解: 注意"行数是列数的50%(四舍五入)" #include<iostream> using namespace std; int main() { int ...
- jQuery对于动态生成的元素绑定无效的问题~~
问题:很多时候发现,对动态生成的元素绑定click事件是无效的- 原因:直接绑定到动态生成的元素是无效的,是因为Jquery扫描文档找出所有的$(‘’)元素,并把函数绑定到每个元素的click事件上, ...
- Java设计模式(一)工厂模式
一.场景描述 仪器数据文件的格式包含Pdf.Word.Excel等多种,不同种格式的文件其数据的采集方式不同,因此定义仪器数据采集接口,并定义PDF.Excel等不同的数据采集类实现该接口. 通过工厂 ...
- 我的linux学习之路--(二)linux常用命令
1.date 时间管理 电脑主板有电池,所有电脑断电时间正确,rtc linux:rtc 硬件时钟 clock/hwclock 系统时钟(linux操作系统用软件模拟震荡器计算)date看到就是 命令 ...
- 【iOS】Core Bluetooth
本文介绍蓝牙4.0的一些基本知识. 基本概念.服务器.客户端 蓝牙LE是一个基于点对点的通信系统,其中一台设备作为服务器,另一台设备作为客户端.拥有数据的设备作为服务器,消费数据的设备作为客户端. 比 ...