在DevExpress中使用BandedGridView表格實現多行表頭的處理

来源:https://www.cnblogs.com/wuhuacong/archive/2023/05/22/17420281.html
-Advertisement-
Play Games

在之前較早隨筆中介紹過實現多行表頭的處理,通過手工創建欄位以及映射數據源欄位屬性的方式實現,有些客戶反映是否可以通過代碼方式更方便的創建對應的處理操作,因此本篇隨筆繼續探討這個多行表頭的處理的操作,使用代碼的方式結合擴展函數處理,快速的實現GridControl的多行表頭的處理操作。 ...


在之前較早隨筆中介紹過實現多行表頭的處理,通過手工創建欄位以及映射數據源欄位屬性的方式實現,有些客戶反映是否可以通過代碼方式更方便的創建對應的處理操作,因此本篇隨筆繼續探討這個多行表頭的處理的操作,使用代碼的方式結合擴展函數處理,快速的實現GridControl的多行表頭的處理操作。

1、回顧使用手工創建BandedColumn和綁定欄位列

在隨筆《DevExpress控制項開發常用要點(項目總結版)》總結了一些GridControl控制項的一些操作,其中也提到了多行表頭綁定處理,如下界面所示。

有時候,我們為了一些特殊的需要,要對錶頭進行特別的排版,使其支持多行表頭的效果,如上圖所示,這樣方便對各項內容進行歸類顯示,易於閱讀,在DevExpress中應該如何實現這個效果呢?

1)先在設計模式將普通的GridView轉換為BandedGridView或者AdvBandedGridView,這樣才能支持這種多行表頭的做法,如下所示。

2)定義一些欄位,用來顯示其中的內容,如下圖所示。

3)定義一些Band列,設置相關的屬性,並把設計界面中的欄位列表拖動到對應過的Band列上面,這樣就構成了一個Band列和欄位內容的對應關係。

完成上面的綁定關係後,記得設置GridView控制項的屬性,使其不要顯示原本的ColumnHeader等內容。

設置好這些內容,才能合理、完美顯示出多行表頭的信息。

 

2、使用代碼的方式結合擴展函數處理,快速的實現GridControl的多行表頭

上面的操作,適合於新手的一些簡單的欄位綁定處理,有時候我們為了方便,可能更傾向於使用代碼的方式快速構建多行表頭的操作。

我們通過查看代碼,可以瞭解GridBand對象是一個嵌套的關係,它類似樹形結構,可以有很多層的子集合,也就是嵌套的頭部條,它結合欄位列對象GridColumn就形成了BandedGridColumn的信息。

我們需要知道GridBand只是一個頭部的條狀列信息,一般用來覆蓋GridColumn的預設列頭信息,因此需要設置一定的樣式來禁用顯示預設的GridColumn的頭部信息。

view.OptionsView.ShowColumnHeaders = false; //因為有Band列了,所以把ColumnHeader隱藏

