GridControl-Grid View 网格视图

GridControl-Grid View 网格视图详解

原创已于 2024-10-27 19:48:47 修改 · 1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#grid view

于 2024-06-12 15:05:05 首次发布

Data Grid 数据网格专栏收录该内容

55 篇文章

订阅专栏

GoTo 数据网格和视图入门

GridView是默认的数据网格视图，以传统的表格格式显示数据。“视图”将数据源记录渲染为行，将数据源字段渲染为列。数据值显示在各个单元格中。
在这里插入图片描述

Grid Columns

网格列

重要注意事项

不能将多个数据网格列绑定到同一数据源字段。如果需要执行此操作，请创建Unbound Columns并处理CustomUnboundColumnData事件，以手动将数据源值复制到未绑定的列单元格。此限制也适用于其他数据感知控件（数据网格、树状列表、垂直网格等）。
列字段名称必须唯一。
有关其他数据感知控件中类似功能的信息，请参阅以下帮助文章：列（树状列表）、行（垂直网格）、数据透视网格字段（数据透视网格）。

自动列生成

将数据网格绑定到数据源时，控件会自动为每个绑定的数据字段生成一列（如果未禁用“自动填充列”属性）。对于代码优先的数据源（例如，实体框架模型），可以使用Display属性标记属性，并禁用其AutoGenerateField参数以跳过此属性的列生成。下面代码中的“Display”属性阻止数据网格生成“Additional Info”列。

[Display(AutoGenerateField = false, Description = "This column isn't created")]
public string AdditionalInfo { get; set; }

您可以使用更多的属性来重新排列列、修改其标题的标题、更改其默认的就地编辑器等。请参阅以下主题了解更多信息：数据注释属性。
如果将以前的数据源替换为新的数据源，数据网格将不会自动重新生成列。您需要手动执行此操作，方法是调用数据网格设计器并单击“列”选项卡中的“检索字段”按钮。
在这里插入图片描述
要在代码中执行相同操作，请调用BaseView.PopulateColumns。在更改数据源后直接填充列方法，或在GridControl上填充列方法GridControl.DataSourceChanged事件。

手动添加和删除列

与数据源中声明的数据字段相关联的列称为绑定列。要手动添加此类列，请调用数据网格设计器，切换到“Columns”选项卡并单击“Show Field List”按钮，然后将数据字段拖动到列列表中。没有相应网格列的数据字段将用粗体文本突出显示。
也可以在同一个设计器页面上使用“Add Column” and “Insert Column”按钮。在这种情况下，您需要设置每列的GridColumn.FieldName属性。否则，列将被解除绑定，并且不会从数据源接收单元格值。
要删除列，请使用“Remove Column”设计器按钮，或者在设计时单击列标题并按“Delete”键。若要删除代码中的列，请调用GridView.Columns.Remove方法。
即使将代码中创建的列添加到Columns集合中，这些列也是不可见的。若要显示列，请启用其“可见”属性。也可以使用AddVisible方法创建列，将其绑定到指定的数据字段，然后在视图中显示。

// Create a new column.
GridColumn colPrice = new GridColumn();
// Bind the column to the 'Price' field in a data source.
colPrice.FieldName = "Price";
// Adds the column to the Columns collection. The column is hidden.
gridView.Columns.Add(colPrice);

// Creates a new column, binds it to the 'OrderDate' field in a data source,
// and displays it in the Grid View.
gridView.Columns.AddVisible("OrderDate");

行标题

要修改列标题并添加图像，请在设计时选择一列并调用其智能标记。如果某列未分配标题，则该列将根据相关数据字段的名称生成标题。
在这里插入图片描述

隐藏垂直列边框

您可以通过禁用GridOptionsView来隐藏列和行边界。显示垂直线和网格选项视图。显示水平线设置。GridOptionsView.ShowVerticalLines and GridOptionsView.ShowHorizontalLines

列宽

数据网格将其所有列压缩到其当前客户端区域中。用户可以调整除最后一列以外的所有列的大小，并且总列宽不能超过父视图的宽度。
禁用GridOptionsView.ColumnAutoWidth属性，以允许网格列超越视图边界。如果列占用的空间大于视图提供的空间，则会自动显示水平滚动条。
在这里插入图片描述

