我们这里演示的是EasyUI数据表格DataGrid从服务器端排序功能,因为觉的本地数据排序没有多大的作用,一般我们DataGrid不会读取全部数据,只会读取当前页的数据,所以本地数据排序也只是对当前页的数据进行排序,不是我们想要用效果。

下面开始演示从服务器端排序功能。

第一步,启用EasyUI DataGrid的排序功能: 具体就是为列设置sortable属性,如下:

{ field: "SOID", title: "订单单号", width: "80px",sorttable:true }

如果是要为项目中所有EasyUI DataGrid的列开启排序功能,一个一个列的设置就太麻烦了,可以使用以下方法统一添加sorttable属性:

  1. function initDataGrid(grid) {
  2.   var columns = $("#gridlist").datagrid("options").columns[0];
  3.   for (i = 0; i < columns.length; i++) {
  4.   columns[i].sortable = true;
  5.   }
  6. }

第二步,为EasyUI DataGrid绑定排序事件,如下:

  1. $("#gridlist").datagrid({
  2. onSortColumn: function (sort, order) {
  3. loadlistgrid(sort, order);
  4. }
  5. })

onSortColumn事件有两个sort与order两个参数,sort是指当前用户点击列的列头名,即列的field属性,order就是当前排序的方式,有desc与asc两个值。

有了这两个信息,我们就可以将这两个值传入到服务器,将按当前排序处理后的数据源重新绑定到EasyUI DataGrid即可:

第三步,返回排序后的数据源: 在第二步中我们有定义loadlistgrid方法,方法如下:

  1. function loadlistgrid(sortname, sortvalue) {
  2. var url = "/WebService/ashx/Presentation.ashx?sys_sortname=" + sortname + "&sys_sortvalue=" + sortvalue;
  3. }
  4.  
  5. $.ajax({
  6. cache: false,
  7. async: false,
  8. url: url,
  9. error: function (XMLHttpRequest, textStatus, errorThrown) {
  10. easyuialert(XMLHttpRequest.responseText)
  11. },
  12. success: function (data) {
  13. data.total = data.rows.length;
  14. $("#gridlist").datagrid({
  15. data: data
  16. })
  17. }
  18. })
  19. }

这样,服务器就可以接收到sort和order两个值了,再根据这两个值在服务器排序数据源,可参考下面代码:

以下是C#代码:

  1. public static DataTable GetList(HttpContext context, string tableName)
  2. {
  3. if (string.IsNullOrEmpty(tableName))
  4. {
  5. throw new Exception("请配置正确的tableName值!");
  6. }
  7.  
  8. string sortName = context.Request.QueryString["sys_sortname"];
  9. string sortValue = context.Request.QueryString["sys_sortvalue"];
  10. string columns = context.Server.UrlDecode(context.Request.QueryString["columns"]);
  11.  
  12. if (string.IsNullOrEmpty(columns))
  13. {
  14. columns = "*";
  15. }
  16. else
  17. {
  18. columns = columns.substring(1);
  19. }
  20.  
  21. StringBuilder strSql = new StringBuilder();
  22. strSql.Append("select " + columns + " from " + tableName);
  23.  
  24. if (!string.IsNullOrEmpty(sortName) && !string.IsNullOrEmpty(sortValue))
  25. {
  26. strSql.Append(" order by " + sortName + " " + sortValue);
  27. }
  28.  
  29. return DbHelperSQL.Query(strSql.ToString()).Tables[0];
  30. }

将查询到的DataTable转为Json格式返回给页面就完成我们想要的排序效果了。

本文来自:.Net学习网 http://www.lmwlove.com/ac/ID1150

