说明一下:
当点击 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:datagridtreegrid 都有 remoteSort 这个东东,别搞错了!!

End.

EasyUI Datagrid 分页的情况下实现点击表头的小三角图标对数据库中所有数据重新排序的更多相关文章

  1. EasyUI Datagrid 分页显示(客户端)

    转自:https://blog.csdn.net/metal1/article/details/17536185 EasyUI Datagrid 分页显示(客户端) By ZYZ 在使用JQuery ...

  2. EasyUI DataGrid分页数据绑定

    记录东西感觉很痛苦,总结东西很痛苦,麻烦,不过为了下次的方便和知识的牢固以后要坚持总结. EasyUI DataGrid分页数据绑定 在解决方案中新建两个文件FormMain.aspx(html也可以 ...

  3. EasyUI datagrid 分页Json字符串格式

    //EasyUI datagrid 分页Json字符串格式 //{"total":xx,"rows":[{...},{...}]} total:总数 rows: ...

  4. asp.net mvc easyui datagrid分页

    提到 asp.net mvc 中的分页,很多是在用aspnetpager,和easyui datagrid结合的分页却不多,本文介绍的是利用easyui 中默认的分页控件,实现asp.net mvc分 ...

  5. easyUI datagrid 分页参数page和rows

    Struts2获取easyUI datagrid 分页参数page和rows 用pageHelper分页时,只要是能够获取前台传来的两个参数page和rows基本就完成了很大一部分. 获取方法:定义两 ...

  6. js+jquery+html实现在三种不通的情况下,点击图片放大的效果

    js+jquery+html实现在三种不通的情况下,点击图片放大的效果. 三种情况分别是:图片的父元素宽高固定;  图片的宽高固定;  图片的父元素宽固定,高度不固定 第一种情况:图片的父元素宽高固定 ...

  7. MVC设计模式((javaWEB)在数据库连接池下,实现对数据库中的数据增删改查操作)

    设计功能的实现: ----没有业务层,直接由Servlet调用DAO,所以也没有事务操作,所以从DAO中直接获取connection对象 ----采用MVC设计模式 ----采用到的技术 .MVC设计 ...

  8. MongoDB数据库中查询数据(下)

    MongoDB数据库中查询数据(下) 在find中,options参数值为一个对象,用来设置查询数据时使用的选项,下面我们来对该参数值对象中可以使用的属性进行介绍: 1. fields; 该属性值为一 ...

  9. EasyUI动态显示后台数据库中的数据

    最近在完成一个项目,采用SSM框架搭建完成,前端使用EasyUI搭建页面: 其中涉及到一个查询显示功能:查询数据库中的数据,动态显示在页面之中,刚开始这部分十分有疑问,所以虚心向同学学习,现总结至博客 ...

随机推荐

  1. Liunx2:Liunx目录结构

    Liunx目录图 进入根目录,使用ll命令看一下Liunx整个根目录图: 这里面所有的目录都是买完服务器之后最初始的目录,没有进过任何加工.Liunx以树的结构组织所有目录,用一张图表示一下Liunx ...

  2. python 数据结构简介

    栈(stack) 定义: 数据集合,只能在一端(首尾)进行删除和插入的列表. 特点: 后进先出(LIFO) 典型作用: 括号匹配:左括号进栈,右括号跟左括号对应则出栈,例如:(({{[]}}))匹配 ...

  3. C# 登录 存Session ,cookie并且验证只能一个人登录以及清session并且Cache

    string id = ConvertHelper.GetString(ds.Tables[0].Rows[0]["Uid"]);//用户ID string struserid = ...

  4. github远程仓库初始化配置

    github远程仓库的提交一般是通过shell进行,windows下有Git Bash工具(https://git-for-windows.github.io/) 由于本地Git仓库和GitHub仓库 ...

  5. 关于如何使用SVN的一些建议

    SVN是管理源码的主流方式之一,当多人同时编辑同一项目时经常会出现冲突,本文主要针对Asp.net 项目开发中使用SVN提出一点建议. 1.忽略asp.net 项目中的非源代码文件 .VS目录是vis ...

  6. HTTP架构介绍(1) Web服务器和代理服务器

    HTTP应用协议本身是不能运行的,它需是需要架构在硬件和软件解决方案上,才能在万维网上提供高效的传输服务. 在这系列的文章中,我们将会了解到以下概念: Web服务器 代理服务器 缓存 网关.信道和中继 ...

  7. eclipse的注释

    版权声明:本文为博主原创文章,转载请注明出处. 如果能帮助你,那我的目的就达到了 Window --> Java --> Code Style --> Code Templates ...

  8. 【Unity3D与23种设计模式】桥接模式(Bridge)

    GoF定义: "将抽象与实现分离,使二者可以独立的变化" 游戏中,经常有这么一种情况 基类角色类(ICharacter),下面有子类士兵类(ISoldier).敌军类(IEnemy ...

  9. 以@Value方式注入 properties 配置文件

    类中读取XML文件不是太方便,所以使用*.properties是比较好的办法 注入方式获取是最直接,最快捷的.这个操作主要涉三个部分,下面分别介绍: 首先,配置文件准备.这里文件名命名为applica ...

  10. 剑指Offer-平衡二叉树

    package Tree; /** * 平衡二叉树 * 输入一棵二叉树,判断该二叉树是否是平衡二叉树. * 平衡二叉树(Balanced Binary Tree)又被称为AVL树(有别于AVL算法), ...