zoukankan      html  css  js  c++  java
  • 使用Dynamic LINQ实现Ext Grid的远程排序

    要实现Ext Grid的远程排序其实很简单,只要修改查询语句的排序关键字就可以了,但是,如果你的项目是使用Linq进行开发的,会发现动态修改排序关键字并不是那么容易的事,解决办法就是使用LINQ Dynamic Query LibraryLINQ 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",80,dataIndex:'id',sortable: true},

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

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

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

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

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

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

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

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

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

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

          {header: "Hiredate", 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>

     

       代码很简单,定义了一个StorePagetoolBarGrid。因为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

  • 相关阅读:
    oracle 10g 免安装客户端在windows下配置
    sql2005 sa密码
    使用windows live writer 有感
    windows xp SNMP安装包提取
    汉化groove2007
    迁移SQL server 2005 Reporting Services到SQL server 2008 Reporting Services全程截图操作指南
    foxmail 6在使用中的问题
    AGPM客户端连接不上服务器解决一例
    SpringSource Tool Suite add CloudFoundry service
    Java 之 SWing
  • 原文地址:https://www.cnblogs.com/hainange/p/6334343.html
Copyright © 2011-2022 走看看