说明一下:
当点击 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. dva.js 用法详解:列表展示

    本教程案例github:https://github.com/axel10/dva_demo-Counter-and-list/tree/master 这次主要通过在线获取用户数据并且渲染成列表这个案 ...

  2. 多线程(三) java中线程的简单使用

    java中,启动线程通常是通过Thread或其子类通过调用start()方法启动. 常见使用线程有两种:实现Runnable接口和继承Thread.而继承Thread亦或使用TimerTask其底层依 ...

  3. 求数组中最小的k个数

    题目:输入n个整数,找出其中最小的K个数.例如输入4,5,1,6,2,7,3,8这8个数字,则最小的4个数字是1,2,3,4,. package test; import java.util.Arra ...

  4. 在VMWare上安装Arch Linux

    1.为什么选择Arch Linux Arch Linux 是通用 x86-64 GNU/Linux 发行版.Arch采用滚动升级模式,尽全力提供最新的稳定版软件.初始安装的Arch只是一个基本系统,随 ...

  5. sklearn包中有哪些数据集你都知道吗?

    注册了博客园一晃有3个月了,同时接触机器学习也断断续续的算是有1个月了.今天就用机器学习神器sklearn包的相关内容作为我的开篇文章吧. 本文将对sklearn包中的数据集做一个系统介绍,并简单说一 ...

  6. 使用枚举enum

    枚举可以把常量按照类别组织起来, 并且提供了构造方法和其他访问方法 用法: package com.nel.testPro.useage.use_enum; public enum Color imp ...

  7. poj-1008-玛雅历

    Description 上周末,M.A. Ya教授对古老的玛雅有了一个重大发现.从一个古老的节绳(玛雅人用于记事的工具)中,教授发现玛雅人使用了一个一年有365天的叫做Haab的历法.这个Haab历法 ...

  8. Mac HomeBrew 常用命令

    mac 系统常用的软件安装工具就是 homebrew, 其最常用的命令如下: 安装(需要 Ruby):ruby -e "$(curl -fsSL https://raw.github.com ...

  9. 基于hi-nginx的web开发(python篇)——utf-8编码

    一致地utf-8编码,非常重要.对python2而言,尤其如此. 如果在hi-nginx中使用的是python2,同时又需要无障碍地使用中日韩等文字,那么一定不要忘记使用: #-*- coding:u ...

  10. MyEclipse安装Eclipse Memory Analyzer插件以及使用例子

    一 :安装 1.Memory Analyzer 插件下载地址:http://www.eclipse.org/mat/downloads.php 2.将下载的文件解压到MyEclipse的  dropi ...