2013年10月9日 星期三

ASP.NET MVC 使用 jQuery EasyUI DataGrid - 排序 (Sorting)

經過兩篇的說明之後,現在我們繼續往進階一點的功能前進,這一篇將會說明到如何處理 DataGrid 的排序功能,另外會用到之前曾經介紹過的 Dynamic LINQ ( Dynamic Expression API )。

 


Step.1

要讓 DataGrid 欄位可已有排序的功能,首先要修改 Javascript 程式裡 DataGrid 的 Columns 設定,在需要排序的欄位加上「sortable: true」,

image

 

Step.2

前端 Javascript 程式裡對 DataGrid 的設定除了上面所說的在每個欄位裡增加「sortable: true」之外,可以在 DataGrid 增加兩個屬性的設定,分別為「sortName」與「sortOrder」,這兩個屬性是設定 DataGrid 一開始於初始狀態載入資料時的所排序的欄位以及順序,sortName 只能填入一個 Column Name,而 sortOrder 只能設定 asc 或 desc。

image

 

Step.3

接著要修改 CustomerController 與 CustomerService 的程式,

CustomerController

在 GetGridJSON 方法再增加兩個變數,分別為 sort 與 order,並且設定一開始的排序預設值,

image

 

Step.4

在網站專案裡透過 NuGet 加入 Dynamic Expression API,這是要用來做排序欄位的動態設定。

image

安裝好「Dynamic Expression API」之後,先在 CustomerService 加入 Namespce 的使用,

image

有關 Dynamic Expression API 的使用方式,可以參考之前我所發佈的文章內容:

Dynamic LINQ + Entity Framework - Part.1:MS SQL Server, LINQPad
Dynamic LINQ + Entity Framework - Part.2:Dynamic Expression API (NuGet)
Dynamic LINQ + Entity Framework - Part.3:ASP.NET MVC 應用
Dynamic LINQ + Entity Framework - Part.4:ASP.NET MVC 進階應用

 

Step.5

接著要來修改 CustomerService 的程式,原本的 GetJsonForGrid 這個方法再加入兩個參數:propertyName,  order,然後也改寫程式內容,

image

修改了 CustomerService 的 GetJsonForGrid method 之後,記得也要修改 CustomerController 的內容,

image

 

網頁執行:

DataGrid 載入資料的初始狀態,一開始的排序欄位與順序就是我們所設定的 sortName 與 sortOrder 內容,

image

image

 

image

image

 

image

image

 

修改:

為預防傳入的 order 與 sort 值有錯誤而造成程式執行的錯誤,所以在 CustomerService 裡針對傳入的 propertyName 會檢查是否為 Customer 的屬性名稱之一,另外 order 也會檢查是否為 asc 或 desc,如果 propertyName 或 order 的值有錯誤,就會使用預設值。

order 排序的降冪與升冪判斷比較好解決,

image

而要判斷傳進來的 propertyName 是否為 Customer 的 Properties 之一,這邊可以參考之前曾經介紹過的方法「Entity Framework 5 - 取得 Entity 的 Property Names 與 KeyMembers」,增加的程式內容如下,

image

補充 EntityHelper.cs 的程式碼,如下:

public class EntityHelper
{
    /// <summary>
    /// Entities the property names.
    /// </summary>
    /// <typeparam name="T"></typeparam>
    /// <returns></returns>
    public static IEnumerable<string> EntityPropertyNames<T>()
    {
        string entityName = typeof(T).Name;
 
        var members = new Dictionary<string, IEnumerable<string>>();
 
        var mw = new MetadataWorkspace(
            new[] { "res://*/" },
            new[] { Assembly.GetExecutingAssembly() });
 
        var tables = mw.GetItems(DataSpace.CSpace);
 
        foreach (var e in tables.OfType<EntityType>())
        {
            members.Add
                (
                    e.Name,
                    e.Members
                        .Where(m => m.TypeUsage.EdmType.BuiltInTypeKind == BuiltInTypeKind.PrimitiveType)
                        .Select(m => m.Name)
                );
        }
 
        return members.Where(x => x.Key == entityName).Select(x => x.Value).FirstOrDefault();
    }
 
}

另外 CustomerService.cs 的程式碼,如下:

public class CustomerService
{
    private NorthwindEntities db = new NorthwindEntities();
 
    /// <summary>
    /// Totals the count.
    /// </summary>
    /// <returns></returns>
    public int TotalCount()
    {
        return db.Customers.Count();
    }
 
    /// <summary>
    /// Gets the json for grid.
    /// </summary>
    /// <param name="page">The page.</param>
    /// <param name="pageSize">Size of the page.</param>
    /// <param name="propertyName">The sort.</param>
    /// <param name="order">The order.</param>
    /// <returns></returns>
    public JArray GetJsonForGrid(
        int page = 1,
        int pageSize = 10,
        string propertyName = "CustomerID",
        string order = "asc")
    {
        //取得 Entity 所有的 Property 名稱
        var entityPropertyNames = EntityHelper.EntityPropertyNames<Customer>();
 
        if (!entityPropertyNames.Contains(propertyName))
        {
            propertyName = "CustomerID";
        }
 
        if (!(order.Equals("asc", StringComparison.OrdinalIgnoreCase)
              || order.Equals("desc", StringComparison.OrdinalIgnoreCase)))
        {
            order = "asc";
        }
 
        JArray ja = new JArray();
 
        var query = db.Customers.AsQueryable();
        query = query.OrderBy(string.Format("{0} {1}", propertyName, order));
        query = query.Skip((page - 1)*pageSize).Take(pageSize);
 
        foreach (var item in query)
        {
            var itemObject = new JObject
            {
                {"CustomerID", item.CustomerID},
                {"CompanyName", item.CompanyName},
                {"ContactName", item.ContactName},
                {"ContactTitle", item.ContactTitle},
                {"Address", item.Address},
                {"City", item.City},
                {"Region", item.Region},
                {"PostalCode", item.PostalCode},
                {"Country", item.Country},
                {"Phone", item.Phone},
                {"Fax", item.Fax}
            };
            ja.Add(itemObject);
        }
        return ja;
    }
 
}

 

執行結果:

這邊的執行結果與修改前的並不會有差別,這邊以動畫讓大家了解 jQuery EasyUI DataGrid 的排序操作。

jquery_easyui_datagrid_sorting

 


延伸閱讀:

Dynamic LINQ + Entity Framework - Part.1:MS SQL Server, LINQPad
Dynamic LINQ + Entity Framework - Part.2:Dynamic Expression API (NuGet)
Dynamic LINQ + Entity Framework - Part.3:ASP.NET MVC 應用
Dynamic LINQ + Entity Framework - Part.4:ASP.NET MVC 進階應用

Entity Framework 5 - 取得 Entity 的 Property Names 與 KeyMembers

 

以上

沒有留言:

張貼留言

提醒

千萬不要使用 Google Talk (Hangouts) 或 Facebook 及時通訊與我聯繫、提問,因為會掉訊息甚至我是過了好幾天之後才發現到你曾經傳給我訊息過,請多多使用「詢問與建議」(在左邊,就在左邊),另外比較深入的問題討論,或是有牽涉到你實作程式碼的內容,不適合在留言板裡留言討論,請務必使用「詢問與建議」功能(可以夾帶檔案),謝謝。