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搭建页面: 其中涉及到一个查询显示功能:查询数据库中的数据,动态显示在页面之中,刚开始这部分十分有疑问,所以虚心向同学学习,现总结至博客 ...
随机推荐
- linux & mac环境python多版本切换与选择
linux和mac很多地方是相似的,只不过在切换python版本时权限有差异. ====图已补上,O(∩_∩)O~ 1.linux 首先linux内核自带版本是python2.6,但是一般linux ...
- 如何卸载wineQQ?
好久没有用ubuntu系统的wineqq了,今天用的时候,提示无法使用,要求官网重新下载新版本, 感觉挺麻烦的,准备卸载,半天卸载不了. 经过努力,最终还是卸载了. 卸载命令: sudo dpkg ...
- kubernetes1.9中部署dashboard
在1.9k8s中 dashboard可以有两种访问方式 kubeconfig(HTTPS)和token(http) 2018-03-18 一.基于token的访问1.下载官方的dashboardwge ...
- 三方面搞定http协议之“报文模型”
关于http协议,这一块的知识其实相当大,但是作为一个前端开发者来说,我觉得只要知道三方面的内容就足矣把http协议是个什么东西解释清楚了.而这三方面,就是http的报文模型,请求方式以及状态码. 这 ...
- WebStorm配置Vue开发环境
虽然最新版的前端开发利器WebStorm支持了Vue,但是大部分人的WebStorm依然是默认不支持Vue的老版本(比如之前的我),所以需要手动添加WebStorm对Vue的支持.要想让WebStor ...
- python第二篇博客,关于数据类型的详细讲解
数据,就是我们要存储的信息,因为信心种类很多,所以,数据种类也有很多 数字类型数据 整数int 表示年龄,手机号等等 浮点型float 表示身高,工资等带有小数点的数据 字符串类型数据 用来做描述性信 ...
- shell常见脚本30例
shell常见脚本30例 author:headsen chen 2017-10-19 10:12:12 本文原素材出自网上,特此申明.有些地方加入我自己的改动 常见的30例shell脚本 1.用 ...
- C语言switch/case圈复杂度优化重构
软件重构是改善代码可读性.可扩展性.可维护性等目的的常见技术手段.圈复杂度作为一项软件质量度量指标,能从一定程度上反映这些内部质量需求(当然并不是全部),所以圈复杂度往往被很多项目采用作为软件质量的度 ...
- Swift 笔记汇总
Swift 3 笔记 Swift: The Basics :介绍 Swift 一些零碎的点. Swift: Basic Operators :介绍 Swift 的操作符. Functions : 介绍 ...
- Python爬取百度贴吧
from urllib import request,parseimport os#找到借口及关键字base_url = 'http://tieba.baidu.com/f?'a = input(&q ...