EXT.NET复杂布局（二）—

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

阅读量：6986 次

发布时间：2019-06-27

本文共 20745 字，大约阅读时间需要 69 分钟。

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

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

图一

图二

图三（1）

图三（2）

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

1）下面就从图一开始。

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

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

<％＠ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" ％>   
     
     
         
              
                   
                        
                             
          
           
           
                              
          
           
           
             <％--RptId 标识 店铺状态统计表--％> 
             <％--报表年份--％> 
             <％--报表月份--％> 
             <％--新概念店目标--％> 
             <％--其他品牌转新概念店目标--％> 
             <％--家乐福店目标--％> 
             <％--总数目标--％> 
             <％--新概念店开店数--％> 
             <％--其他品牌转新概念店开店数--％> 
             <％--家乐福开店数--％> 
             <％--新概念店开店总数--％> 
             <％--美丽健康店开店数--％> 
             <％--开店总数--％> 
             <％--新概念店签约数--％> 
             <％--美丽健康店签约数--％> 
             <％--签约总数--％> 
             <％--新概念店施工数--％> 
             <％--美丽康店施工数--％> 
             <％--施工总数--％> 
             <％--改型店目标--％> 
             <％--改型店数--％> 
             <％--改型店签约数--％> 
             <％--改型店施工数--％> 
             <％--自动解约数--％> 
             <％--公司解约数--％> 
             <％--解约总数--％> 
             <％--净店数--％> 
             <％--新概念店总数--％> 
             <％--美丽健康店总数--％> 
             <％--老店总数--％> 
             <％--总店数--％> 
             <％--报表创建日期--％> 
             
             
            
           
                              
          
           
           
           
                          
                     
                    
                        
        
                              <％--National:Start--％>                     
                              
                              <％--National:End--％>                     <％--
         --％>                     <％--NewSte:Start--％>                     <％-----------Target:Start--％>                     
                              
                              
                              
                              <％-----------Target:End--％>                     <％-----------Actual Ste opened:Start--％>                     
                              
                              
                              
                              
                              
                              <％-----------Actual Ste opened:End--％>                     <％----------- Contract Signed:Start--％>                     
                              
                              
                              <％----------- Contract Signed:End--％>                     <％----------- Under Deco.:Start--％>                     
                              
                              
                              <％----------- Under Deco.:End--％>                     <％--NewSte:End--％>                     <％--Upgrading:Start--％>                     
                              
                              
                              
                              <％--Upgrading:End--％>                     <％--Closure:Start--％>                     <％----------- Drop-Out:Start--％>                     
                              
                              
                              <％----------- Drop-Out:End--％>                     <％--Closure:End--％>                     <％--Ste Status:Start--％>                     
                              <％----------- Ste No.:Start--％>                     
                              
                              
                              
                              <％----------- Ste No.:End--％>                     <％--Ste Status:End--％>                     
                          
                     
                    
                    
                        
        
                              <％--隐藏列在分组标头中，仍占用列数--％>                     <％--一个HeaderGroupRows表示一行--％>                     
          
           
            
            
             National" Align="Center" /> 
             
              New Ste" ColSpan="17" /> 
              
               Upgrading" ColSpan="4" /> 
               
                Closure" ColSpan="3" /> 
                
                 Ste Status" ColSpan="5" /> 
                  
                
               
              
             
            
            
           
                              
          
           
            
            
             Year/Month" /> 
             
              Target" ColSpan="5" /> 
              
               Actual Ste opened" ColSpan="6" /> 
               
                Contract Signed" ColSpan="3" /> 
                
                 Under Deco" ColSpan="3" /> 
                  
                 
                  Drop-Out" ColSpan="3" /> 
                   
                  
                   Ste No." ColSpan="4" />

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

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

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

- 列头合并。前面以后说过了。很简单的配置。

- 列合计。待会看源码。

- 过滤掉0。如果是0，则什么都不显示，否则显示蓝色的数字。因为这个报表测试数据干了，我又懒，所以大家想象一下数据就好了。据说画饼充饥是有效果的，当然不是我说的。信不信由你，反正我是相信了。

- 注意列头的HTML编码。别把任意字符都往列头加，列头会表示有压力的，并且会导致页面空白而且无异常。所以注意把特殊字符进行编码。

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

<％＠ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" ％>

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

1. 1. 首先来看记录集（RecdField）。注意字段的类型（Type="Int"）。比如你的数据中有DateTime类型、Int类型的数据，最好设置下类型，这样的话，就可以避免出现undefined。而且也方便格式转换。

1. 1. Ste。这个Ste为什么没有设置URL呢？在《EXT.NET高效开发（一）——概述》我说过，“7）数据交换更简单”。应该是“数据交互”，本人比较懒，只在这里更正申明下好了，我也是刚看到。这里的Ste，是在后台赋值的。如下面代码：

var qList = _db.SelectReptMonthDataFUnderDeco（）.ToList（）;                     Ste1.DataSource = qList;                     Ste1.DataBind（）;

1. 1. 统计怎么算的？注意Total函数。“总计”两个字是怎么加上去的，答曰：“敲上去的”。再注意BottomBar（想当然的，这就是底部工具条），这里就是显示统计的数据的。

