02.手把手教你 .Net EasyUI DataGrid(資料表格排序)
阿新 • • 發佈：2018-12-31
在上一篇我已經介紹了從資料庫載入資料到DataGrid的方法，那麼今天的這篇部落格是介紹，怎樣排序你載入的資料。
（1）DataGrid的排序相關的屬性，表2-1
| sortable | boolean | 如果為true，則允許列使用排序。 |
| sortName | string | 定義哪些列可以進行排序。 |
| sortOrder | string | 定義列的排序順序，只能是'asc'或'desc'。 |
| remoteSort | boolean | 定義從伺服器對資料進行排序。 |
（2）前臺程式碼
效果圖2-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>
要進行排序，必須根據前臺傳來的引數進行排序，所以用谷歌瀏覽器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;
}
}
}
}