[转载]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文本框控件,数据展示还是不太美观.其中 ...
随机推荐
- 大话目标检测经典模型(RCNN、Fast RCNN、Faster RCNN)
目标检测是深度学习的一个重要应用,就是在图片中要将里面的物体识别出来,并标出物体的位置,一般需要经过两个步骤:1.分类,识别物体是什么 2.定位,找出物体在哪里 除了对单个物体进行检测,还要能支持 ...
- 18 Django-组件拾遗
一 Django的form组件 forms组件 二 Django的model form组件 这是一个神奇的组件,通过名字我们可以看出来,这个组件的功能就是把model和form组合起来,先来一个简单的 ...
- dex2oat 加载多次
我是一个做插件开发的人员,插件就是动态加载dex文件. 然后4.4以后,Android dalvik虚拟机,和ART. art运行的必须要把dex转换为oat elf文件. 然后,这个dex2oat需 ...
- BitLocker:如何启用网络解锁
TechNet 库Windows ServerWindows Server 2012 R2 和 Windows Server 2012服务器角色和技术安全和保护BitLockerBitLocker 中 ...
- Installing Nginx With PHP5 (And PHP-FPM) And MySQL Support (LEMP) On Ubuntu 12.04 LTS [repost]
from : http://www.howtoforge.com/installing-nginx-with-php5-and-php-fpm-and-mysql-support-lemp-on-ub ...
- 写一个quick sort
#include <stdio.h> #include <stdlib.h> //int a[]={1000,10000,9,10,30,20,50,23,90,100,10} ...
- 剑指Offer - 九度1214 - 丑数
剑指Offer - 九度1214 - 丑数2013-11-21 21:06 题目描述: 把只包含因子2.3和5的数称作丑数(Ugly Number).例如6.8都是丑数,但14不是,因为它包含因子7. ...
- 基于Xtrabackup备份集来恢复某个误删除的表(drop)
Preface Yesterday,I've demonstratated how to rescue a droped and a truncated table based on ...
- [译]9-spring bean的生命周期
spring中bean的生命周期比较容易理解.bean在实例化之后有时需要调用某个初始化方法进行一些初始化的工作.同样的 ,当bean在销毁之前有时需要做一些资源回收的工作. 尽管bean在实例化和销 ...
- Oracle 学习----游标(使用无参光标cursor)
表: ----游标----------------------------- declare cursor tt is select name,sal from temp; vname temp.na ...