[转载]EasyUI中数据表格DataGrid添加排序功能的更多相关文章

  1. 数据表格 - DataGrid - 字段排序

    设置默认排序字段 sortName:"id",sortOrder:"desc",单独为每个字段设置排序 {field: "name", ti ...

  2. easyui框架--基础篇(一)-->数据表格datagrid(php与mysql交互)

      前  言  php  easyui框架--本篇学习主要是 easyui中的datagrid(数据表格)框架. 本篇学习主要通过讲解一段代码加GIF图片学习datagrid(数据表格)中的一些常用属 ...

  3. easyUI 数据表格datagrid的使用

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  4. [js]EasyUI导出数据表格(Export DataGrid)

    包括 'datagrid-export.js' 文件 <script type="text/javascript" src="datagrid-export.js& ...

  5. 数据表格 - DataGrid - 查询

    toolbar头部工具栏 <script type="text/javascript"> $(function () { $("#datagrid" ...

  6. [转] easyui 获取数据表格中选中行的数据 Get selected row data from...

    原文地址:http://my.oschina.net/meSpace/blog/41463 http://www.easyui.net/2010/06/easyui-tutorial-get-sele ...

  7. jquery easy ui 1.3.4 数据表格(DataGrid)(8)

    8.1.创建DataGrid html代码 <table id="dg"></table> $("#dg").datagrid({ // ...

  8. easyui 折叠数据表格使用

    因为要用到折叠数据表格 但是官网上的例子不能展示 费了好大劲 走了很多弯路 现在能显示出数据 以前大多都是看别人写的文章 自己解决问题的时候几乎没记录过 现在想想真不是好习惯 特此记录分享出来 有需要 ...

  9. [ PyQt入门教程 ] PyQt5中数据表格控件QTableWidget使用方法

    如果你想让你开发的PyQt5工具展示的数据显得整齐.美观.好看,显得符合你的气质,可以考虑使用QTableWidget控件.之前一直使用的是textBrowser文本框控件,数据展示还是不太美观.其中 ...

随机推荐

  1. Spark提交任务(Standalone和Yarn)

    Spark Standalone模式提交任务 Cluster模式: ./spark-submit  \--master spark://node01:7077  \--deploy-mode clus ...

  2. [Bzoj2282]消防(二分答案+树的直径)

    Description 某个国家有n个城市,这n个城市中任意两个都连通且有唯一一条路径,每条连通两个城市的道路的长度为zi(zi<=1000). 这个国家的人对火焰有超越宇宙的热情,所以这个国家 ...

  3. IE浏览器调用ActiveX获取U盘中的文件

    <p> <script type="text/javascript" language="javaScript">// <![CD ...

  4. 在MAC下使用Robotframework+Selenium2【第二枪】如何处理Table点击指定记录

    1.通过关键字Get Matching Xpath Count获取table中的记录 2.遍历Table所有记录 3.判断记录是否符合条件,做点击操作

  5. 4,MongoDB 之 $关键字 及 $修改器 $set $inc $push $pull $pop MongoDB

    MongoDB中的关键字有很多, $lt $gt $lte $gte 等等,这么多我们也不方便记,这里我们说说几个比较常见的 一.查询中常见的 等于 大于 小于 大于等于 小于等于 等于 : 在Mon ...

  6. div+css实现双飞翼布局

    本例通过div+css实现HTML金典布局双飞翼布局,该布局结构为上中下结构,上:header头:下:footer尾:中:内容,将内容分为了三个结构,左中右 下图是效果图 我们来看下代码 <!D ...

  7. Eclipse 创建 Java 项目---Eclipse教程第08课

    打开新建 Java 项目向导 通过新建 Java 项目向导可以很容易的创建 Java 项目.打开向导的途径有: 通过点击 "File" 菜单然后选择 New > Java P ...

  8. FMDB的线程安全

    最近面试被问到FMDB的多线程处理问题,因为之前项目中是移植别人的代码,没有踩过这里的坑. 问题: 多线程同时访问数据库时,报数据库锁定的问题,错误信息是: Unknown error finaliz ...

  9. 《Cracking the Coding Interview》——第17章:普通题——题目3

    2014-04-28 22:18 题目:计算N的阶乘尾巴上有多少个零? 解法:计算5的个数即可,因为2 * 5 = 10,2的个数肯定比5多.计算5的个数可以在对数时间内搞定. 代码: // 17.3 ...

  10. express常用代码片段

    请求模块: var express = require('express'); var router = express.Router(); // 拿到express框架的路由 var mongoos ...