最佳适配

为了确保一列或视图的所有列具有足够的宽度，以便单元格完全显示其内容，最终用户可以右键单击列标题，然后选择“最佳匹配”（或“最佳匹配（所有列）”）选项。
在这里插入图片描述

自动填充列

分配给GridView.AutoFillColumn属性会自动调整大小以填充视图提供的任何可用空间。在下面的动画中，自动填充列为“地址”。
在这里插入图片描述

固定列

将列CompanyName的“Fixed”属性设置为“Left”或“Right”，以将该列定位到视图的相应侧。当用户水平滚动视图时，固定列仍然可见。
在这里插入图片描述
如果将“Fixed”特性设置为“MiddleLeft”，则直到用户将该列滚动到视图的左侧，该列才会被定位。当列到达左侧时，它将变为固定列，而其他列将继续滚动。

使用FixedColumnHighlightMode属性可以区分固定列和常规列。

Fixed Columns演示演示了如何为网格列提供自定义弹出菜单，允许用户在运行时定位列。

默认情况下，最终用户可以执行以下操作

拖动右列边缘以调整其大小。

Related API: OptionsColumn.AllowSize, GridOptionsCustomization.AllowColumnResizing.

拖放列标题可以重新排列列。

Related API: OptionsColumn.AllowMove, GridOptionsCustomization.AllowColumnMoving.

通过向下拖动列标题或右键单击标题并选择“隐藏此列”选项来隐藏列。

Related API: OptionsColumn.AllowShowHide, GridOptionsCustomization.AllowQuickHideColumns.

右键单击列标题并选择“列选择器”选项以调用一个对话框，该对话框允许用户将隐藏的列拖回视图。

Related API: GridView.CustomizationFormBounds, GridOptionsCustomization.CustomizationFormSearchBoxVisible, GridView.CustomizationForm, GridView.ShowCustomizationForm

将列标题拖动到组区域中以应用分组。

Related API: OptionsColumn.AllowGroup, GridOptionsCustomization.AllowGroup

单击列标题可按此列的值对数据进行排序。随后的单击会将排序顺序从升序更改为降序和降序。

Related API: OptionsColumn.AllowSort, GridOptionsCustomization.AllowSort

单击列标题中的筛选按钮以筛选网格数据。

Related API: OptionsColumnFilter.AllowFilter, GridOptionsCustomization.AllowFilter

代码识别和访问的网格列

要检索特定列，请使用以下API：

ColumnView.Columns

存储属于此视图的所有列，并通过索引或相关数据字段名称提供对这些列的访问。

ColumnView.FocusedColumn

检索当前关注的单元格所属的列。

ColumnView.GetVisibleColumn

按列的可见索引（GridColumn.VisibleIndex属性）返回列。

Unbound Columns

未绑定列
未绑定列是显示任何自定义数据的网格列。您可以使用未绑定的列来显示来自外部源的数据，将多个数据源合并为一个数据源，或者使用表达式基于其他列数据计算值。

未绑定列和常规绑定列是同一类的对象：GridColumn、BandedGridColumn或LayoutViewColumn类。这意味着未绑定列完全支持所有列功能——排序、分组、筛选、摘要等。
但是，即使所有列都未绑定，数据网格也无法在没有数据源的情况下运行。例如，使用UnboundSource组件来告诉数据网格它应该生成多少行。

创建未绑定的列

要添加未绑定的列，请调用数据网格设计器的“Columns”选项卡，然后单击“Add Column”按钮。在特性网格中，设置两个特性：

GridColumn.FieldName–必须将此属性设置为与任何数据源字段名称都不匹配的唯一值。
GridColumn.UnboundDataType–将此属性设置为列应显示的数据类型。列自动使用与所选数据类型相对应的在位编辑器

如果在代码中添加未绑定的列，请记住显式设置它们的可见性。

未绑定表达式

使用未绑定表达式，可以基于其他列值计算未绑定列的值。表达式是在“表达式编辑器”对话框中构建的。要调用此对话框，请单击GridColumn旁边的省略号按钮。VS属性网格中的UnboundExpression属性。
在这里插入图片描述在代码中，表达式被指定为简单字符串。例如，下面的代码通过从。

