效果:
红框的字段看,为设置了,列排序,向后台Post数据sort/order。
原理:向后台POST数据,sort/post数据。
html代码:
<table id="tab"></table>
JS代码:
$(function () { $(‘#tab‘).datagrid({ width: 500,//宽度 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: 1,//初始化的时候在第几页 pageSize: 5,//,每页显示的条数 pageList: [5, 10, 15],//每页显示的条数 //==========================================================================================// //===================================== 排序 ===============================================// //通过POST传递到后台,然后进行排序。 sortName: ‘createtime‘, sortOrder: ‘desc‘, //==========================================================================================// }); })
一般处理程序(ashx)后台数据:
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 == 1) { //加载第一页 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 != 1) { //加载非第一页 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 - 1) * 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 组建 - [ 排序功能 ]
原文:http://www.cnblogs.com/KTblog/p/4917108.html