因此我們創建一個擴展的靜態類文件,並加入設置BandedGridView樣式的處理擴展方法,把相關的樣式統一處理,如下所示。

    /// <summary>
    /// GridView及其RepositoryItem編輯控制項的擴展類
    /// </summary>
    public static class Grid_Extension
    {
        /// <summary>
        /// 設置BandedGridView的樣式
        /// </summary>
        /// <param name="view"></param>
        public static void SetBandedViewStyle(this BandedGridView view)
        {
            view.BeginUpdate(); //開始視圖的編輯,防止觸發其他事件
            view.Bands.Clear();
            //修改附加選項
            view.OptionsView.ShowColumnHeaders = false; //因為有Band列了,所以把ColumnHeader隱藏
            view.OptionsView.ShowGroupPanel = false;    //如果沒必要分組,就把它去掉
            view.OptionsView.EnableAppearanceEvenRow = false; //是否啟用偶數行外觀
            view.OptionsView.EnableAppearanceOddRow = true;   //是否啟用奇數行外觀
            view.OptionsView.ShowFilterPanelMode = ShowFilterPanelMode.Never;   //是否顯示過濾面板
            view.OptionsCustomization.AllowColumnMoving = false;                //是否允許移動列
            view.OptionsCustomization.AllowColumnResizing = false;              //是否允許調整列寬
            view.OptionsCustomization.AllowGroup = false;                       //是否允許分組
            view.OptionsCustomization.AllowFilter = false;                      //是否允許過濾
            view.OptionsCustomization.AllowSort = true;                         //是否允許排序
            view.OptionsSelection.EnableAppearanceFocusedCell = true;           //是否焦點顯示選中的單元格           
            view.EndUpdate();   //結束視圖的編輯
        }

由於GridBand可能是嵌套的多層表頭,因此為了方便,可以單獨設置一個擴展方法創建GridBand,這樣有助於引用對象。

        /// <summary>
        /// 創建綁定Banded列
        /// </summary>
        /// <param name="view"></param>
        /// <param name="caption"></param>
        /// <param name="width"></param>
        /// <param name="fixedStyle"></param>
        /// <param name="visible">是否可見</param>
        /// <returns></returns>
        public static GridBand CreateBand(this BandedGridView view, string caption, int width = 80, FixedStyle fixedStyle = FixedStyle.None, bool visible = true)
        {
            //使用多語言處理標題
            caption = JsonLanguage.Default.GetString(caption);
            var band = new GridBand
            {
                Caption = caption,
                Width = width,
                Fixed = fixedStyle,
                Visible = visible,  
            };
            view.Bands.Add(band);
            band.VisibleIndex = view.Bands.Count;
            band.AppearanceHeader.TextOptions.HAlignment = HorzAlignment.Center;
            return band;
        }

這樣我們就可以傳遞GridBand對象來構建多層級的欄位列信息了,利用擴展函數,我們可以方便的實現創建綁定列信息。

        /// <summary>
        /// 根據指定的GridBand父級對象,構建BandedGridColumn列對象
        /// </summary>
        /// <param name="view"></param>
        /// <param name="band"></param>
        /// <param name="fieldName"></param>
        /// <param name="caption"></param>
        /// <param name="allowEdit"></param>
        /// <param name="allowMerge"></param>
        /// <returns></returns>
        public static BandedGridColumn CreateBandColumn(this BandedGridView view, GridBand band, string fieldName, string caption, bool allowEdit = true, DefaultBoolean allowMerge = DefaultBoolean.False)
        {
            //使用多語言處理標題
            caption = JsonLanguage.Default.GetString(caption);
            var gridColumn = new BandedGridColumn()
            {
                FieldName = fieldName,
                Caption = caption,
                UnboundType = UnboundColumnType.Bound,
                Visible = true
            };
            band.AppearanceHeader.BackColor  = Color.LightGreen;

            var newBand = band.Children.AddBand(caption);
            newBand.AppearanceHeader.TextOptions.HAlignment = HorzAlignment.Center; //文本居中
            newBand.Columns.Add(gridColumn);

            gridColumn.AppearanceHeader.TextOptions.HAlignment = HorzAlignment.Center;
            gridColumn.AppearanceCell.TextOptions.VAlignment = VertAlignment.Center;

            gridColumn.OptionsColumn.AllowEdit = allowEdit;
            if (!allowEdit)
            {
                gridColumn.AppearanceHeader.ForeColor = Color.Gray;
            }

            bool allowCellMerge = !view.OptionsView.AllowCellMerge && allowMerge == DefaultBoolean.True;
            if (allowCellMerge)
            {
                view.OptionsView.AllowCellMerge = true;
            }
            gridColumn.OptionsColumn.AllowMerge = allowMerge;
            return gridColumn;
        }

而如果一般的列,沒有多層嵌套的GridBand,也就是只有一層的表頭,我們也需要根據欄位信息進行構建一個GridBandColumn來顯示信息,如下所示。

        /// <summary>
        /// 根據欄位信息,構建BandedGridColumn列對象
        /// </summary>
        /// <param name="view">視圖對象</param>
        /// <param name="fieldName">欄位名稱</param>
        /// <param name="caption">顯示名稱</param>
        /// <param name="width">列寬度</param>
        /// <param name="fixedStyle">固定顯示模式</param>
        /// <param name="visible">是否可見</param>
        /// <param name="allowEdit">是否可編輯</param>
        /// <param name="allowMerge">是否可合併</param>
        /// <param name="unboundColumnType">綁定類型,預設為UnboundColumnType.Bound</param>
        /// <returns></returns>
        public static BandedGridColumn CreateBandColumn(this BandedGridView view, string fieldName, string caption, int width = 80, FixedStyle fixedStyle = FixedStyle.None, bool visible = true, bool allowEdit = true, DefaultBoolean allowMerge = DefaultBoolean.False, UnboundColumnType unboundColumnType = UnboundColumnType.Bound)
        {
            //使用多語言處理標題
            caption = JsonLanguage.Default.GetString(caption);
            var gridColumn = new BandedGridColumn()
            {
                FieldName = fieldName,
                Caption = caption,
                Width = width,
                UnboundType = unboundColumnType,
            }; 
            var band = view.CreateBand(caption, width, fixedStyle);
            band.Visible = visible;
            band.Columns.Add(gridColumn);
            //view.Columns[fieldName].OwnerBand = band;
            gridColumn.AbsoluteIndex = view.Columns.Count;
            gridColumn.Visible = visible;//是否可見
            if (visible)
            {
                gridColumn.VisibleIndex = view.Columns.Count;
            }
            gridColumn.AppearanceHeader.TextOptions.HAlignment = HorzAlignment.Center;
            gridColumn.AppearanceCell.TextOptions.VAlignment = VertAlignment.Center;

            gridColumn.OptionsColumn.AllowEdit = allowEdit;
            if (!allowEdit)
            {
                gridColumn.AppearanceHeader.ForeColor = Color.Gray;
            }
            bool allowCellMerge = !view.OptionsView.AllowCellMerge && allowMerge == DefaultBoolean.True;
            if (allowCellMerge)
            {
                view.OptionsView.AllowCellMerge = true;
            }
            gridColumn.OptionsColumn.AllowMerge = allowMerge;
            gridColumn.Fixed = fixedStyle;

            return gridColumn;
        }

有了這些擴展函數的鋪墊,我們在實際界面中展示多層級的多行表頭就會變得很容易了。為了方便介紹,我創建一個簡單的窗體用來展示多行表頭的代碼綁定處理。

創建一個預設的窗體,放置GridControl,並把預設的GridView視圖,轉換為BandedGridView視圖對象,如下所示。

為了綁定一些欄位信息供顯示、編輯處理,我們創建了一個表格,包含信息:Id,姓名,外科皮膚科_診斷,外科皮膚科_結論,神經精神科_診斷,神經精神科_結論,內科_診斷,內科_結論,眼科_診斷,眼科_結論,檢查時間,備註 等欄位內容,如下代碼所示。

            var table = DataTableHelper.CreateTable("Id|int,姓名,外科皮膚科_診斷,外科皮膚科_結論,神經精神科_診斷,神經精神科_結論,內科_診斷,內科_結論,眼科_診斷,眼科_結論,檢查時間,備註");
            
            //準備飛行員體檢測試數據
            for (int i =1; i <= 50;i++)
            {
                var dr = table.NewRow();
                dr["Id"] = i;
                dr["姓名"] = $"某某{i}";

                dr["外科皮膚科_診斷"] = "健康";
                dr["外科皮膚科_結論"] = "合格";

                dr["神經精神科_診斷"] = "健康";
                dr["神經精神科_結論"] = "合格";

                dr["內科_診斷"] = "健康";
                dr["內科_結論"] = "合格";

                dr["眼科_診斷"] = "健康";
                dr["眼科_結論"] = "合格";

                dr["檢查時間"] = DateTime.Now;
                dr["備註"] = "";

                table.Rows.Add(dr);
            }

首先需要創建GridView的初始化信息,如綁定那些欄位列,結合多表頭的處理方式,如下代碼所示。

/// <summary>
/// 初始化列表
/// </summary>
private void InitGridView()
{
    var grid = this.gridControl1;
    var grv = this.gridControl1.MainView as BandedGridView;
    grid.ContextMenuStrip = this.contextMenuStrip1;//右鍵菜單
//初始化GridView樣式,並設置相關的BandedGridView樣式
    grv.InitGridView(GridType.EditOnly, false, EditorShowMode.MouseDownFocused, "");
    grv.SetBandedViewStyle();

    //創建顯示的列:
    //Id,姓名,外科皮膚科_診斷,外科皮膚科_結論,神經精神科_診斷,神經精神科_結論,內科_診斷,內科_結論,眼科_診斷,眼科_結論,檢查時間,備註
    grv.Columns.Clear();
    grv.CreateBandColumn("Id", "Id", 80, FixedStyle.Left, true, false);
    grv.CreateBandColumn("姓名", "客戶名稱", 80, FixedStyle.Left, true, false);

    var band1 = grv.CreateBand("外科皮膚科", 120);
    grv.CreateBandColumn(band1, "外科皮膚科_診斷", "診斷");
    grv.CreateBandColumn(band1, "外科皮膚科_結論", "結論");

    var band2 = grv.CreateBand("神經精神科", 120);
    grv.CreateBandColumn(band2, "神經精神科_診斷", "診斷");
    grv.CreateBandColumn(band2, "神經精神科_結論", "結論");

    var band3 = grv.CreateBand("內科", 120);
    grv.CreateBandColumn(band3, "內科_診斷", "診斷");
    grv.CreateBandColumn(band3, "內科_結論", "結論");

    var band4 = grv.CreateBand("眼科", 120);
    grv.CreateBandColumn(band4, "眼科_診斷", "診斷");
    grv.CreateBandColumn(band4, "眼科_結論", "結論");

    var colCheckTime = grv.CreateBandColumn("檢查時間", "檢查時間").CreateDateEdit();//可修改
    colCheckTime.EditMask = "yyyy-MM-dd";
    colCheckTime.DisplayFormat.FormatString = "yyyy-MM-dd";
    colCheckTime.EditFormat.FormatString = "yyyy-MM-dd";
    colCheckTime.CustomDisplayText += (s, e) =>
    {
        if (e.Value != null && e.Value.ToString() != "")
        {
            if (Convert.ToDateTime(e.Value) <= Convert.ToDateTime("1900-1-1"))
            {
                e.DisplayText = "";
            }
            else
            {
                e.DisplayText = Convert.ToDateTime(e.Value).ToString("yyyy-MM-dd");
            }
        }
    };
    //可修改
    grv.CreateBandColumn("備註", "備註", 200);

    //設置部分欄位不可修改
    var editFields = "外科皮膚科_診斷,外科皮膚科_結論,神經精神科_診斷,神經精神科_結論,內科_診斷,內科_結論,眼科_診斷,眼科_結論,檢查時間,備註";
    grv.SetColumnsReadOnly("*", false);
    grv.SetColumnsReadOnly(editFields, true);

    //檢查輸入
    grv.ValidateRow += (s, e) =>
    {
        //校驗一些不能為空的欄位
        //var result = grid.ValidateRowNull(e, new string[]
        //{
        //    "產品編碼",
        //    "產品名稱"
        //});
    };
    //值更改觸發
    grv.CellValueChanged += (s, e) =>
    {
        //根據數量計算金額
        //if (e.Column.FieldName == "Quantity" && e.Value != null)
        //{
        //    var Price = string.Concat(grv.GetFocusedRowCellValue("Price")).ToDecimal();
        //    var Quantity = string.Concat(e.Value).ToDecimal();
        //    grv.SetFocusedRowCellValue("Amount", Price * Quantity);
        //}
    };
    //單元格樣式
    grv.RowCellStyle += (s, e) =>
    {
        //設置特殊顏色標誌
        if (editFields.Contains(e.Column.FieldName))
        {
            e.Appearance.BackColor = Color.Azure;
            e.Appearance.ForeColor = Color.Blue;
        }
    };
}

初始化BandedGridView信息後,如需綁定數據,那麼還需要對GridControl的數據源進行綁定才能進行編輯或者顯示,如下所示的代碼操作。

/// <summary>
/// 綁定數據列表
/// </summary>
private void BindData()
{
    var table = DataTableHelper.CreateTable("Id|int,姓名,外科皮膚科_診斷,外科皮膚科_結論,神經精神科_診斷,神經精神科_結論,內科_診斷,內科_結論,眼科_診斷,眼科_結論,檢查時間,備註");
    
    //準備飛行員體檢測試數據
    for (int i =1; i <= 50;i++)
    {
        var dr = table.NewRow();
        dr["Id"] = i;
        dr["姓名"] = $"某某{i}";

        dr["外科皮膚科_診斷"] = "健康";
        dr["外科皮膚科_結論"] = "合格";

        dr["神經精神科_診斷"] = "健康";
        dr["神經精神科_結論"] = "合格";

        dr["內科_診斷"] = "健康";
        dr["內科_結論"] = "合格";

        dr["眼科_診斷"] = "健康";
        dr["眼科_結論"] = "合格";

        dr["檢查時間"] = DateTime.Now;
        dr["備註"] = "";

        table.Rows.Add(dr);
    }

    //綁定數據源
    var grv = this.bandedGridView1;
    grv.GridControl.DataSource = table;
    grv.RefreshData();
}

最後,我們把它放在開發框架(如有Winform界面部分的SqlSugar開發框架、Winform開發框架)的綜合演示案例裡面,供參考使用。界面效果如下所示。

對比手工的效果

實現功能差不多,通過代碼方式,相對更加靈活一些。

以上就是綜合介紹了手工處理和代碼處理兩種方式構建多行表頭的處理操作,通過使用擴展函數方式,可以更快捷、更靈活的創建多表頭的處理和數據的綁定展示,可以有效的減少我們在多表頭上的操作摸索時間。

 

專註於代碼生成工具、.Net/.NetCore 框架架構及軟體開發,以及各種Vue.js的前端技術應用。著有Winform開發框架/混合式開發框架、微信開發框架、Bootstrap開發框架、ABP開發框架、SqlSugar開發框架等框架產品。
  轉載請註明出處:撰寫人:伍華聰  http://www.iqidi.com 
    

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • ## **前言** 在基於Mybatis的開發模式中,很多開發者還會選擇Mybatis-Plus來輔助功能開發,以此提高開發的效率。雖然Mybatis也有代碼生成的工具,但Mybatis-Plus由於在Mybatis基礎上做了一些調整,因此,常規的生成工具生成的代碼還有一些不太符合預期。而且對於多數 ...
  • 在 Django 中,你可以使用 datetime 模塊來計算兩個 TimeField 欄位的時間差。以下是一個示例: from datetime import datetime, timedelta # 假設有兩個 TimeField 欄位 time1 = obj.time_field1 time ...
  • ## HashSet 1. jdk1.7之前,使用數組加鏈表的方式實現 2. jdk1.8之後,在鏈表長度大於8並且數組長度超過32的情況下,會轉成紅黑樹結構 3. HashSet的本質是一個HashMap,它所有的value都是一致的,傳入的參數作為key,因此HashSet中不允許重覆數據 4. ...
  • 聖天諾LDK加密鎖(加密狗),對war包加密的測試,測試war包(或jar包)防止被反編譯的效果。 http://chinadlp.com/?list-DriveDownload.html 下載最新開發套件:Sentinel HASP/LDK9.0開發套件。完全預設安裝。 如果是有主鎖的正式用戶請導 ...
  • ## 前言 對接某公司的介面,涉及到資質上傳等業務。需要對接他們的上傳附件介面。 JDK1.8 httpclient 4.x ## 封裝httpclient方法 ```java public static String postFileMultiPart(String url,Map reqPara ...
  • **本文將為大家詳細講解Java中的,這是我們進行開發時經常用到的知識點,也是大家在學習Java中很重要的一個知識點,更是我們在面試時有可能會問到的問題。** **文章較長,乾貨滿滿,建議大家收藏慢慢學習。文末有本文重點總結,主頁有全系列文章分享。技術類問題,歡迎大家和我們一起交流討論!** ### ...
  • ## 一:背景 ### 1. 講故事 上周有位朋友在 github 上向我求助,說線程都被卡住了,讓我幫忙看下,截圖如下: ![](https://img2023.cnblogs.com/blog/214741/202305/214741-20230522152950051-1097264208.p ...
  • 在.NET開發過程中,可以使用一些輔助的代碼生成器來提高開發效率,之前在.NET FW時代有國產的“動軟代碼生成器”,現在早已不維護了。下麵介紹幾種.NET碼生成器,供大家參考使用。最後一個代碼生產器絕對優秀,推薦使用。 **T4 Text Template Generator:** 簡介:T4是. ...
一周排行
    -Advertisement-
    Play Games
  • 下麵是一個標準的IDistributedCache用例: public class SomeService(IDistributedCache cache) { public async Task<SomeInformation> GetSomeInformationAsync (string na ...
  • 這個庫提供了在啟動期間實例化已註冊的單例,而不是在首次使用它時實例化。 單例通常在首次使用時創建,這可能會導致響應傳入請求的延遲高於平時。在註冊時創建實例有助於防止第一次Request請求的SLA 以往我們要在註冊的時候實例單例可能會這樣寫: //註冊: services.AddSingleton< ...
  • 最近公司的很多項目都要改單點登錄了,不過大部分都還沒敲定,目前立刻要做的就只有一個比較老的項目 先改一個試試手,主要目標就是最短最快實現功能 首先因為要保留原登錄方式,所以頁面上的改動就是在原來登錄頁面下加一個SSO登錄入口 用超鏈接寫的入口,頁面改造後如下圖: 其中超鏈接的 href="Staff ...
  • Like運算符很好用,特別是它所提供的其中*、?這兩種通配符,在Windows文件系統和各類項目中運用非常廣泛。 但Like運算符僅在VB中支持,在C#中,如何實現呢? 以下是關於LikeString的四種實現方式,其中第四種為Regex正則表達式實現,且在.NET Standard 2.0及以上平... ...
  • 一:背景 1. 講故事 前些天有位朋友找到我,說他們的程式記憶體會偶發性暴漲,自己分析了下是非托管記憶體問題,讓我幫忙看下怎麼回事?哈哈,看到這個dump我還是非常有興趣的,居然還有這種游戲幣自助機類型的程式,下次去大玩家看看他們出幣的機器後端是不是C#寫的?由於dump是linux上的程式,剛好win ...
  • 前言 大家好,我是老馬。很高興遇到你。 我們為 java 開發者實現了 java 版本的 nginx https://github.com/houbb/nginx4j 如果你想知道 servlet 如何處理的,可以參考我的另一個項目: 手寫從零實現簡易版 tomcat minicat 手寫 ngin ...
  • 上一次的介紹,主要圍繞如何統一去捕獲異常,以及為每一種異常添加自己的Mapper實現,並且我們知道,當在ExceptionMapper中返回非200的Response,不支持application/json的響應類型,而是寫死的text/plain類型。 Filter為二方包異常手動捕獲 參考:ht ...
  • 大家好,我是R哥。 今天分享一個爽飛了的面試輔導 case: 這個杭州兄弟空窗期 1 個月+,面試了 6 家公司 0 Offer,不知道問題出在哪,難道是杭州的 IT 崩盤了麽? 報名面試輔導後,經過一個多月的輔導打磨,現在成功入職某上市公司,漲薪 30%+,955 工作制,不咋加班,還不捲。 其他 ...
  • 引入依賴 <!--Freemarker wls--> <dependency> <groupId>org.freemarker</groupId> <artifactId>freemarker</artifactId> <version>2.3.30</version> </dependency> ...
  • 你應如何運行程式 互動式命令模式 開始一個互動式會話 一般是在操作系統命令行下輸入python,且不帶任何參數 系統路徑 如果沒有設置系統的PATH環境變數來包括Python的安裝路徑,可能需要機器上Python可執行文件的完整路徑來代替python 運行的位置:代碼位置 不要輸入的內容:提示符和註 ...