ExtJS与.NET结合开发实例(Grid之数据显示、分页、排序篇)

    最近园子里有很多朋友关心ExtJS，我最近写了一个项目管理工具用到ExtJS,我结合.NET写了个关于Grid实现的一个实例供需要的朋友参考。
    本实例开发环境是：Windows XP + Sql Server 2005 + IIS6+VS 2008 Beta2(.NET Framework3.5)
    实现步骤：
    1.取数据源
      这里是从数据库里读取数据生产JSON的方式供ExtJS Grid调用.
      (1)用Scott Guthrie提供的生产JSON格式的类,这篇文章可以访问:http://weblogs.asp.net/scottgu/archive/2007/10/01/tip，它的译文请访问:http://blog.joycode.com/scottgu/archive/2007/10/10/109268.aspx
      建一个类文件JSONHelper.cs,代码如下：

JSONHelper.cs
 1using System;
 2using System.Collections.Generic;
 3using System.Text;
 4using System.Web.Script.Serialization;
 5namespace Web.Components
 6{
 7    public static class JSONHelper
 8    {
 9        public static string ToJSON(this object obj)
10        {
11            JavaScriptSerializer serializer = new JavaScriptSerializer();
12            return serializer.Serialize(obj);
13        }
14
15        public static string ToJSON(this object obj, int recursionDepth)
16        {
17            JavaScriptSerializer serializer = new JavaScriptSerializer();
18            serializer.RecursionLimit = recursionDepth;
19            return serializer.Serialize(obj);
20        }
21    }
22}
23

      (2)利用LINQ读取数据记录，关于LINQ方面的文章参考Scott Guthrie的LINQ to SQL系列文章
         为了方便ExtJS AJAX方式的调用，这里建一个ASPX页面，起名为：ProjectBaseInfo.aspx，代码如下：

