本文共 19805 字，大约阅读时间需要 66 分钟。
前面提到过工作台（《》）了，不知道各位看过之后有什么感想。这次就介绍介绍使用EXT.NET画几个报表。
看图写作从小学就开始了，如图：
图一
图二
图三（1）
图三（2）
各位看官，不要以为这报表画起来很难，其实使用EXT.NET来画的话，还是挺简单方便的。
1）下面就从图一开始。
这个报表实现，本人采用的是最原始的手写代码（之所以这么说，是因为没怎么偷懒，老老实实的写的，因为这是刚接触EXT.NET的时候画的）
先上代码，然后再说话吧。其实注释挺全的，所以也不需要说什么话了：
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %> <%--RptId 标识 店铺状态统计表--%> <%--报表年份--%> <%--报表月份--%> <%--新概念店目标--%> <%--其他品牌转新概念店目标--%> <%--家乐福店目标--%> <%--总数目标--%> <%--新概念店开店数--%> <%--其他品牌转新概念店开店数--%> <%--家乐福开店数--%> <%--新概念店开店总数--%> <%--美丽健康店开店数--%> <%--开店总数--%> <%--新概念店签约数--%> <%--美丽健康店签约数--%> <%--签约总数--%> <%--新概念店施工数--%> <%--美丽康店施工数--%> <%--施工总数--%> <%--改型店目标--%> <%--改型店数--%> <%--改型店签约数--%> <%--改型店施工数--%> <%--自动解约数--%> <%--公司解约数--%> <%--解约总数--%> <%--净店数--%> <%--新概念店总数--%> <%--美丽健康店总数--%> <%--老店总数--%> <%--总店数--%> <%--报表创建日期--%> <%--National:Start--%> <%--National:End--%> <%-- --%> <%--NewStore:Start--%> <%-----------Target:Start--%> <%-----------Target:End--%> <%-----------Actual Store opened:Start--%> <%-----------Actual Store opened:End--%> <%----------- Contract Signed:Start--%> <%----------- Contract Signed:End--%> <%----------- Under Deco.:Start--%> <%----------- Under Deco.:End--%> <%--NewStore:End--%> <%--Upgrading:Start--%> <%--Upgrading:End--%> <%--Closure:Start--%> <%----------- Drop-Out:Start--%> <%----------- Drop-Out:End--%> <%--Closure:End--%> <%--Store Status:Start--%> <%----------- Store No.:Start--%> <%----------- Store No.:End--%> <%--Store Status:End--%> <%--隐藏列在分组标头中，仍占用列数--%> <%--一个HeaderGroupRows表示一行--%>
然后只需要完善Httphandler类就好了。这个报表只是在列头的组合上稍微有点难度，其实也没难度，看我的代码，应该是很清晰的。
2）现在开始说第二个报表了。再看看图二：
这个报表难度其实也不大，主要有这么几个地方值得注意：
- 列头合并。前面以后说过了。很简单的配置。
- 列合计。待会看源码。
- 过滤掉0。如果是0，则什么都不显示，否则显示蓝色的数字。因为这个报表测试数据干了，我又懒，所以大家想象一下数据就好了。据说画饼充饥是有效果的，当然不是我说的。信不信由你，反正我是相信了。
- 注意列头的HTML编码。别把任意字符都往列头加，列头会表示有压力的，并且会导致页面空白而且无异常。所以注意把特殊字符进行编码。
这个报表虽然复杂了一点点，但是也很简单。现在一起来ViewCode：
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
该说的都说了，注释也懒得写了。现在想说的是下面几点：
- 首先来看记录集（RecordField）。注意字段的类型（Type="Int"）。比如你的数据中有DateTime类型、Int类型的数据，最好设置下类型，这样的话，就可以避免出现undefined。而且也方便格式转换。
- Store。这个Store为什么没有设置URL呢？在《》我说过，“7）数据交换更简单”。应该是“数据交互”，本人比较懒，只在这里更正申明下好了，我也是刚看到。这里的Store，是在后台赋值的。如下面代码：
var qList = _db.SelectReportMonthDataForUnderDeco().ToList(); Store1.DataSource = qList; Store1.DataBind();
- 统计怎么算的？注意updateTotal函数。“总计”两个字是怎么加上去的，答曰：“敲上去的”。再注意BottomBar（想当然的，这就是底部工具条），这里就是显示统计的数据的。
- 估计看官会有这么一个疑问，列头分组怎么分的，木有见代码。代码是有的，只是还木有贴出来，因为我写在后台，这种方式也挺直观方便的。当然萝卜白菜各有所爱了：
var _headGroupRow = new HeaderGroupRow() { Columns = { new HeaderGroupColumn() { Header = "", Align = Alignment.Center, ColSpan = 1 } } }; _headGroupRow.Columns.Add(new HeaderGroupColumn() { Header = string.Format("{0}", "Under Deco."), Align = Alignment.Center, ColSpan = 4, }); var _currentMonth = Convert.ToInt32(qList.First().monthnum.Trim()); for (int i = 0; i < 3; i++) { _headGroupRow.Columns.Add(new HeaderGroupColumn() { Header = string.Format("{0}", GetEnglishMonth((_currentMonth + i).ToString())), Align = Alignment.Center, ColSpan = 4, }); } _headGroupRow.Columns.Add(new HeaderGroupColumn() { Header = string.Format("{0}", "Certificated"), Align = Alignment.Center, ColSpan = 4, }); gvColumns.HeaderGroupRows.Add(_headGroupRow); 这个就说到这里了。
3)这个相对来说，比上两个都复杂。但是我画起来，比上两个都快。一个是更熟练了，第二个是生成了很多东西。
先看页面代码（页面代码很简洁）：
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
仔细看起来，发现这个页面代码并没啥东西。只能隐约的看到，一个GridPanel底部放了一个GridPanel。看来真不是个东西。这里暂不作解释，继续贴码：
/// /// 获取当前URL /// public string CurrentUrl { get { return Request.Path; } } protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { ResourceManager1.BuildAllPrivilegesForExtNET(); //注册JQuery脚本 this.Page.ClientScript.RegisterClientScriptInclude("JQuery4.4", "/js/jquery-1.4.4.min.js"); #region 绑定年月 for (int i = 0; i < 20; i++) { ddlYear.Items.Add(new ListItem(DateTime.Now.AddYears(-i).Year.ToString())); } for (int i = 1; i <= 12; i++) { ddlMonth.Items.Add(new ListItem(i.ToString())); } #endregion #region 绑定区域 using (var _db = new NBShopDataContext()) { var _lstArea = _db.SelectArea().ToList(); foreach (var areaResult in _lstArea) { ddlArea.Items.Add(new ListItem(areaResult.AreaName)); } ddlArea.Items.Add(new ListItem("全国")); } #endregion var _cm = new CommonService(); #region 获取搜索条件 var _month = string.IsNullOrEmpty(Request.QueryString["newmonth"]) ? (Request.QueryString["month"] ?? DateTime.Now.Month.ToString()) : Request.QueryString["newmonth"]; var _areaName = string.IsNullOrEmpty(Request.QueryString["newarea"]) ? (Request.QueryString["area"] ?? "全国") : Request.QueryString["newarea"]; var _year = string.IsNullOrEmpty(Request.QueryString["newyear"]) ? (Request.QueryString["year"] ?? DateTime.Now.Year.ToString()) : Request.QueryString["newyear"]; var _dic = new Dictionary () { {"@areaname", _areaName}, {"@monthnum", _month}, {"@yearnum", _year} }; #endregion #region 选择相应的值 ddlArea.SelectedItem.Value = _areaName; ddlMonth.SelectedItem.Value = _month; ddlYear.SelectedItem.Value = _year; #endregion #region 如果不是全国，区域就无法选择 if (Request.QueryString["area"] != "全国") { ddlArea.Disabled = true; } #endregion #region 获取数据 DataTable _dt = _cm.SelectReportByStoredName("SelectMonthDataAndWeekData", _dic); if (_dt == null || _dt.Rows.Count == 0) { X.Msg.Alert("温馨提示", "没有数据可供显示！").Show(); GridPanel1.RemoveAll(); return; } #endregion #region 绑定数据 BingData(_dt.AsEnumerable().Where(p => p[0].ToString().IndexOf("-") == -1 && p[0].ToString() != "MTD" && p[0].ToString() != "Drop Out" && p[0].ToString() != "Net").AsDataView(), GridPanel1, Store1); BingData(_dt.AsEnumerable().Where(p => p[0].ToString().Contains("-") || p[0].ToString() == "MTD" || p[0].ToString() == "Drop Out" || p[0].ToString() == "Net").AsDataView(), gpItems, storeItems); #endregion GridPanel1.Header = false; //绑定子版块标题（当前月） gpItems.Title = GetEnglishMonth(_month); #region 设置列头 if (GridPanel1.ColumnModel.Columns.Count >= 17) { GridPanel1.ColumnModel.Columns[0].Header = _areaName; GridPanel1.ColumnModel.Columns[1].Header = "NCS"; GridPanel1.ColumnModel.Columns[2].Header = Server.HtmlEncode("H&B"); GridPanel1.ColumnModel.Columns[3].Header = Server.HtmlEncode("Others"); GridPanel1.ColumnModel.Columns[4].Header = Server.HtmlEncode("Total Franchise"); GridPanel1.ColumnModel.Columns[5].Header = Server.HtmlEncode("New Prospects / Application Completed"); GridPanel1.ColumnModel.Columns[6].Header = Server.HtmlEncode("Contract Approved/ No Deco."); GridPanel1.ColumnModel.Columns[7].Header = Server.HtmlEncode("Under Deco"); GridPanel1.ColumnModel.Columns[8].Header = Server.HtmlEncode("New Prospects / Application Completed"); GridPanel1.ColumnModel.Columns[9].Header = Server.HtmlEncode("Contract Approved/ No Deco."); GridPanel1.ColumnModel.Columns[10].Header = Server.HtmlEncode("Under Deco"); GridPanel1.ColumnModel.Columns[11].Header = Server.HtmlEncode("New Prospects / Application Completed"); GridPanel1.ColumnModel.Columns[12].Header = Server.HtmlEncode("Contract Approved/ No Deco."); GridPanel1.ColumnModel.Columns[13].Header = Server.HtmlEncode("Under Deco"); GridPanel1.ColumnModel.Columns[14].Header = Server.HtmlEncode("New Prospects / Application Completed"); GridPanel1.ColumnModel.Columns[15].Header = Server.HtmlEncode("Contract Approved/ No Deco."); GridPanel1.ColumnModel.Columns[16].Header = Server.HtmlEncode("Under Deco"); GridPanel1.ColumnModel.Columns[17].Header = Server.HtmlEncode("New NCS"); GridPanel1.ColumnModel.Columns[18].Header = Server.HtmlEncode("New H&B"); GridPanel1.ColumnModel.Columns[19].Header = Server.HtmlEncode("Upgrading"); GridPanel1.ColumnModel.Columns[20].Header = Server.HtmlEncode("Upgrading H&B"); } #endregion #region 设置合并的列头 var _headGroupRow = new HeaderGroupRow() { Columns = { new HeaderGroupColumn() { Header = " ", Align = Alignment.Center, ColSpan = 1 } } }; _headGroupRow.Columns.Add(new HeaderGroupColumn() { Header = string.Format(" {0}", "In operation"), Align = Alignment.Center, ColSpan = 4, }); _headGroupRow.Columns.Add(new HeaderGroupColumn() { Header = string.Format(" {0}", "New NCS"), Align = Alignment.Center, ColSpan = 3, }); _headGroupRow.Columns.Add(new HeaderGroupColumn() { Header = string.Format(" {0}", Server.HtmlEncode("New H&B")), Align = Alignment.Center, ColSpan = 3, }); _headGroupRow.Columns.Add(new HeaderGroupColumn() { Header = string.Format(" {0}", "Upgrades--NCS"), Align = Alignment.Center, ColSpan = 3, }); _headGroupRow.Columns.Add(new HeaderGroupColumn() { Header = string.Format(" {0}", Server.HtmlEncode("Upgrades--H&B")), Align = Alignment.Center, ColSpan = 3, }); _headGroupRow.Columns.Add(new HeaderGroupColumn() { Header = string.Format(" {0}", "Certificated"), Align = Alignment.Center, ColSpan = 4, }); gvColumns.HeaderGroupRows.Add(_headGroupRow); #endregion _dt.Dispose(); } } /// /// 生成字段和列，并绑定数据源 /// /// /// /// private void BingData(System.Data.DataView _rptData, GridPanel _gp, Store _store) { var _jsonReader = new JsonReader(); foreach (DataColumn _dataColumn in _rptData.Table.Columns) { //创建字段 if (_dataColumn.ColumnName == "timecol") { _jsonReader.Fields.Add(new RecordField(_dataColumn.ColumnName)); } else { _jsonReader.Fields.Add(new RecordField(_dataColumn.ColumnName)); } //创建列 var _column = new Column { Header = _dataColumn.ColumnName, DataIndex = _dataColumn.ColumnName, }; //过滤0，调用fifterZero函数 if (_column.Header != "timecol") { _column.Renderer.Fn = "fifterZero"; _column.Renderer.Args = new string[] { "value" }; } _gp.ColumnModel.Columns.Add(_column); } _store.Reader.Add(_jsonReader); _store.DataSource = _rptData; _store.DataBind(); }
代码贴上去了，发现木有，也不是很多，这里我顺便解释解释：
点击【查询】按钮后，刷新页面获取数据。当然您也可以改成不刷新的，也很简单的，这里我是为了更简单。
不过在这方面，我要说一下：你可以使用X.IsAjaxRequest来判断是否是EXT的Ajax请求，别重复执行了Page_load事件里面的代码。
数据源是直接绑的，使用的是DataTable。然后在绑定的时候，使用LINQ to DataTable进行了过滤。这个报表不会有多少数据。
当然如果你喜欢2.0的话，也可以用那个Select啊，DataView的RowFilter等来过滤。
数据集、字段、列是动态加的，列头是手动写的。因为列头不一样，而且有特殊字符。也就是说，如果可以，你完全可以动态生成整个GridPanel。
最后说点。Extjs与JQuery框架是不冲突的，井水不犯河水。
封装点函数，整个动态生成，也是一种高效的开发，这也是我EXT.NET高效开发系列所推崇的（）。
也许有人会说点性能问题什么的，我个人认为，生活总是有所取舍的，至于如何取舍，就需要根据个人的环境来判断了，不要捡了芝麻丢了西瓜就行了。
再套用一句，勿以BUG小而为之，勿以Code小而不为。
总算写完了。有时间的话，我会继续…
转载地址：http://urrkz.baihongyu.com/