UnboundExpression = "[charge_total]*10",

gridView1.Columns.Add(new DevExpress.XtraGrid.Columns.GridColumn()
{
    Caption = "Custom Unbound Column",
    FieldName = "UnboundColumn3",
    UnboundDataType = typeof(string),
    UnboundExpression = "[charge_total]*10",
    Visible = true
});

在运行时修改未绑定的表达式

用户可以右键单击未绑定列的标题，然后选择“Expression Editor…”来修改表达式。您可以选择用户是使用旧版编辑器（与您在设计时使用的编辑器相同），还是使用支持语法高亮显示和自动完成的更新版本。
在这里插入图片描述

具有自定义数据的可编辑未绑定列

ColumnView.CustomUnboundColumnData事件是两个任务的单一入口点：它允许您用值填充单元格，并获得用户编辑（您可以接受或放弃）。读取IsGetData和IsSetData属性的值，为这些场景中的每一个指定不同的操作集。

UnboundColumnDataEventArgs.IsGetData–当需要填充列并且需要提供单元格值时，此属性返回true。
UnboundColumnDataEventArgs.IsSetData–当用户更改了单元格值并且需要将这些编辑保存到源时，此属性将返回true。
Unbound Columns代码示例说明了如何从字典中检索数据并将更改保存回字典。

// Create an unbound column that supports editing
GridColumn unboundColumn = gridView.Columns.AddField("CustomData");
unboundColumn.UnboundDataType = typeof(string);
unboundColumn.Visible = true;
// Handle the CustomUnboundColumnData event
Dictionary<int, string> unboundData = new Dictionary<int, string>();
unboundData[1] = "Can live up to 20 years!";
gridView.CustomUnboundColumnData += (sender, e) =>
{
    if(e.Column.FieldName == "CustomData") {
        // Populate columns
        if(e.IsGetData) {
            if(unboundData.ContainsKey(e.ListSourceRowIndex)) 
                e.Value = unboundData[e.ListSourceRowIndex];
        }
        // Post edits back to the source
        if(e.IsSetData && e.Value != null) {
            unboundData[e.ListSourceRowIndex] = e.Value.ToString();
        }
    }
};

刷新未绑定的列

数据感知控件不缓存未绑定列/行中的值，并在每次绘制、筛选、排序控件等时请求这些值。您可以使用此行为触发更新并重新加载未绑定值。

要重新加载所有当前可见的值，请调用BaseView.LayoutChanged方法，用于刷新整个视图。
若要重新加载特定行或单元格的值，请调用ColumnView.RefreshRow或GridView.RefreshRowCell方法。

Rows

行高

数据网格中有两种类型的行：数据行（显示数据源记录）和非数据行（分组行、新项目行等）。
在这里插入图片描述
默认情况下，行高由字体设置决定。数据网格公开以下API来修改这些高度。

GridView.RowHeight

以像素为单位指定数据行高度。默认值为-1（行没有固定高度）。

GridView.ColumnPanelRowHeight

指定列标题的高度。

GridView.GroupRowHeight

获取或设置组行的高度。

GridView.RowSeparatorHeight

指定行之间的垂直距离。将此属性设置为零不会删除行之间的水平线。要执行此操作，请禁用GridOptionsView。ShowHorizontalLines设置。

GridView.CalcRowHeight

对于每一行都会重复引发此事件，并允许您为每一行设置单独的高度参数。下面的代码片段演示了如何根据“RowHeight”数据源字段中的值设置行高度。

using DevExpress.XtraGrid.Views.Grid;

private void gridView1_CalcRowHeight(object sender, RowHeightEventArgs e) {
    GridView view = sender as GridView;
    if (view == null) return;
    if(e.RowHandle >= 0)
        e.RowHeight = (int)view.GetDataRow(e.RowHandle)["RowHeight"];
}

自动行高

行单元格剪切无法完全显示的内容。要更改此行为，请使用MemoEdit、TokenEdit或PictureEdit编辑器作为所需列的就地编辑器，并启用GridOptionsView.RowAutoHeight设置。这将允许数据网格数据行动态适应内容并获得不同的高度。
在这里插入图片描述

