網頁

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

 

以上

沒有留言:

張貼留言