當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

使用Dynamic LINQ实现Ext Grid的远程排序

發(fā)布時間：2024/9/20 编程问答 31 豆豆

生活随笔收集整理的這篇文章主要介紹了使用Dynamic LINQ实现Ext Grid的远程排序小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

要實現(xiàn)Ext Grid的遠程排序其實很簡單，只要修改查詢語句的排序關(guān)鍵字就可以了，但是，如果你的項目是使用Linq進行開發(fā)的，會發(fā)現(xiàn)動態(tài)修改排序關(guān)鍵字并不是那么容易的事，解決辦法就是使用LINQ Dynamic Query Library。LINQ Dynamic Query Library是一個很實用很強大的庫函數(shù)，通過該庫，可以輕松實現(xiàn)一些需要通過動態(tài)參數(shù)實現(xiàn)的Linq查詢。

本文將通過一個實例演示如何使用LINQ Dynamic Query Library實現(xiàn)Ext Grid的遠程排序。

LINQ Dynamic Query Library可以在VS2008的例程里找到，也可以從以下鏈接下載：

VB Dynamic Query Library (included in the /Language Samples/LINQ Samples/DynamicQuery directory)
C# Dynamic Query Library (included in the /LinqSamples/DynamicQuery directory)

本例子將使用SQL Server的“NORTHWND”樣例數(shù)據(jù)庫。Ext Grid顯示的是Employees表的數(shù)據(jù)。

以下是客戶端的完整代碼：

<html>

<head>

? <title></title>

? <meta http-equiv="Content-Type" content="text/html; charset=utf-8" xmlns="" />

? <link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css" />

? <link rel="stylesheet" type="text/css" href="css/application.css" />

</head>

? <script type="text/javascript" src="lib/ext/ext-base.js"></script>

? <script type="text/javascript" src="lib/ext/ext-all.js"></script>

? <script type="text/javascript" src="lib/ext/locale/ext-lang-zh_CN.js"></script>

? <div id="loading-mask"></div>

? <div id="loading">

??? <div class="loading-indicator"><img alt="" src="lib/ext/resources/images/default/shared/large-loading.gif" width="32" height="32" style="margin-right:8px;" align="absmiddle"/>正在加載...</div>

? </div>

? <script type="text/javascript">

var app={}

Ext.onReady(function(){

?????? Ext.BLANK_IMAGE_URL='lib/ext/resources/images/default/s.gif';

? Ext.QuickTips.init();

?????? Ext.form.Field.prototype.msgTarget = 'side';

?????? Ext.Msg.minWidth=300;

?????? app.store=new Ext.data.Store({

??? url:'employees_action.ashx?act=list',

??? baseParams:{},

??? reader:new Ext.data.JsonReader({

??? ?????? totalProperty: "results",

?????? ? ??? root:"rows",

? ?????????? id:"id"

????????????? },[{name: 'id',type:'int'},{name:'lastname'},{name:'firstname'},

???????????????????? {name:'title'},{name:'titleofcourtesy'},{name:'city'},

????????????? ?????? {name:'address'},{name:'region'},{name:'postalcode'},{name:'homephone'},{name:'country'},

? ?????????? {name:'birthdate',type: 'date',dateFormat:'Y-m-d'},

? ?????????? {name:'hiredate',type: 'date',dateFormat:'Y-m-d'}

????????????? ]),

??? remoteSort: true

? }) //store

? app.pageToolbar=new Ext.PagingToolbar({

? ??? pageSize:3,displayInfo:true,store:app.store

? ??? });

? app.grid=new Ext.grid.GridPanel({layout:'fit',

? ??? store:app.store, autoExpandColumn:2,tbar:app.pageToolbar,

??? columns:

??? [

????? {id:'id',header: "ID",width:80,dataIndex:'id',sortable: true},

????? {header: "FirstName",width:80, dataIndex:'firstname',sortable: true},

????? {header: "LastName",width:80, dataIndex:'lastname',sortable: true},

????? {header: "Title",width:80, dataIndex:'title',sortable: true},

????? {header: "Title of Courtesy",width:80, dataIndex:'titleofcourtesy',sortable: true},

????? {header: "City",width:80, dataIndex:'city',sortable: true},

????? {header: "Region",width:80, dataIndex:'region',sortable: true},

????? {header: "Country",width:80, dataIndex:'country',sortable: true},

????? {header: "Postalcode",width:80, dataIndex:'postalcode',sortable: true},

????? {header: "Homephone",width:80, dataIndex:'homephone',sortable: true},

????? {header: "Birthdate", width: 120,dataIndex:'birthdate',sortable: true,renderer:Ext.util.Format.dateRenderer('Y-m-d')},

????? {header: "Hiredate", width: 120,dataIndex:'hiredate',sortable: true,renderer:Ext.util.Format.dateRenderer('Y-m-d')}

??? ]

? })

?????? var viewport = new Ext.Viewport({layout:'fit',items:[app.grid]});

?????? app.store.load();

??????

?????? setTimeout(function(){

??? Ext.get('loading').remove();

??? Ext.get('loading-mask').fadeOut({remove:true});

? }, 250);

})//onReady