ProjectBaseInfo.aspx.cs
  1using System;
  2using System.Data;
  3using System.Configuration;
  4using System.Collections;
  5using System.Linq;
  6using System.Web;
  7using System.Web.Security;
  8using System.Web.UI;
  9using System.Web.UI.WebControls;
 10using System.Web.UI.WebControls.WebParts;
 11using System.Web.UI.HtmlControls;
 12using System.Xml.Linq;
 13using BusinessObject.Projects; //dbml文件的引用
 14using System.Data.OracleClient;
 15using Database;
 16using Web.Components;
 17namespace Web.Projects.JsonDataSource
 18{
 19    public partial class ProjectBaseInfo : System.Web.UI.Page
 20    {
 21        protected string strJsonSource=string.Empty;
 22        protected void Page_Load(object sender, EventArgs e)
 23        {
 24            int start=int.Parse(Request.Form["start"]+"");      //分页需要limit,start是mysql里用的（或取当页开始的记录标识编号）
 25            int limit = int.Parse(Request.Form["limit"] + "");  //或取每页记录数
 26            string sort = Request.Form["sort"] + "";            //或取排序方向
 27            string dir = Request.Form["dir"] + "";              //或取所要排序的字段名
 28            GetJsonSouceString(start,limit,sort,dir);
 29        }
 30
 31        private void GetJsonSouceString(int start,int limit,string sort,string dir)
 32        {
 33            ProjectBaseInfoDataContext db = new ProjectBaseInfoDataContext();
 34            var query = from p in db.PROJECT_BASE_INFOs
 35                        select new { p.PROJECT_NO, p.PROJECT_NAME, p.PROJECT_DEPT_NO, p.PROJECT_MANAGER, p.PROJECT_CURRENT_STATUS, PROJECT_START_DATE = p.PROJECT_START_DATE + "", PROJECT_FINISH_DATE = p.PROJECT_FINISH_DATE + "", PROJECT_REAL_START_DATE = p.PROJECT_REAL_START_DATE + "", PROJECT_REAL_FINISH_DATE = p.PROJECT_REAL_FINISH_DATE + "", p.PROJECT_ALIAS, p.PROJECT_TYPE, p.PROJECT_LEADER, p.PROJECT_MEMO };   //类似PROJECT_REAL_FINISH_DATE=p.PROJECT_REAL_FINISH_DATE+"的处理了Grid中日期格式显示的问题
 36            排序字段和排序方向#region 排序字段和排序方向
 37            if (sort != "" && dir != "")
 38            {
 39                switch (sort)
 40                {
 41                    case "PROJECT_NO":
 42                        if (dir == "ASC")
 43                        {
 44                            query = query.OrderBy(p => p.PROJECT_NO);
 45                        }
 46                        else
 47                        {
 48                            query = query.OrderByDescending(p => p.PROJECT_NO);
 49                        }
 50                        break;
 51                    case "PROJECT_NAME":
 52                        if (dir == "ASC")
 53                        {
 54                            query = query.OrderBy(p => p.PROJECT_NAME);
 55                        }
 56                        else
 57                        {
 58                            query = query.OrderByDescending(p => p.PROJECT_NAME);
 59                        }
 60                        break;
 61                    case "PROJECT_DEPT_NO":
 62                        if (dir == "ASC")
 63                        {
 64                            query = query.OrderBy(p => p.PROJECT_DEPT_NO);
 65                        }
 66                        else
 67                        {
 68                            query = query.OrderByDescending(p => p.PROJECT_DEPT_NO);
 69                        }
 70                        break;
 71                    case "PROJECT_MANAGER":
 72                        if (dir == "ASC")
 73                        {
 74                            query = query.OrderBy(p => p.PROJECT_MANAGER);
 75                        }
 76                        else
 77                        {
 78                            query = query.OrderByDescending(p => p.PROJECT_MANAGER);
 79                        }
 80                        break;
 81                    case "PROJECT_CURRENT_STATUS":
 82                        if (dir == "ASC")
 83                        {
 84                            query = query.OrderBy(p => p.PROJECT_CURRENT_STATUS);
 85                        }
 86                        else
 87                        {
 88                            query = query.OrderByDescending(p => p.PROJECT_CURRENT_STATUS);
 89                        }                        
 90                        break;
 91                    case "PROJECT_START_DATE":
 92                        if (dir == "ASC")
 93                        {
 94                            query = query.OrderBy(p => p.PROJECT_START_DATE);
 95                        }
 96                        else
 97                        {
 98                            query = query.OrderByDescending(p => p.PROJECT_START_DATE);
 99                        }
100                        break;
101                    case "PROJECT_FINISH_DATE":
102                        if (dir == "ASC")
103                        {
104                            query = query.OrderBy(p => p.PROJECT_FINISH_DATE);
105                        }
106                        else
107                        {
108                            query = query.OrderByDescending(p => p.PROJECT_FINISH_DATE);
109                        }                       
110                        break;
111                    case "PROJECT_REAL_START_DATE":
112                        if (dir == "ASC")
113                        {
114                            query = query.OrderBy(p => p.PROJECT_REAL_START_DATE);
115                        }
116                        else
117                        {
118                            query = query.OrderByDescending(p => p.PROJECT_REAL_START_DATE);
119                        }
120                        break;
121                    case "PROJECT_REAL_FINISH_DATE":
122                        if (dir == "ASC")
123                        {
124                            query = query.OrderBy(p => p.PROJECT_REAL_FINISH_DATE);
125                        }
126                        else
127                        {
128                            query = query.OrderByDescending(p => p.PROJECT_REAL_FINISH_DATE);
129                        }                       
130                        break;
131                    default:
132                        break;
133                }
134            }
135            #endregion
136
137            int iCount = query.Count();   //所要记录数
138            int PageNum = start / limit;  //共有页数 
139            int PageSize = limit;
140            query = query.Skip(PageSize * PageNum).Take(PageSize);  //当前页记录
141            string JsonSource= query.ToJSON();                      //当前页记录转成JSON格式
142            strJsonSource = @"{""totalCount"":"""+iCount+"";
143            strJsonSource = strJsonSource + @""",""data"":" + JsonSource + "}";  //Grid的分页区显示所有记录数增加totalCount信息
144        }
145    }
146}
147

ProjectBaseInfo.aspx中的代码为：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ProjectBaseInfo.aspx.cs" Inherits="Web.Projects.JsonDataSource.ProjectBaseInfo" %>
<%=strJsonSource %>

    至此，已完成了取数据源。
   2.页面客户端
     (1)下载ExtJS库，请访问：http://extjs.com/。
     (2)在你的WEB工程中建一个ExtJS目录。把下载的包里的目录都COPY进来（为了简便起见）。
     (3)建一个ProjectLists.html页面，代码如下：

ProjectLists.html
 1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2<html xmlns="http://www.w3.org/1999/xhtml">
 3<head runat="server">
 4    <title>项目一览表</title>
 5    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
 6    <link rel="stylesheet" type="text/css" href="../Resources/css/ext-all.css" />
 7    <!-- GC -->
 8    <!-- LIBS -->
 9    <script type="text/javascript" src="../Adapter/ext/ext-base.js"></script>
10    <!-- ENDLIBS -->
11    <script type="text/javascript" src="../Script/ext-all.js"></script>
12
13    <script type="text/javascript" src="../Script/GridForProjectLists.js"></script>
14
15    <link rel="stylesheet" type="text/css" href="../CSS/Grid.css" />
16    <link rel="stylesheet" type="text/css" href="../CSS/Forms.css" />
17     <link rel="stylesheet" type="text/css" href="../CSS/Combos.css" />
18    <!-- Common Styles for the Projects -->
19    <style type="text/css">
20        body .x-panel
21        {}{
22            margin-bottom: 20px;
23        }
24        .icon-grid
25        {}{
26            background-image: url(../Images/icons/grid.png) !important;
27        }
28        #button-grid .x-panel-body
29        {}{
30            border: 1px solid #99bbe8;
31            border-top: 0 none;
32        }
33        .add
34        {}{
35            background-image: url(../Images/icons/add.gif) !important;
36        }
37        .search
38        {}{
39            background-image: url(../Images/icons/plugin.gif) !important;
40        }
41        .remove
42        {}{
43            background-image: url(../Images/icons/delete.gif) !important;
44        }
45        .save
46        {}{
47            background-image: url(../Images/icons/save.gif) !important;
48        }
49        .ext-mb-save
50        {}{
51            background: transparent url(../Images/download.gif) no-repeat top left;
52            height: 46px;
53        }
54    </style>
55</head>
56
57<body>
58</body>
59</html>

（注：请注意JS引用的路径）
   (1)新建GridForProjectLists.js文件（这个才是核心）
代码如下：

GridForProjectLists.js
  1/**//*
  2 * Ext JS Library 2.0 Beta 1
  3 * Copyright(c) 2006-2007, Ext JS, LLC.
  4 * licensing@extjs.com
  5 * 
  6 * http://extjs.com/license
  7 */
  8Ext.onReady(function(){
  9    var win;    
 10    var newwin;
 11    Ext.QuickTips.init();
 12    // create the Data Store
 13    var ds = new Ext.data.GroupingStore({
 14        // load using script tags for cross domain, if the data in on the same domain as
 15        // this page, an HttpProxy would be better
 16        proxy: new Ext.data.HttpProxy({
 17            url: '../Projects/JsonDataSource/ProjectBaseInfo.aspx'
 18        }),
 19
 20        // create reader that reads the project records
 21        reader: new Ext.data.JsonReader({
 22            root: 'data',
 23            totalProperty: 'totalCount'
 24        }, [
 25            {name:'PROJECT_NO',              type:'string'},
 26            {name:'PROJECT_NAME',            type:'string'},
 27            {name:'PROJECT_ALIAS',           type:'string'},
 28            {name:'PROJECT_DEPT_NO',         type:'string'},
 29            {name:'PROJECT_MANAGER',         type:'string'},
 30            {name:'PROJECT_LEADER',          type:'string'},
 31            {name:'PROJECT_CURRENT_STATUS',  type:'string'},
 32            {name:'PROJECT_START_DATE',      type:'date'},
 33            {name:'PROJECT_FINISH_DATE',     type:'date'},
 34            {name:'PROJECT_REAL_START_DATE', type:'date'},
 35            {name:'PROJECT_REAL_FINISH_DATE',type:'date'},
 36            {name:'PROJECT_MEMO',            type:'string'}
 37        ]),
 38        //groupField:'PROJECT_DEPT_NO',
 39        remoteSort: true
 40    });
 41    ds.setDefaultSort('PROJECT_NAME', 'desc');
 42
 43    // pluggable renders  
 44    function renderProject(value, p, record){
 45    
 46        return String.format(
 47                '<img border=0 src="../Images/icons/application_view_list.png" id="btnView_{0}"  style="cursor:hand" alt="浏览"> &nbsp;&nbsp; <a href="ProjectDetail.aspx?ProjectNo={0}" target="_blank"><img border=0 src="../Images/icons/application_view_list.png"  style="cursor:hand" alt="编辑"></a> &nbsp;&nbsp; <a href="ProjectDetail.aspx?ProjectNo={0}" target="_blank"><img border=0 src="../Images/icons/cross.gif" style="cursor:hand" alt="删除"></a>',
 48                 record.data.PROJECT_NO);
 49    }
 50    
 51    // the column model has information about grid columns
 52    // dataIndex maps the column to the specific data field in
 53    // the data store
 54    var nm = new Ext.grid.RowNumberer();
 55    var sm = new Ext.grid.CheckboxSelectionModel();  // add checkbox column
 56    var cm = new Ext.grid.ColumnModel([nm,sm,
 57        {id:'PROJECT_NO',header:"项目编号",dataIndex: 'PROJECT_NO', width: 40, align:'center'},
 58        {header:"项目名称",dataIndex: 'PROJECT_NAME',          width: 100,align:'left'  },//,renderer: renderProject},
 59        {header:"项目简称",dataIndex: 'PROJECT_ALIAS',         width: 50, align:'left'},
 60        {header:"部门",dataIndex: 'PROJECT_DEPT_NO',           width: 50, align:'center'},
 61        {header:"项目经理",  dataIndex: 'PROJECT_MANAGER',       width: 40, align:'center'},
 62        {header:"开发经理",  dataIndex: 'PROJECT_LEADER',       width: 40, align:'center'},
 63        {header:"当前状态",dataIndex: 'PROJECT_CURRENT_STATUS',width: 40, align:'center'},
 64        {header:"预计开始日期",renderer: Ext.util.Format.dateRenderer('Y-m-d'),dataIndex: 'PROJECT_START_DATE',width: 50, align:'center'},
 65        {header:"预计结束日期",renderer: Ext.util.Format.dateRenderer('Y-m-d'),dataIndex: 'PROJECT_FINISH_DATE',width: 50, align:'center'},
 66        {header:"实际开始日期",renderer: Ext.util.Format.dateRenderer('Y-m-d'),dataIndex: 'PROJECT_REAL_START_DATE',width: 50, align:'center'},
 67        {header:"实际结束日期",renderer: Ext.util.Format.dateRenderer('Y-m-d'),dataIndex: 'PROJECT_REAL_FINISH_DATE',width: 50, align:'center'},
 68        {header:"备注",dataIndex: 'PROJECT_MEMO',width: 50, align:'left'},
 69        {id:'PROJECT_NO',header:"操作",dataIndex: 'PROJECT_NO', width: 60, align:'center',renderer:renderProject,sortable: false}
 70    ]);
 71
 72    //hide column
 73    cm.setHidden(4, !cm.isHidden(4));   //隐藏项目简称列
 74    cm.setHidden(7, !cm.isHidden(7));   //隐藏开发经理列
 75    cm.setHidden(13, !cm.isHidden(13)); //隐藏备注列
 76    // by default columns are sortable
 77    cm.defaultSortable = true;
 78    var gdProjects = new Ext.grid.GridPanel({
 79        frame:true,
 80        collapsible: true,
 81        animCollapse: false,
 82        //el:'projects-grid',
 83        width :965,
 84        height:530,
 85        title:'项目一览表',
 86        iconCls: 'icon-grid',
 87        renderTo: document.body,
 88        store: ds,
 89        cm: cm,
 90        sm: sm,
 91        trackMouseOver:true,
 92        loadMask: {msg:'正在加载数据，请稍侯……'},
 93        //loadMask: true,
 94        viewConfig: {
 95            forceFit:true,
 96            enableRowBody:true,
 97            getRowClass : function(record, rowIndex, p, ds){
 98                return 'x-grid3-row-collapsed';
 99            }
100        },
101        view: new Ext.grid.GroupingView({
102            forceFit:true,
103            groupTextTpl: '{text} ({[values.rs.length]}条记录)'
104        }),
105        bbar: new Ext.PagingToolbar({
106            pageSize: 25,
107            store: ds,
108            displayInfo: true,
109            displayMsg: '当前显示 {0} - {1}条记录 /共 {2}条记录',
110            emptyMsg: "无显示数据"
111        }),
112        // inline toolbars
113        tbar:[{
114            id:'btnAdd',
115            text:'新增',
116            tooltip:'新增',
117            iconCls:'add',
118            handler: showAddPanel
119        }, '-', {
120            text:'查询',
121            tooltip:'查询',
122            iconCls:'search'
123        }, '-', {
124            text:'批量删除',
125            tooltip:'删除',
126            iconCls:'remove',
127            handler:showDelDialog
128        }]
129
130    });
131  
132});

展示成果：

    至此，本文已实现Grid的数据显示、分页、排序的功能。常见的CRUD四个功能的R已完成，接下来，我将提供CUD的功能（如form提交等动作），未完待续……