现在的位置: 首页 > 综合 > 正文

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

2013年06月14日 ⁄ 综合 ⁄ 共 7814字 ⁄ 字号 小 中 大 ⁄ 评论关闭



要实现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

返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