</script>

</body>

</html>

?? 代碼很簡單，定義了一個Store、PagetoolBar和Grid。因為Employees表數(shù)據(jù)只有9條，所以設(shè)置了每頁3條數(shù)據(jù)。在Store定義中將remoteSort設(shè)置為true，說明數(shù)據(jù)要實現(xiàn)遠程排序。Grid的每一列都將sortable屬性設(shè)置為true，說明都可以通過單擊Grid的列標題實現(xiàn)排序。

以下是服務(wù)器端的完整代碼：

<%@ WebHandler Language="C#" Class="employees_action" Debug="true" %>

using System;

using System.Web;

using System.Linq;

using System.Linq.Dynamic;

using System.Collections;

using System.Collections.Generic;

using System.Web.Security;

using LitJson;

public class employees_action : IHttpHandler

{

???

? public void ProcessRequest (HttpContext context) {

??? string action = context.Request.Params["act"];

??? string outputStr = "";

??? if (action == null) action = "";

??? switch (action.ToLower())

??? {

????? case "list":

??????? outputStr = List(context);

??????? break;

????? default:

??????? outputStr = HDQ.Functions.WriteJsonResult(false, "錯誤的操作類型！");

??????? break;

??? }

??? context.Response.ContentType = "text/javascript";

??? context.Response.Write(outputStr);

? }

? public bool IsReusable {

??? get {

??????? return false;

??? }

? }

? private string List(HttpContext context)

? {

? ??int limit=0;

??? int.TryParse(context.Request.Params["limit"], out limit);

??? if (limit == 0) limit = 3;

??? int start=0;

??? int.TryParse(context.Request.Params["start"], out start);

??? string orderColumn = context.Request.Params["sort"];

??? string orderBy = context.Request.Params["dir"] == "ASC" ? "" : "descending";

??? switch (orderColumn)

??? {

????? case "id":

??????? orderColumn = "EmployeeID";

??????? break;

????? case "lastname":

??????? orderColumn = "LastName";

??????? break;

????? case "firstname":

??????? orderColumn = "FirstName";

??????? break;

????? case "title":

??????? orderColumn = "Title";

??????? break;

????? case "titleofcourtesy":

??????? orderColumn = "TitleOfCourtesy";

??????? break;

????? case "birthdate":

??????? orderColumn = "BirthDate";

??????? break;

????? case "hiredate":

??????? orderColumn = "HireDate";

??????? break;

????? case "address":

??????? orderColumn = "Address";

??????? break;

????? case "city":

??????? orderColumn = "City";

??????? break;

????? case "region":

??????? orderColumn = "Region";

??????? break;

????? case "postalcode":

??????? orderColumn = "PostalCode";

??????? break;

????? case "country":

??????? orderColumn = "Country";

??????? break;

????? case "homephone":

??????? orderColumn = "HomePhone";

???? ???break;

????? default:

??????? orderColumn = "EmployeeID";

??????? break;

??? }

??? DBDemosDataContext dc = new DBDemosDataContext();

??? int recordCount=0;

??? JsonWriter jw = new JsonWriter();

??? jw.WriteObjectStart();

??? jw.WritePropertyName("rows");

??? jw.WriteArrayStart();

??? recordCount = dc.Employees.Count();

??? if (start > recordCount) start = 0;

??? var q=dc.Employees.OrderBy(orderColumn + " " + orderBy).Skip(start).Take(limit);

??? foreach (var c in q)

??? {

????? jw.WriteObjectStart();

?? ???jw.WritePropertyName("id");

????? jw.Write(c.EmployeeID);

????? jw.WritePropertyName("firstname");

????? jw.Write(c.FirstName);

????? jw.WritePropertyName("lastname");

????? jw.Write(c.LastName);

????? jw.WritePropertyName("title");

????? jw.Write(c.Title);

????? jw.WritePropertyName("titleofcourtesy");

????? jw.Write(c.TitleOfCourtesy);

????? jw.WritePropertyName("address");

????? jw.Write(c.Address);

????? jw.WritePropertyName("city");

????? jw.Write(c.City);

????? jw.WritePropertyName("region");

????? jw.Write(c.Region);

????? jw.WritePropertyName("country");

????? jw.Write(c.Country);

????? jw.WritePropertyName("postalcode");

????? jw.Write(c.PostalCode);

????? jw.WritePropertyName("homephone");

????? jw.Write(c.HomePhone);

????? jw.WritePropertyName("birthdate");

????? jw.Write(c.BirthDate == null ? "" : Convert.ToDateTime(c.BirthDate).ToString("yyyy-MM-dd"));

????? jw.WritePropertyName("hiredate");

????? jw.Write(c.HireDate == null ? "" : Convert.ToDateTime(c.HireDate).ToString("yyyy-MM-dd"));

????? jw.WriteObjectEnd();

??? }

???

??? jw.WriteArrayEnd();

??? jw.WritePropertyName("results");

??? jw.Write(recordCount.ToString());

??? jw.WriteObjectEnd();

??? return jw.ToString();

? }

}

代碼中ProcessRequest方法根據(jù)提交的參數(shù)action執(zhí)行對應(yīng)的方法。本文主要是執(zhí)行List方法。

在List方法的開頭首先獲取了客戶端提交的幾個參數(shù)，參數(shù)對應(yīng)的說明請看下表：

參數(shù)	說明
limit	每頁總數(shù)，本例子是3
start	提取數(shù)據(jù)開始位置
sort	要排序的列
dir	排序順序

獲取數(shù)據(jù)后需要對排序的列名和順序做一下轉(zhuǎn)換，以下語句就是實現(xiàn)排序順序的轉(zhuǎn)換：

string orderBy = context.Request.Params["dir"] == "ASC" ? "" : "descending";

列名的轉(zhuǎn)換則通過switch語句實現(xiàn)。如果在客戶端定義的列名與數(shù)據(jù)庫的真實列名相同，也可以不實施轉(zhuǎn)換。不過，出于安全考慮，建議無論如何，還是要實行轉(zhuǎn)換。

轉(zhuǎn)換完成后，就可以定義查詢語句了，相當?shù)暮唵?#xff1a;

var q=dc.Employees.OrderBy(orderColumn + " " + orderBy).Skip(start).Take(limit);

將列名變量和順序變量組合成字符串作為OrderBy方法的參數(shù)就可以了。LINQ Dynamic Query Library會自動重新生成Linq語句執(zhí)行。

后面的代碼就是將查詢結(jié)果組合成Json格式數(shù)據(jù)輸出。

如果不使用LINQ Dynamic Query Library，遠程排序的實現(xiàn)最直接的方法就是使用switch語句，根據(jù)提交的列和排序順序?qū)懖煌?/span>Linq語句，就不如本例的代碼那么簡潔了。

以下是本例程的代碼下載地址：

http://download.csdn.net/source/1212462

轉(zhuǎn)載于:https://www.cnblogs.com/hainange/archive/2009/04/15/6334343.html

總結(jié)

以上是生活随笔為你收集整理的使用Dynamic LINQ实现Ext Grid的远程排序的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。