[转载]EasyUI中数据表格DataGrid添加排序功能
我们这里演示的是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添加排序功能的更多相关文章
- 数据表格 - DataGrid - 字段排序
设置默认排序字段 sortName:"id",sortOrder:"desc",单独为每个字段设置排序 {field: "name", ti ...
- easyui框架--基础篇(一)-->数据表格datagrid(php与mysql交互)
前 言 php easyui框架--本篇学习主要是 easyui中的datagrid(数据表格)框架. 本篇学习主要通过讲解一段代码加GIF图片学习datagrid(数据表格)中的一些常用属 ...
- easyUI 数据表格datagrid的使用
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- [js]EasyUI导出数据表格(Export DataGrid)
包括 'datagrid-export.js' 文件 <script type="text/javascript" src="datagrid-export.js& ...
- 数据表格 - DataGrid - 查询
toolbar头部工具栏 <script type="text/javascript"> $(function () { $("#datagrid" ...
- [转] easyui 获取数据表格中选中行的数据 Get selected row data from...
原文地址:http://my.oschina.net/meSpace/blog/41463 http://www.easyui.net/2010/06/easyui-tutorial-get-sele ...
- jquery easy ui 1.3.4 数据表格(DataGrid)(8)
8.1.创建DataGrid html代码 <table id="dg"></table> $("#dg").datagrid({ // ...
- easyui 折叠数据表格使用
因为要用到折叠数据表格 但是官网上的例子不能展示 费了好大劲 走了很多弯路 现在能显示出数据 以前大多都是看别人写的文章 自己解决问题的时候几乎没记录过 现在想想真不是好习惯 特此记录分享出来 有需要 ...
- [ PyQt入门教程 ] PyQt5中数据表格控件QTableWidget使用方法
如果你想让你开发的PyQt5工具展示的数据显得整齐.美观.好看,显得符合你的气质,可以考虑使用QTableWidget控件.之前一直使用的是textBrowser文本框控件,数据展示还是不太美观.其中 ...
随机推荐
- POJ:2385-Apple Catching(dp经典题)
Apple Catching Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 14311 Accepted: 7000 Descr ...
- DFS初级剪枝及心得
关于DFS心得: 1.利用结构体,记录mark和题目要求的基本属性. 2.用到递归,使用递归时注意要设置出口,即符合要求时return,注意对递归的理解,对于不同情况可能要传递不同的参数,但出口都是一 ...
- 散列--数据结构与算法JavaScript描述(8)
散列 散列是一种常用的数据存储技术,散列后的数据可以快速地插入或取用. 散列使用的数据结构叫做散列表. 在散列表上插入.删除和取用数据都非常快,但是对于查找操作来说却效率低下,比如查找一组数据中的最大 ...
- 笔记-reactor pattern
笔记-reactor pattern 1. reactor模式 1.1. 什么是reactor模式 The reactor design pattern is an event han ...
- Apache 设置二级域名
开启重写模块 LoadModule rewrite_module modules/mod_rewrite.so 编辑配置 NameVirtualHost *:80 <VirtualHost *: ...
- html+css调用服务器端字体
在浏览网页时,由于客户端没有安装某些特殊字体,导致网页文字无法按设计正常显示,这时我们可以使用服务器字体来避免这种现象的发送 语法 @font-face { /* 自定义字体名称 */ font-fa ...
- adnroid 打包问题 :compileReleaseJavaWithJavac
今天打包的时候,由于着急.改了些本地的变化就assembleRelease. 然后就报错: compileReleaseJavaWithJavac 后来网上乱找,.... 之后我想到先跑一下,果然是因 ...
- 《Cracking the Coding Interview》——第8章:面向对象设计——题目1
2014-04-23 17:32 题目:请设计一个数据结构来模拟一副牌,你要如何用这副牌玩21点呢? 解法:说实话,扑克牌的花样在于各种花色.顺子.连对.三带一.炸弹等等,如果能设计一个数据结构,让判 ...
- CodeIgniter学习笔记四:CI中的URL相关函数,路由,伪静态,去掉index.php
一.URL相关函数 1.加载url模块 加载url有两种方式: a.自动加载:在 application/config/autoload.php 中开启 $autoload['helper'] = a ...
- ClassNotFoundException: http.nio.NHttpClientEventHandle
解决方案是打开maven仓库中的jar包看看报错的类所对应版本的类存在不存在,若不存在就换个版本的jar包