隐藏行边框

您可以通过禁用GridOptionsView来隐藏列和行边界。 GridOptionsView.ShowVerticalLines 和 GridOptionsView.ShowHorizontalLines
在这里插入图片描述

行指示器面板

行指示器面板是停靠在数据网格左边缘的水平条带。用户可以单击此栏来选择任何数据网格行。
行指示器面板显示各种图标，具体取决于当前选择的行和正在进行的行操作。
在这里插入图片描述

行多选

如果ColumnViewOptionsSelection。启用了“多选”选项，最终用户可以使用字幕选择、键盘箭头键和按下Ctrl/Shift键的鼠标单击来选择多行。
在这里插入图片描述

Web样式行选择

除了单击行指示器面板，用户还可以使用复选框来选择数据行。若要启用这些复选框，请设置GridOptionsSelection。GridMultiSelectMode的MultiSelectMode属性。CheckBoxRowSelect值。仅当启用“行多选”时，Web样式选择才可用。
在这里插入图片描述

访问代码中的行-行句柄

每个数据网格行都有三个整数值来标识它：一个数据源索引、一个行句柄和一个可见索引。

数据源索引

在绑定列表中指定从零开始的行索引。
是在对数据进行排序、分组或筛选时不变的常数值。
对于组行，它们将指向组中的第一个数据行。
用于访问数据。

行句柄

从上到下对应于行顺序的从零开始的索引。
组行句柄是以-1开头的负值。该顺序与分组行从上到下的顺序相匹配。
网格为“新建项目行”、“自动筛选行”和“无效行”指定保留的行句柄。
在每次数据操作之后，都会将行句柄重新分配给行。
筛选视图时，仅为与筛选器匹配的行创建行和行句柄。

可见索引

从上到下匹配可见行顺序的从零开始的索引。
如果服务行显示在数据行和组行上方，则会为其分配负索引。
在每次数据操作（包括数据排序、分组和筛选）之后，都会重新分配可见索引。
可见索引仅分配给展开组中的行。因此，索引在每次展开/折叠操作之后都会更新。

对于主详图数据，所有详图视图都有自己唯一的可见索引和行句柄。

Row Count

GridView.RowCount属性返回当前在视图中可见的记录数。当数字更改时，BaseView.RowCountChanged事件触发。例如，您可以处理此事件以显示一个表单，该表单允许用户在没有符合当前搜索查询的记录时创建新记录。

using DevExpress.XtraGrid.Views.Grid;

private void gridView1_RowCountChanged(object sender, EventArgs e) {
    GridView view = sender as GridView;
    if(view.RowCount == 0) {
        using(var form = new SpaceObjectForm())
            form.ShowDialog();
    }
}

遍历行
当您需要逐一处理所有数据网格行时，请使用以下技术。

获取BaseView.DataRowCount属性值，以确定现有行数或BaseView.RowCount属性，仅获取当前可见的行数。
要更改所有现有行，请实现一个循环，遍历从0到DataRowCount-1的行句柄。
如果只需要处理可见行，请从具有零句柄的行开始，然后通过调用ColumnView获取下一行。GetNextVisibleRow方法。
在ColumnView中换行。BeginSort/ColumnView.EndSort方法对，以防止在处理行时重新加载数据。否则，更改单元格值可能会更改行顺序（以及行句柄），这将导致行处理算法出现故障。

Cells

内容对齐方式

显示数值的数据网格单元格将其内容向右对齐。显示其他类型数据的单元格将其内容排列在左侧。若要更改单元格内容对齐方式，请处理ColumnView.RowCellDefaultAlignment事件。
在这里插入图片描述

选择模式

使用默认网格设置，用户只能选择整行。设置GridOptionsSelection.GridMultiSelectMode的MultiSelectMode.CellSelect值允许用户选择单个单元格。在这种模式下，用户可以使用“Ctrl”和“Shift”键一次选择多个单元格。

显示文本和单元格值

