红尘客栈大掌柜 发表于 2023-5-22 15:07:41

在DevExpress中使用BandedGridView表格实现多行表头的处理

在之前较早随笔中介绍过实现多行表头的处理,通过手工创建字段以及映射数据源字段属性的方式实现,有些客户反映是否可以通过代码方式更方便的创建对应的处理操作,因此本篇随笔继续探讨这个多行表头的处理的操作,使用代码的方式结合扩展函数处理,快速的实现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.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);
            }初始化BandedGridView信息后,如需绑定数据,那么还需要对GridControl的数据源进行绑定才能进行编辑或者显示,如下所示的代码操作。
/// /// 绑定数据列表/// private void BindData(){    var table = DataTableHelper.CreateTable("Id|int,姓名,外科皮肤科_诊断,外科皮肤科_结论,神经精神科_诊断,神经精神科_结论,内科_诊断,内科_结论,眼科_诊断,眼科_结论,检查时间,备注");      //准备飞行员体检测试数据    for (int i =1; i
页: [1]
查看完整版本: 在DevExpress中使用BandedGridView表格实现多行表头的处理