1. 1. 估计看官会有这么一个疑问，列头分组怎么分的，木有见代码。代码是有的，只是还木有贴出来，因为我写在后台，这种方式也挺直观方便的。当然萝卜白菜各有所爱了：

var _headGroupRow = new HeaderGroupRow（）                     {                         Columns =                                                 {                                                     new HeaderGroupColumn（）                                                         {                                                             Header = ""，                                                             Align = Alignment.Center，                                                             ColSpan = 1                                                         }                                                 }                     };                     _headGroupRow.Columns.Add（new HeaderGroupColumn（）                     {                         Header =                             string.Fmat（"{0}"，                                           "Under Deco."），                         Align = Alignment.Center，                         ColSpan = 4，                     }）;                     var _currentMonth = Convert.ToInt32（qList.First（）.monthnum.Trim（））;                     f （int i = 0; i < 3; i++）                     {                         _headGroupRow.Columns.Add（new HeaderGroupColumn（）                         {                             Header =                                 string.Fmat（"{0}"，                                               GetEnglishMonth（（_currentMonth + i）.ToString（））），                             Align = Alignment.Center，                             ColSpan = 4，                         }）;                     }                     _headGroupRow.Columns.Add（new HeaderGroupColumn（）                     {                         Header =                             string.Fmat（"{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.BuildAllPrivilegesFExtNET（）;                 //注册JQuery脚本                 this.Page.ClientScript.RegisterClientScriptInclude（"JQuery4.4"， "/js/jquery-1.4.4.min.js"）;                 ＃region 绑定年月                 f （int i = 0; i < 20; i++）                 {                     ddlYear.Items.Add（new ListItem（DateTime.Now.AddYears（-i）.Year.ToString（）））;                 }                 f （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（）;                     feach （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.SelectReptByStedName（"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， Ste1）;                 BingData（_dt.AsEnumerable（）.Where（p => p[0].ToString（）.Contains（"-"） || p[0].ToString（） == "MTD" || p[0].ToString（） == "Drop Out" || p[0].ToString（） == "Net"）.AsDataView（）， gpItems， steItems）;                 ＃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.Fmat（"
     {0}"，                                       "In operation"），                     Align = Alignment.Center，                     ColSpan = 4，                 }）;                 _headGroupRow.Columns.Add（new HeaderGroupColumn（）                 {                     Header =                         string.Fmat（"
     {0}"，                                       "New NCS"），                     Align = Alignment.Center，                     ColSpan = 3，                 }）;                 _headGroupRow.Columns.Add（new HeaderGroupColumn（）                 {                     Header =                         string.Fmat（"
     {0}"，                                       Server.HtmlEncode（"New H&B"）），                     Align = Alignment.Center，                     ColSpan = 3，                 }）;                 _headGroupRow.Columns.Add（new HeaderGroupColumn（）                 {                     Header =                         string.Fmat（"
     {0}"，                                       "Upgrades--NCS"），                     Align = Alignment.Center，                     ColSpan = 3，                 }）;                 _headGroupRow.Columns.Add（new HeaderGroupColumn（）                 {                     Header =                         string.Fmat（"
     {0}"，                                       Server.HtmlEncode（"Upgrades--H&B"）），                     Align = Alignment.Center，                     ColSpan = 3，                 }）;                 _headGroupRow.Columns.Add（new HeaderGroupColumn（）                 {                     Header =                         string.Fmat（"
     {0}"，                                       "Certificated"），                     Align = Alignment.Center，                     ColSpan = 4，                 }）;                 gvColumns.HeaderGroupRows.Add（_headGroupRow）;                 ＃endregion                 _dt.Dispose（）;             }         }         /// 
              /// 生成字段和列，并绑定数据源         /// 
         /// 
              /// 
              /// 
              private void BingData（System.Data.DataView _rptData， GridPanel _gp， Ste _ste）         {             var _jsonReader = new JsonReader（）;             feach （DataColumn _dataColumn in _rptData.Table.Columns）             {                 //创建字段                 if （_dataColumn.ColumnName == "timecol"）                 {                     _jsonReader.Fields.Add（new RecdField（_dataColumn.ColumnName））;                 }                 else                 {                     _jsonReader.Fields.Add（new RecdField（_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）;             }             _ste.Reader.Add（_jsonReader）;             _ste.DataSource = _rptData;             _ste.DataBind（）;         }

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

点击【查询】按钮后，刷新页面获取数据。当然您也可以改成不刷新的，也很简单的，这里我是为了更简单。不过在这方面，我要说一下：你可以使用X.IsAjaxRequest来判断是否是EXT的Ajax请求，别重新执行了Page_load事件。

数据源是直接绑的，使用的是DataTable。然后在绑定的时候，使用LINQ to DataTable进行了过滤。这个报表不会有多少数据。当然如果你喜欢2.0的话，也可以用那个Select啊，DataView的RowFilter等来过滤。

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

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

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

转载于:https://www.cnblogs.com/zwkBlog/archive/2012/01/13/2321297.html

你可能感兴趣的文章