单元格值是存储在数据源中的值。单元格的显示文本是显示给用户的值。当数据网格对数据进行排序或过滤时，它会处理单元格值（而不是显示文本）。您可以使控件按单元格显示值对数据进行排序和筛选。为此，请使用GridColumn.SortMode和GridColumn.FilterMode属性。

某些网格功能（例如格式化）会改变向用户显示实际单元格值的方式。若要在不更改基础值的情况下手动修改单元格的显示文本，请处理ColumnView.CustomColumnDisplayText事件。在以下示例中，如果属于“长度”列的单元格的值大于20，则不显示任何内容。

gridView.CustomColumnDisplayText += (sender, e) => {
        if(e.Column.FieldName == "Length") {
            double val = (double)e.Value;
            if (val > 20)
                e.DisplayText = string.Empty;
        }
    };

如何在网格单元中放置图像

可以使用不同的技术在数据网格单元内显示图像（图示符、图标、图片）。请注意，您不能使用GridColumn.CellAppearance.Image属性（数据网格将忽略此设置）。

编辑器上下文图像

RepositoryItemTextEdit.ContextImageOptions组允许您将光栅或矢量图标分配给RepositoryItemTextEdit对象。如果需要为所有列单元格显示相同的图标，并保持单元格文本可编辑，请使用此技术。

创建了一个非绑定列并设置其相应的属性，属性设置如下：

FieldName设为 Photo(该字段名必须是唯一的)
UnboundType设为 UnboundColumnType.Object
ColumnEdit设为RepositoryItemPictureEdit类的实例(该操作PictureEdit 为该列的内置编辑器)
添加GridView的CustomUnboundColumnData事件，用于为非绑定列填充数据。

private void gridView1_CustomUnboundColumnData(object sender,
            DevExpress.XtraGrid.Views.Base.CustomColumnDataEventArgs e)
{
    GridView gridView = sender as GridView;
    if (e.Column.FieldName == "photo" && e.IsGetData)
    {
        Image img = img = Image.FromFile("D:\\00053.png");
        e.Value = img;
    }
}

选中“使用图像编辑”

如果需要用图标替换布尔单元格值，请为此列指定“检查-编辑”编辑器。编辑器的ImageOptions属性允许您设置“Checked”和“Unchecked”编辑器状态的图标。您还需要设置编辑器的 CheckBoxOptions.Style设置为“custom”。

using DevExpress.XtraEditors.Repository;  

RepositoryItemCheckEdit checkEdit = 
    gridControl1.RepositoryItems.Add("CheckEdit") as RepositoryItemCheckEdit;  
checkEdit.ImageOptions.ImageChecked = Image.FromFile("..\\..\\read.bmp");  
checkEdit.ImageOptions.ImageUnchecked = Image.FromFile("..\\..\\unread.bmp");  
checkEdit.CheckBoxOptions.Style = DevExpress.XtraEditors.Controls.CheckBoxStyle.Custom;  
gridView1.Columns["IsRead"].ColumnEdit = checkEdit;  
gridControl1.RepositoryItems.Add(checkEdit);

图像组合框

如果单元格显示要用图像替换的枚举值，请使用链接到ImageList或DevExpress图像集合的ImageComboBoxEdit编辑器。

RepositoryItemImageComboBox imageCombo =
                gridControl1.RepositoryItems.Add("ImageComboBoxEdit") as RepositoryItemImageComboBox;
DevExpress.Utils.ImageCollection images = new DevExpress.Utils.ImageCollection();
images.AddImage(Properties.Resources.Add_16x16);
images.AddImage(Properties.Resources.Close_16x16);
images.AddImage(Properties.Resources.DeleteList_16x16);
imageCombo.SmallImages = images;
// The first argument is the item description, visible to end users
// The second argument is the cell (data source) value
// The third argument is the index of an image inside the "SmallImages" collection
imageCombo.Items.Add(new ImageComboBoxItem("Minor", (short)1, 0));
imageCombo.Items.Add(new ImageComboBoxItem("Moderate", (short)2, 1));
imageCombo.Items.Add(new ImageComboBoxItem("Severe", (short)3, 2));
imageCombo.GlyphAlignment = DevExpress.Utils.HorzAlignment.Center;
gridView1.Columns["Severity"].ColumnEdit = imageCombo;
gridControl1.RepositoryItems.Add(imageCombo);

