EXT.NET复杂布局（二）——报表

前面提到过工作台（《EXT.NET复杂布局（一）——工作台》）了，不知道各位看过之后有什么感想。这次就介绍介绍使用EXT.NET画几个报表。

看图写作从小学就开始了，如图：

图一

图二

图三（1）

图三（2）

各位看官，不要以为这报表画起来很难，其实使用EXT.NET来画的话，还是挺简单方便的。

1）下面就从图一开始。

这个报表实现，本人采用的是最原始的手写代码（之所以这么说，是因为没怎么偷懒，老老实实的写的，因为这是刚接触EXT.NET的时候画的）

先上代码，然后再说话吧。其实注释挺全的，所以也不需要说什么话了：

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>







    
        
            
                
                    
                        
                        
                    
                    
                        
                            
                                <%--RptId 标识 店铺状态统计表--%>
                                
                                <%--报表年份--%>
                                
                                <%--报表月份--%>
                                
                                <%--新概念店目标--%>
                                
                                <%--其他品牌转新概念店目标--%>
                                
                                <%--家乐福店目标--%>
                                
                                <%--总数目标--%>
                                
                                <%--新概念店开店数--%>
                                
                                <%--其他品牌转新概念店开店数--%>
                                
                                <%--家乐福开店数--%>
                                
                                <%--新概念店开店总数--%>
                                
                                <%--美丽健康店开店数--%>
                                
                                <%--开店总数--%>
                                
                                <%--新概念店签约数--%>
                                
                                <%--美丽健康店签约数--%>
                                
                                <%--签约总数--%>
                                
                                <%--新概念店施工数--%>
                                
                                <%--美丽康店施工数--%>
                                
                                <%--施工总数--%>
                                
                                <%--改型店目标--%>
                                
                                <%--改型店数--%>
                                
                                <%--改型店签约数--%>
                                
                                <%--改型店施工数--%>
                                
                                <%--自动解约数--%>
                                
                                <%--公司解约数--%>
                                
                                <%--解约总数--%>
                                
                                <%--净店数--%>
                                
                                <%--新概念店总数--%>
                                
                                <%--美丽健康店总数--%>
                                
                                <%--老店总数--%>
                                
                                <%--总店数--%>
                                
                                <%--报表创建日期--%>
                                
                                
                            
                        
                    
                    
                        
                        
                        
                    
                
            
            
                
                    <%--National:Start--%>
                    
                    
            
            
            
                
                    <%--隐藏列在分组标头中，仍占用列数--%>
                    <%--一个HeaderGroupRows表示一行--%>
                    
                        
                            
                                
                                
                                
                                
                                
                                
                            
                        
                    
                    
                        
                            
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                
                            
                        
                    
                
            
            
                
                    
                        
                        
                        
                        
                            
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                
                                
                            
                        
                        
                        
                            
                                
                            
                        
                        
                        
                            
                                
                            
                        
                    
                
            
        
    

然后只需要完善Httphandler类就好了。这个报表只是在列头的组合上稍微有点难度，其实也没难度，看我的代码，应该是很清晰的。

2）现在开始说第二个报表了。再看看图二：

这个报表难度其实也不大，主要有这么几个地方值得注意：

• 列头合并。前面以后说过了。很简单的配置。
• 列合计。待会看源码。
• 过滤掉0。如果是0，则什么都不显示，否则显示蓝色的数字。因为这个报表测试数据干了，我又懒，所以大家想象一下数据就好了。据说画饼充饥是有效果的，当然不是我说的。信不信由你，反正我是相信了。
• 注意列头的HTML编码。别把任意字符都往列头加，列头会表示有压力的，并且会导致页面空白而且无异常。所以注意把特殊字符进行编码。

这个报表虽然复杂了一点点，但是也很简单。现在一起来ViewCode：

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>






    
        
            
                
                    
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                    
                
            
        
    
    
    
        
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
        
    
    
        
        
    
    
        
    
    
        
            
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
            
        
    

该说的都说了，注释也懒得写了。现在想说的是下面几点：

1. 首先来看记录集（RecordField）。注意字段的类型（Type="Int"）。比如你的数据中有DateTime类型、Int类型的数据，最好设置下类型，这样的话，就可以避免出现undefined。而且也方便格式转换。
2. Store。这个Store为什么没有设置URL呢？在《EXT.NET高效开发（一）——概述》我说过，“7）数据交换更简单”。应该是“数据交互”，本人比较懒，只在这里更正申明下好了，我也是刚看到。这里的Store，是在后台赋值的。如下面代码：

 var qList = _db.SelectReportMonthDataForUnderDeco().ToList();
                    Store1.DataSource = qList;
                    Store1.DataBind();

1. 统计怎么算的？注意updateTotal函数。“总计”两个字是怎么加上去的，答曰：“敲上去的”。再注意BottomBar（想当然的，这就是底部工具条），这里就是显示统计的数据的。
2. 估计看官会有这么一个疑问，列头分组怎么分的，木有见代码。代码是有的，只是还木有贴出来，因为我写在后台，这种方式也挺直观方便的。当然萝卜白菜各有所爱了：

                    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();
        }

代码贴上去了，发现木有，也不是很多，这里我顺便解释解释：

1. 点击【查询】按钮后，刷新页面获取数据。当然您也可以改成不刷新的，也很简单的，这里我是为了更简单。

   不过在这方面，我要说一下：你可以使用X.IsAjaxRequest来判断是否是EXT的Ajax请求，别重复执行了Page_load事件里面的代码。

2. 数据源是直接绑的，使用的是DataTable。然后在绑定的时候，使用LINQ to DataTable进行了过滤。这个报表不会有多少数据。

   当然如果你喜欢2.0的话，也可以用那个Select啊，DataView的RowFilter等来过滤。

3. 数据集、字段、列是动态加的，列头是手动写的。因为列头不一样，而且有特殊字符。也就是说，如果可以，你完全可以动态生成整个GridPanel。

4. 最后说点。Extjs与JQuery框架是不冲突的，井水不犯河水。

封装点函数，整个动态生成，也是一种高效的开发，这也是我EXT.NET高效开发系列所推崇的（EXT.NET高效开发（二）——封装函数）。

也许有人会说点性能问题什么的，我个人认为，生活总是有所取舍的，至于如何取舍，就需要根据个人的环境来判断了，不要捡了芝麻丢了西瓜就行了。

再套用一句，勿以BUG小而为之，勿以Code小而不为。

总算写完了。有时间的话，我会继续…

作者: 雪雁 发表于 2011-07-27 15:52 原文链接

评论: 17　查看评论　发表评论

---

最新新闻：
· Android侵犯甲骨文专利案：Sun前CEO曾默许(2011-07-28 08:49)
· 今年手机四分之一都是智能的(2011-07-28 08:47)
· 邹涛：金山CEO人选最好从外面找 最好别折腾(2011-07-28 08:46)
· 电子书行业迎来大洗牌：传方正爱国者将陆续退出(2011-07-28 08:41)
· 人人网发力移动电子商务：试水SNS+LBS新模式(2011-07-28 08:40)

编辑推荐：.NET程序员，我们应该更专业点

网站导航：博客园首页  我的园子  新闻  闪存  小组  博问  知识库