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

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

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

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

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

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

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

$("#gridlist").datagrid({
onSortColumn: function (sort, order) {
loadlistgrid(sort, order);
}
})

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

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

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

function loadlistgrid(sortname, sortvalue) {
var url = "/WebService/ashx/Presentation.ashx?sys_sortname=" + sortname + "&sys_sortvalue=" + sortvalue;
} $.ajax({
cache: false,
async: false,
url: url,
error: function (XMLHttpRequest, textStatus, errorThrown) {
easyuialert(XMLHttpRequest.responseText)
},
success: function (data) {
data.total = data.rows.length;
$("#gridlist").datagrid({
data: data
})
}
})
}

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

以下是C#代码:

public static DataTable GetList(HttpContext context, string tableName)
{
if (string.IsNullOrEmpty(tableName))
{
throw new Exception("请配置正确的tableName值!");
} string sortName = context.Request.QueryString["sys_sortname"];
string sortValue = context.Request.QueryString["sys_sortvalue"];
string columns = context.Server.UrlDecode(context.Request.QueryString["columns"]); if (string.IsNullOrEmpty(columns))
{
columns = "*";
}
else
{
columns = columns.substring(1);
} StringBuilder strSql = new StringBuilder();
strSql.Append("select " + columns + " from " + tableName); if (!string.IsNullOrEmpty(sortName) && !string.IsNullOrEmpty(sortValue))
{
strSql.Append(" order by " + sortName + " " + sortValue);
} return DbHelperSQL.Query(strSql.ToString()).Tables[0];
}

将查询到的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. python爬虫:利用正则表达式爬取豆瓣读书首页的book

    1.问题描述: 爬取豆瓣读书首页的图书的名称.链接.作者.出版日期,并将爬取的数据存储到Excel表格Douban_I.xlsx中 2.思路分析: 发送请求--获取数据--解析数据--存储数据 1.目 ...

  2. [CodeForces954D]Fight Against Traffic(最短路)

    Description 题目链接 Solution 从起点和终点分别做一次最短路并记录结果 枚举每一条可能的边判断 Code #include <cstdio> #include < ...

  3. CentOS网络设置 couldn't resolve host 'mirrorlist.centos.org问题解决

    在VMWare上安装好centos后,使用yum安装nodejs报错:can not resolve host 'mirritlist.centos.org', 百度上很多都说在/etc/resolv ...

  4. HDFS HA 的 hdfs-site.xml

    <?xml-stylesheet type="text/xsl" href="configuration.xsl"?> <!-- Licens ...

  5. 设置MySQL允许外网访问 费元星 feiyuanxing.com 站长

    1.修改配置文件sudo vim /etc/mysql/my.cnf把bind-address参数的值改成你的内/外网IP或0.0.0.0,或者直接注释掉这行. 2.登录数据库mysql -u roo ...

  6. 腾讯课堂之前端开发html5css3javascriptjQueryJS年薪20万

    第一章 网页制作零基础 第一节 什么是HTML 第二节 HTML基本语法 第三节 HTML结构标签 第四节 HTML常用标签及属性 第五节 HTML无序列表UL标签 第六节 HTML定义列表DL标签 ...

  7. 利用插件对某些网页执行javascript代码

    说明 javascript在浏览器地址栏中可以运行,也可以按F12在控制台中运行,还可以写一个插件让javascript针对某些网页执行,可以使用chrome浏览器的Content scripts,C ...

  8. 《Cracking the Coding Interview》——第1章:数组和字符串——题目2

    2014-03-18 01:30 题目:反转一个char *型的C/C++字符串. 解法:一头一尾俩iterator,向中间靠拢并且交换字符. 代码: // 1.2 Implement a funct ...

  9. 【Validation】林轩田机器学习基石

    这一节主要讲如何通过数据来合理的验证模型好不好. 首先,否定了Ein来选模型和Etest来选模型. (1)模型越复杂,Ein肯定越好:但是Eout就不一定了(见上一节的overfitting等) (2 ...

  10. 利用socket.io构建一个聊天室

    利用socket.io来构建一个聊天室,输入自己的id和消息,所有的访问用户都可以看到,类似于群聊. socket.io 这里只用来做一个简单的聊天室,官网也有例子,很容易就做出来了.其实主要用的东西 ...