`
webdev2014
  • 浏览: 679256 次
文章分类
社区版块
存档分类
最新评论

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

 
阅读更多

<!--[if gte mso 9]><xml> <w:WordDocument> <w:View>Normal</w:View> <w:Zoom>0</w:Zoom> <w:PunctuationKerning /> <w:DrawingGridVerticalSpacing>7.8 磅</w:DrawingGridVerticalSpacing> <w:DisplayHorizontalDrawingGridEvery>0</w:DisplayHorizontalDrawingGridEvery> <w:DisplayVerticalDrawingGridEvery>2</w:DisplayVerticalDrawingGridEvery> <w:ValidateAgainstSchemas /> <w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid> <w:IgnoreMixedContent>false</w:IgnoreMixedContent> <w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText> <w:Compatibility> <w:SpaceForUL /> <w:BalanceSingleByteDoubleByteWidth /> <w:DoNotLeaveBackslashAlone /> <w:ULTrailSpace /> <w:DoNotExpandShiftReturn /> <w:AdjustLineHeightInTable /> <w:BreakWrappedTables /> <w:SnapToGridInCell /> <w:WrapTextWithPunct /> <w:UseAsianBreakRules /> <w:DontGrowAutofit /> <w:UseFELayout /> </w:Compatibility> <w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel> </w:WordDocument> </xml><![endif]--><!--[if gte mso 9]><xml> <w:LatentStyles DefLockedState="false" LatentStyleCount="156"> </w:LatentStyles> </xml><![endif]--> <!--[if gte mso 10]> <mce:style><! /* Style Definitions */ table.MsoNormalTable {mso-style-name:普通表格; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-parent:""; mso-padding-alt:0cm 5.4pt 0cm 5.4pt; mso-para-margin:0cm; mso-para-margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:10.0pt; font-family:"Times New Roman"; mso-ansi-language:#0400; mso-fareast-language:#0400; mso-bidi-language:#0400;} table.MsoTableGrid {mso-style-name:网格型; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; border:solid windowtext 1.0pt; mso-border-alt:solid windowtext .5pt; mso-padding-alt:0cm 5.4pt 0cm 5.4pt; mso-border-insideh:.5pt solid windowtext; mso-border-insidev:.5pt solid windowtext; mso-para-margin:0cm; mso-para-margin-bottom:.0001pt; text-align:justify; text-justify:inter-ideograph; mso-pagination:none; font-size:10.0pt; font-family:"Times New Roman"; mso-ansi-language:#0400; mso-fareast-language:#0400; mso-bidi-language:#0400;} --> <!--[endif]-->

要实现Ext Grid的远程排序其实很简单，只要修改查询语句的排序关键字就可以了，但是，如果你的项目是使用Linq进行开发的，会发现动态修改排序关键字并不是那么容易的事，解决办法就是使用LINQ Dynamic Query Library。LINQ Dynamic Query Library是一个很实用很强大的库函数，通过该库，可以轻松实现一些需要通过动态参数实现的Linq查询。

本文将通过一个实例演示如何使用LINQ Dynamic Query Library实现Ext Grid的远程排序。

LINQ Dynamic Query Library可以在VS2008的例程里找到，也可以从以下链接下载：

本例子将使用SQL Server的“NORTHWND”样例数据库。Ext Grid显示的是Employees表的数据。

以下是客户端的完整代码：

<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>

<body scroll="no">

<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表数据只有9条，所以设置了每页3条数据。在Store定义中将remoteSort设置为true，说明数据要实现远程排序。Grid的每一列都将sortable属性设置为true，说明都可以通过单击Grid的列标题实现排序。

以下是服务器端的完整代码：

<%@ 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方法根据提交的参数action执行对应的方法。本文主要是执行List方法。

在List方法的开头首先获取了客户端提交的几个参数，参数对应的说明请看下表：

参数

说明

limit

每页总数，本例子是3

start

提取数据开始位置

sort

要排序的列

dir

排序顺序

获取数据后需要对排序的列名和顺序做一下转换，以下语句就是实现排序顺序的转换：

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

列名的转换则通过switch语句实现。如果在客户端定义的列名与数据库的真实列名相同，也可以不实施转换。不过，出于安全考虑，建议无论如何，还是要实行转换。

转换完成后，就可以定义查询语句了，相当的简单：

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

将列名变量和顺序变量组合成字符串作为OrderBy方法的参数就可以了。LINQ Dynamic Query Library会自动重新生成Linq语句执行。

后面的代码就是将查询结果组合成Json格式数据输出。

如果不使用LINQ Dynamic Query Library，远程排序的实现最直接的方法就是使用switch语句，根据提交的列和排序顺序写不同的Linq语句，就不如本例的代码那么简洁了。

以下是本例程的代码下载地址：

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

分享到：
| 《JavaScript凌厉开发--Ext详解与实践》一 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics