效果:

红框的字段看,为设置了,列排序,向后台Post数据sort/order。

原理:向后台POST数据,sort/post数据。

html代码:

            <table id="tab"></table>

JS代码:

$(function () {
$('#tab').datagrid({
width: ,//宽度
title: '信息列表',//标题名
iconCls: 'icon-search',//图标
singleSelect: true,//是否单选
striped: true,//是否开启斑马线 //============================= 加载数据,要显示的字段 =========================================//
//要加载的数据
url: "../Json/datagridjson.ashx",
//要显示的列
columns: [[
{ field: 'id', title: '编号' },
{ field: 'name', title: '姓名' },
{ field: 'sex', title: '性别' },
//在字段中使用排序,每点击一次,都会向后台POST要排序的字段和正序还是倒序排列。
{ field: 'createtime', title: '创建时间',sortable:true, }
]],
//==========================================================================================// //===================================== 分页 ===============================================//
//显示分页控件栏
pagination: true,
pageNumber: ,//初始化的时候在第几页
pageSize: ,//,每页显示的条数
pageList: [, , ],//每页显示的条数
//==========================================================================================// //===================================== 排序 ===============================================//
//通过POST传递到后台,然后进行排序。
sortName: 'createtime',
sortOrder: 'desc',
//==========================================================================================// });
})

一般处理程序(ashx)后台数据:

  • 要修改的SQL语句:
  • order by " + sortfield + " " + sortDescOrasc + "
  • (select ROW_NUMBER() over(order by " + sortfield + " " + sortDescOrasc + ")
        public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "application/json"; //接受前台传递来的页数和每页显示的条数
//前台开启分页之后,传递来的参数
int pageIndex = Convert.ToInt32(context.Request["page"]);
int pagenumber = Convert.ToInt32(context.Request["rows"]); //接收排序字段
string sortfield = context.Request["sort"];
string sortDescOrasc = context.Request["order"]; //存储数据
DataTable dt = new DataTable(); if (pageIndex == )
{
//加载第一页
string pageIndexOne = "select top " + pagenumber + " id, name, sex, createtime from Tb_person order by " + sortfield + " " + sortDescOrasc + "";
//获取数据
dt = SQLHelper.ExecuteTable(pageIndexOne, CommandType.Text);
}
else if (pageIndex != )
{
//加载非第一页
string pageIndexNotOne = @"select id, name, sex, createtime from (select ROW_NUMBER() over(order by " + sortfield + " " + sortDescOrasc + ") as rownum, id, name, sex, createtime from Tb_person) as a where a.rownum > " + (pageIndex - ) * pagenumber + " and a.rownum <= " + pageIndex * pagenumber + "";
//获取数据
dt = SQLHelper.ExecuteTable(pageIndexNotOne, CommandType.Text);
}
else { } //将datatable转换为json
//在返回的JSON数据中,加入total属性(总记录数)
//那么他就会在加载的时候,显示总记录数。
//显示的格式是【 {"total":12, "rows":"[{},{},{}]"} 】,rows内为JSON数据。
string strjson = "{\"total\":15, \"rows\":" + DatatableToJson.ToJson(dt) + "}"; context.Response.Write(strjson);
}

EasyUI - DataGrid 组建 - [ 排序功能 ]的更多相关文章

  1. EasyUI - DataGrid 组建 - [ 新增功能 ]

    效果: html代码: <div> <!--使用JS加载方式--> <table id="tab"></table> <!-- ...

  2. EasyUI - DataGrid 组建 - [ 搜索功能 ]

    效果: html代码: 使用css加载的方式,所以要在写html代码,也可以使用js操作. <div> <!--使用JS加载方式--> <table id="t ...

  3. EasyUI - DataGrid 组建 - [ 样式功能 ]

    效果显示: 同上次博文效果. html代码: 同上次博文代码. js代码: align: 'center',//标题和内容居中 resizable: false,//不允许改变大小 //hidden: ...

  4. [转载]EasyUI中数据表格DataGrid添加排序功能

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

  5. Easyui datagrid自定义排序

    做项目遇到个关于排序问题,想着在前端排序,正好Easyui有这个功能,所以就拿来用了一下,因为跟官网的Demo不太一样,所以总结一下: 首先这一列是要排序的列(当然,在生产环境,这一列是隐藏的,在开发 ...

  6. EasyUI DataGrid 添加排序

    这个事例演示了如何在点击列头的时候排序DataGrid中全部的列可以通过点击列头被排序.你可以定义可以被排序的列.默认的,列不能被排序除非你设置sortable属性为TRUE,下面是例子:标记 < ...

  7. EasyUI - DataGrid 组建 - [ 删除,修改 ]

    效果: html代码: <div style="padding-top: 50px; width: 800px; margin: 0 auto;"> <!--使用 ...

  8. EasyUI - DataGrid 组建 - [ 组件加载和分页 ]

    效果: 原理:通过POST传递到数据后台字段. 此时上传的参数,page:当前页数,rows:每页显示的页数. 有此两项参数,计算取出数据条数. 通过后台接受参数,进行处理并返回抽取的数据. html ...

  9. easyui datagrid 列排序

    1.js设置 //=====================数据加载===================== /** * grid加载数据 * * @returns */ function grid ...

随机推荐

  1. GDB调试精粹及使用实例

    一:列文件清单 1. List (gdb) list line1,line2 二:执行程序 要想运行准备调试的程序,可使用run命令,在它后面可以跟随发给该程序的任何参数,包括标准输入和标准输出说明符 ...

  2. IOS-图片操作集合

    编辑图片的几个方法 第一种 先用UIImage对象加载一张图片 然后转化成CGImageRef放到CGContext中去编辑 第二种  用CGImageCreate函数创建CGImageRef 然后把 ...

  3. [置顶] Linux下文件和目录权限说明

    在Linux下使用ls -l或者ll命令可以查看文件和文件夹的权限.结果显示类似于: drwxrwxrwx,这里分为四组,分别为文件类型,文件所有者的权限(读写执行),文件所有者所在组用户的权限(读写 ...

  4. ASP.NET MVC 以Stream 下载文件

     1.0以Stream 下载文件 nl.fileid = Int32.Parse(id); //服务器上对应的id Stream stream = Lawsuit.DownLoad(nl);//服务器 ...

  5. Struts1的实现原理

    一 开文背景 -- 废话讲一段~ 本文借助动力节点-王勇老师的视频教程中的引例来了解struts1的实现原理,虽然现在已经很少使用struts1了,但是了解了其原理之后,对了解其他mvc框架还是有较大 ...

  6. Two-phase Termination

    本文参阅[http://ifeve.com/java-two-phase-termination/] Two-phase Termination模式简介 停止线程是一个目标简单而实现却不那么简单的任务 ...

  7. iOS字符串NSString中去掉空格(或替换为某个字符串)

    http://blog.sina.com.cn/s/blog_6f29e81f0101qwbk.html [问题描述]       今天请求服务器返回的字段中含有空格,这空格是服务器开发人员不小心往数 ...

  8. Chapter 1.简单工厂模式

    该篇文章通过一个写计算器控制台程序,来导入文章主题. 首先,要注意代码规范,变量命名有意义,不能随意用A,B,C;    功能要封装好,不要写在一个主函数里,另外要考虑后期需求的更改,如果出现多个函数 ...

  9. QT窗口置顶/真透明/背景模糊/非矩形/跳过任务栏分页器/无边框/无焦点点击/焦点穿透

    qt 窗口置顶/真透明/背景模糊/非矩形/跳过任务栏分页器/无边框/无焦点点击/焦点穿透 窗口置顶qt 里是 setWindowFlags(Qt::WindowStaysOnTopHint)kde 里 ...

  10. QT5 动态链接库的创建和使用(QT自己做动态库给自己使用)

    记录一下QT5 动态链接库的创建和使用 在文章的最后有完成的代码供下载 1.创建动态链接库 先新建一个库项目 选择chose进入下一下页面,类型选择共享库,输入一个名称:我输入的是sld 再点击下一步 ...