Go homepage(回首页) Upload pictures (上传图片) Write articles (发文字帖)
The author:(作者)归海一刀published in(发表于) 2014/1/30 1:01:45 ExtJS与.NET结合开发实例(Grid之数据显示、分页、排序篇)_[Asp.Net教程]
最近园子里有很多朋友关心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 }1415 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 else107 {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 else117 {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 else127 {128 query = query.OrderByDescending(p => p.PROJECT_REAL_FINISH_DATE);129 } 130 break;131 default:132 break;133 }134 }135 #endregion136137 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}147ProjectBaseInfo.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 2 3 4 项目一览表 5 6 7 8 9 10 11 1213 1415 16 17 18 19 5556575859(注:请注意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 ' ', 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 renderT 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 displayInf true,109 displayMsg: '当前显示 {0} - {1}条记录 /共 {2}条记录',110 emptyMsg: "无显示数据"111 }),112 // inline toolbars113 tbar:[{114 id:'btnAdd',115 text:'新增',116 tooltip:'新增',117 iconCls:'add',118 handler: showAddPanel119 }, '-', {120 text:'查询',121 tooltip:'查询',122 iconCls:'search'123 }, '-', {124 text:'批量删除',125 tooltip:'删除',126 iconCls:'remove',127 handler:showDelDialog128 }]129130 });131 132});
展示成果:
至此,本文已实现Grid的数据显示、分页、排序的功能。常见的CRUD四个功能的R已完成,接下来,我将提供CUD的功能(如form提交等动作),未完待续……
来源:cnblogs
赞