条件格式化

当您设置了静态图标以显示不同的值或值范围时，建议使用此技术。在这种情况下，图标显示在单元格值旁边。
条件格式化
在这里插入图片描述

用图像填充单元格

使用PictureEdit编辑器可以使用图像填充整个网格单元。

自定义

GridView.CustomDrawCell事件允许您在网格单元内绘制图像。

private void gridView1_CustomDrawCell(object sender, DevExpress.XtraGrid.Views.Base.RowCellCustomDrawEventArgs e)
{
    if (e.RowHandle != GridControl.NewItemRowHandle && e.Column.FieldName == "charge_total"
                                                    && Double.Parse(e.CellValue.ToString()) > 40)
    {
        e.DefaultDraw();
        //TODO: specify required offsets
        e.Cache.DrawImage(Properties.Resources.Apply_16x16, e.Bounds.X , e.Bounds.Y );
    }

}

在这里插入图片描述

HTML格式化

使用图像标记将图像嵌入到单元格中。请注意，此技术使单元格不可编辑。

gridView1.HtmlImages = imageCollection1;
gridView1.RowHeight = 60;
// Create an unbound column
GridColumn unbound = new GridColumn();
unbound.UnboundDataType = typeof(string);
unbound.FieldName = "unboundImageColumn";
unbound.Visible = true;
unbound.Caption = "Icon";
gridView1.Columns.Add(unbound);
// Assign a RepositoryItemHypertextLabel as the unbound column editor
RepositoryItemHypertextLabel htLabel = new RepositoryItemHypertextLabel();
htLabel.HtmlImages = imageCollection1;
gridControl1.RepositoryItems.Add(htLabel);
unbound.ColumnEdit = htLabel;
// Set custom cell text
gridView1.CustomUnboundColumnData += GridView1_CustomUnboundColumnData;

private void GridView1_CustomUnboundColumnData(object sender, CustomColumnDataEventArgs e)
{
    if (e.Column.Caption == "Icon")
    {
        // Image from HtmlImages collection
        e.Value = "<image=add_32x32.png>";
        // Image from resources
        //e.Value = "<image=#_589812_200>";
    }
}

未绑定的列

如果您需要一个包含图像的列，而该列与特定的数据源值无关，请使用RepositoryItemPictureEdit对象创建一个未绑定的列作为在位编辑器。处理ColumnView.CustomUnboundColumnData事件，以向此列提供图像。

using System.IO;
using System.Drawing;
using System.Collections.Generic;
using DevExpress.XtraGrid.Views.Base;
using DevExpress.XtraGrid.Views.Card;

Dictionary<string, Image> imageCache = new Dictionary<string, Image>();
private void CardView1_CustomUnboundColumnData(object sender, CustomColumnDataEventArgs e) {
    if (e.IsSetData)
        return;
    CardView view = sender as CardView;
    var path = (string)view.GetListSourceRowCellValue(e.ListSourceRowIndex, "Path");
    if (string.IsNullOrEmpty(path))
        return;
    try {
        e.Value = LoadImage(path);
    }
    catch { }
}

Image LoadImage(string path) {
    Image img;
    if(!imageCache.TryGetValue(path, out img)) {
        if(File.Exists(path))
            img = Image.FromFile(path);
        imageCache.Add(path, img);
    }
    return img;
}

单元格合并

在GridView和BandedGridView视图中，具有相同值的单元格可以自动合并。请注意，合并依赖于单元格值，而不是单元格显示文本。
在这里插入图片描述

合并的单元格有以下限制：

无法编辑合并的单元格。
行多选被禁用。
合并的行无法显示预览。如果GridOptionsView.ShowPreview选项设置为true，则无论GridOptionsView如何，都无法合并具有相同值的相邻单元格。AllowCellMerge属性的值。
将忽略聚焦行和单元格的外观设置（GridViewAppearances.FocusedRow和GridViewApparances.FocusedCell属性）。
用于绘制偶数行和奇数行的外观设置将被忽略（GridViewAppearances.EvenRow和GridViewAppareances.OddRow属性）。