02.手把手教你 .Net EasyUI DataGrid(数据表格排序)
发布时间
阅读量：
阅读量
在上一篇我已经介绍了从数据库加载数据到DataGrid的方法，那么今天的这篇博客是介绍，怎样排序你加载的数据。
（1）DataGrid的排序相关的属性，表2-1
| sortable | boolean | 如果为true，则允许列使用排序。 |
|---|
| sortName | string | 定义哪些列可以进行排序。 |
|---|
| sortOrder | string | 定义列的排序顺序，只能是'asc'或'desc'。 |
|---|
| remoteSort | boolean | 定义从服务器对数据进行排序。 |
|---|
（2）前台代码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="sort.aspx.cs" Inherits="web._20160521.sort" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="../js/jquery-1.7.1.min.js"></script>
<script src="../EasyUI/jquery.min.js"></script>
<script src="../EasyUI/jquery.easyui.min.js"></script>
<link href="../EasyUI/themes/icon.css" rel="stylesheet" />
<script src="../EasyUI/locale/easyui-lang-zh_CN.js"></script>
<link href="../EasyUI/themes/default/easyui.css" rel="stylesheet" />
<script type="text/javascript">
$(function () {
$('#tb1').datagrid({
url:'../20160521/sort.ashx',
width: 550,
title: '设备管理',
method:'get',
columns: [[
{ field: 'numID', title: '设备编号', width: 150,sortable:'true'},
{ field: '仪器名称', title: '名称', width: 150, sortable: 'true' },
{ field: '型号', title: '型号', width: 150, sortable: 'true' },
{ field: '单价', title: '价格', width: 100, sortable: 'true' }
]],
pagination: true,
pageSize:5,
pageList: [5, 10, 15],
sortName:'numID',
sortOrder: 'desc',
remoteSort:'false'
})
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="tb1"></table>
</div>
</form>
</body>
</html>效果图2-2：
要进行排序，必须根据前台传来的参数进行排序，所以用谷歌浏览器F12看看DataGrid控件提交了那些参数，图2-3：
可以看出，参数比上一节多了两个，sort与order，而我们在前台代码中设置了
sortName:'numID',
sortOrder: 'desc',
所以这两对是相互对应的，一个是字段，一个是排序方式，那么应该重写上一节课的分页查询方法，加上两个参数sort与order，
SQL查询语句：SELECT * FROM ( SELECT ROW_NUMBER() OVER (order by T.numID desc)AS Row, T.* from tb_equipment T ) TT WHERE TT.Row between 1 and 5
T.numID变成T.参数sort,desc变成参数order
（3）重写后的查询分页方法的代码（将其粘贴到上一节的帮助类中）：
/// <summary>
/// 查询分页数据，并排序
/// </summary>
/// <param name="sort">列字段</param>
/// <param name="order">排序asc或者desc</param>
/// <param name="startIndex"></param>
/// <param name="endIndex"></param>
/// <returns></returns>
public DataSet GetListByPage(string sort, string order, int startIndex, int endIndex)
{
StringBuilder strSql = new StringBuilder();
strSql.Append("SELECT * FROM ( ");
strSql.Append(" SELECT ROW_NUMBER() OVER (");
if (!string.IsNullOrEmpty(order.Trim())|| !string.IsNullOrEmpty(sort.Trim()))
{
strSql.Append("order by T." + sort + " " + order);
}
else
{
strSql.Append("order by T.ID asc");
}
strSql.Append(")AS Row, T.* from tb_equipment T ");
strSql.Append(" ) TT");
strSql.AppendFormat(" WHERE TT.Row between {0} and {1}", startIndex, endIndex);
return Query(strSql.ToString());
}（4）后台代码
新建一个新的一般处理程序，接受前台提交的两个新的参数order与sort，然后效用新的分页查询方法：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
namespace web._20160521
{
/// <summary>
/// sort1 的摘要说明
/// </summary>
public class sort1 : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
int page = 1, rows = 10;
//EasyUI自带的两个参数rows与page ,表示当前页与行数
if (context.Request.QueryString["rows"] != null)
{
rows = int.Parse(context.Request.QueryString["rows"].ToString().Trim());
}
if (context.Request.QueryString["page"] != null)
{
page = int.Parse(context.Request.QueryString["page"].ToString().Trim());
}
//查询分页 stratIndex endIndex
int stratIndex, endIndex;
stratIndex = (page - 1) * rows + 1;
endIndex = page * rows;
//查询排序 sort order
string sort = "numID", order = "desc";
if (context.Request.QueryString["sort"] != null)
{
sort = context.Request.QueryString["sort"].ToString().Trim();
}
if (context.Request.QueryString["order"] != null)
{
order = context.Request.QueryString["order"].ToString().Trim();
}
//查询数据库
HelperClass.SqlHelper sqlhelper = new HelperClass.SqlHelper();
//获取查询数据的行数
int count = sqlhelper.EUGetRecordCount();
//封装数据到dataset
DataSet ds = sqlhelper.GetListByPage(sort,order,stratIndex, endIndex);
//将dataset转化为Json格式
string strToJon = HelperClass.ToJson.DatasetJson(ds, count);
context.Response.Write(strToJon);
context.Response.End();
}
public bool IsReusable
{
get
{
return false;
}
}
}
}那么我们的排序功能已经实现了！
还有一个属性remoteSort没介绍，remoteSort设置为true，则执行ajax将sort与order两个参数提交到服务器，那么排序是在服务器上进行再显示到数据控件中，如果设置为false的话，那么排序是在浏览器上进行的，也就是排序，排的是浏览器内存的数据，我们的分页是真分页，每次只查5条，所以排序只在这5条中进行。
全部评论 (0)
还没有任何评论哟~