界面控件DevExpress Blazor v26.1新版亮点 - TreeList & 数据编辑器

原创于 2026-08-19 14:11:46 发布 · 140 阅读

本内容遵循CC 4.0 BY-SA版权协议

DevExpress Blazor控件为使用C#为Blazor服务器和Blazor WebAssembly创建高影响力的用户体验，其附带了70+个原生的Blazor组件（包括DataGrid、Pivot Table、Scheduler、图表、数据编辑器和报表）。

在上文中（点击这里回顾>>）为大家介绍了DevExpress Blazor v26.1中增强的智能粘贴和数据透视表功能，本文将继续介绍新版本中Grid 和 TreeList控件增强功能，希望能帮助到大家~欢迎点赞关注哦，不定期更新~

DevExpress新旧版本帮助文档下载可进QQ qun获取：169725316

Blazor TreeList

未绑定的列

DevExpress Blazor TreeList组件现在支持未绑定的列，这些列显示未存储在基础数据源中的值。使用未绑定的列来显示补充/计算数据，而不修改原始数据模型。

以下API允许用户使用数据填充未绑定的列：

DxTreeList.UnboundColumnData — 允许用户实现自定义逻辑或从自定义/外部数据源获取列值。
DxTreeListDataColumn.UnboundExpression — 指定用于计算列值的表达式，导出到Excel时，可以将未绑定表达式导出为公式。

Razor

<DxTreeList Data="TreeListData"
            UnboundColumnData="TreeList_UnboundColumnData" ... >
    <Columns>
        <DxTreeListDataColumn FieldName="AprilSales" />
        <DxTreeListDataColumn FieldName="MaySales" />
        <DxTreeListDataColumn FieldName="JuneSales" />
        <DxTreeListDataColumn FieldName="Q2Sales" Caption="Q2 Sales"
                              UnboundType="TreeListUnboundColumnType.Decimal"
                              UnboundExpression="[AprilSales] + [MaySales] + [JuneSales]" />
        <DxTreeListDataColumn FieldName="Q2YoYChange" Caption="Q2 YoY Change (%)"
                              UnboundType="TreeListUnboundColumnType.Decimal" />
    </Columns>
</DxTreeList>

@code {
    // ...
    void TreeList_UnboundColumnData(TreeListUnboundColumnDataEventArgs e) {
        if(e.FieldName == "Q2YoYChange") {
            var sales = ((SalesByRegion) e.DataItem);
            var currentValue = (decimal)e.GetRowValue("Q2Sales");
            var prevValue = sales.AprilSalesPrev + sales.MaySalesPrev + sales.JuneSalesPrev;
            e.Value = (currentValue - prevValue) / currentValue;
        }
    }
}

Blazor Data Editors（数据编辑器）

可调焦按钮

DevExpress Blazor数据编辑器包括用于命令按钮的新的可聚焦选项，一旦激活，按钮就包含在页面的选项卡序列中，用户可以使用键盘与它们交互。

Razor

<DxDateEdit @bind-Date="@DateTimeValue"
            ShowDropDownButton="false">
    <Buttons>
        <DxEditorButton IconCssClass="editor-icon editor-icon-chevron-left-small"
                        Tooltip="Previous Date"
                        Position="@EditorButtonPosition.Left"
                        Focusable="true"
                        Click="@(_ => OnChangeDayButtonClick(false))" />
        <DxEditorButton IconCssClass="editor-icon editor-icon-chevron-right-small"
                        Tooltip="Next Date"
                        Position="@EditorButtonPosition.Right"
                        Focusable="@true"
                        Click="@(_ => OnChangeDayButtonClick(true))" />
        <DxDateEditDropDownButton Focusable="true" />
    </Buttons>
</DxDateEdit>

键盘和鼠标滚轮交互选项

DevExpress官方添加了新的选项来控制用户是否可以使用箭头键和鼠标滚轮更改编辑器值：AllowUpDownArrowKeys和AllowMouseWheel，以下编辑器类支持这些新属性：

DxMaskedInput, DxMaskedInputSettings
DxSpinEdit, DxSpinEditSettings
DxDateEdit, DxDateEditSettings (如果日期编辑器使用掩码，则应用新属性)
DxTimeEdit, DxTimeEditSettings (如果日期编辑器使用掩码，则应用新属性)

将AllowUpDownArrowKeys和AllowMouseWheels属性设置为false，以防止意外更改，并确保更可控的用户体验。

Razor

<DxSpinEdit @bind-Value="@NumericValue"
            AllowUpDownArrowKeys="false" />

<DxDateEdit @bind-Date="@DateTimeValue"
            Mask="@DateTimeMask.ShortDate"
            AllowUpDownArrowKeys="false"
            AllowMouseWheel="false" />

<DxGrid Data="@employees" EditMode="GridEditMode.EditRow">
    <Columns>
        @*...*@
        <DxGridDataColumn FieldName="HireDate">
            <EditSettings>
                <DxDateEditSettings Mask="@DateTimeMask.ShortDate" AllowUpDownArrowKeys="false" AllowMouseWheel="false" />
            </EditSettings>
        </DxGridDataColumn>
    </Columns>
</DxGrid>