DevExpress v24.1 更新亮点解析（四）：JS 和 ASP.NET Core 控件

新闻资讯

关注工具软件产品最新动态，了解软件开发行业新趋势。

原创

软件开发

来源：DevExpress

DevExpress

报表

图表

ui界面

asp.net

JavaScript

API

HTML5

2024-06-26

DevExpress

报表

图表

ui界面

asp.net

JavaScript

API

HTML5

#DevExpress #DevExpress ASP.NET Subscription #DevExpress Universal Subscription

DevExpress JavaScript 和 ASP.NET Core 组件 v24.1

新的拆分器组件
UI/UX 和 API 增强功能
JS 脚本大小
Angular 18 支持
Angular 的新 DxHttpModule
影子 DOM 支持 (CTP)
可访问性
ASP.NET Core - DateOnly/TimeOnly 类型支持
ASP.NET Core 数据验证
ASP.NET Core - 富文本编辑器

新的拆分器组件

我们新的Splitter组件允许您将页面或部分分成多个可调节的窗格。

这些窗格可以是：

可调整大小-带有拖动图标的手柄允许用户修改大小。
可折叠- 带有箭头图标的手柄允许用户折叠窗格。

如果启用这两个属性，手柄将显示两个图标，用户可以根据需要调整/折叠给定窗格的大小。如果两个属性都为 false，手柄将保持隐藏状态。

Splitter 组件可以垂直或水平放置。方向会影响以下与窗格相关的属性（可以以像素或百分比指定）

size - 指定窗格的初始宽度（水平方向）或高度（垂直）。
maxSize，minSize-定义窗格的大小调整限制。
collapsedSize - 指定折叠窗格折叠时的大小。

Angular
<dx-splitter orientation="vertical">
    <dxi-item 
          [collapsible]="true" 
          size="50%" 
          minSize="20px" 
          сollapsedSize="30px" 
      >
      </dxi-item> 
</dx-splitter>

React
const App = () => ( 
    <Splitter orientation="vertical">
        <Item 
            collapsible={true} 
            size="50%" 
            minSize="20px" 
            сollapsedSize="30px" 
        />
    </Splitter> 
); 
export default App;

Vue
<template>
    <DxSplitter orientation="vertical">
        <DxItem 
            :collapsible="true" 
            size="50%" 
            min-size="20px"
            collapsed-size="30px" 
        />
    </DxSplitter> 
</template>

jQuery
$('#splitter').dxSplitter({ 
    orientation: 'vertical', 
    items: [ 
      { 
        collapsible: true, 
        size: '50%', 
        minSize: '20px', 
        collapsedSize: '30px', 
      }, 
    ], 
});

拆分窗格可以包含多种内容类型，从简单的 HTML 到复杂的组件。您可以将 HTML 标记放在 item 标签内，或使用以下属性向窗格填充内容：

itemTemplate - 为所有窗格定义自定义模板。
模板- 为每个特定窗格设置自定义模板。

要自定义分割器的外观，请指定分隔符大小属性以修改手柄短边的大小。您还可以通过 CSS 更改颜色和图标。

在 Splitter 组件中启用allowKeyboardNavigation以通过快捷键控制 Splitter 操作，镜像鼠标功能。要查看完整的快捷键列表，请参阅以下帮助主题：辅助功能。

对于复杂的布局，嵌套分割器，如我们的演示中所示（它也强调了使用模板插入内容）。

选择以下受支持的开发框架之一来探索此新功能的功能：

UI/UX 和 API 增强功能

#DropDownButton - 自定义按钮模板

DropDownButton使用 v24.1，您可以用自定义内容（例如头像或多行文本）替换基本按钮。

Angular
<dx-drop-down-button icon="spindown" template="button-template">
    <div *dxTemplate="let data of 'button-template'">
        <div class="text-container">
            <div class="name"> {{ currentEmployee.FirstName }} {{ currentEmployee.LastName }} </div>
            <div class="position"> {{ currentEmployee.Position }} </div> 
        </div>
        <span class="dx-icon-{{ data.icon }} dx-icon"></span>
    </div>
</dx-drop-down-button>

React
const renderButton = (data) => { 
    return ( 
        <React.Fragment>
            <div className="text-container">
                <div class="name"> {currentEmployee.FirstName} {currentEmployee.LastName} </div>
                <div class="position"> {currentEmployee.Position} </div>
            </div>
            <span className={"dx-icon-" + data.icon + " dx-icon"}></span>
        </React.Fragment>
    ); 
};
export default function App() { 
    return ( 
        <DropDownButton 
            icon="spindown" 
            render={renderButton} 
        />
    ); 
}

Vue
<template>
    <DxDropDownButton 
        icon="spindown" 
        template="button-template" 
    >
        <template #button-template="{ data }">
            <div class="text-container">
                <div class="name"> {{ currentEmployee.FirstName }} {{ currentEmployee.LastName }} </div> 
                <div class="position"> {{ currentEmployee.Position }} </div> 
            </div>
            <span :class="'dx-icon-' + data.icon + ' dx-icon'"></span>
        </template>
    </DxDropDownButton>
</template>

jQuery
$("#myDropDownButton").dxDropDownButton({ 
    icon: 'spindown', 
    template: (data, $element) => { 
        const $textContainer = $('<div class="text-container">').appendTo($element); 
        $(`<div class='name'>${currentEmployee.FirstName} {currentEmployee.LastName}</div>`).appendTo($textContainer); 
        $(`<div class='position'> ${currentEmployee.Position} </div>`).appendTo($textContainer); 
        $(`<span class="dx-icon-${data.icon} dx-icon"></span>`).appendTo($element); 
    }, 
});

选择以下受支持的开发框架之一来探索此新功能的功能：

#菜单/上下文菜单 — 项目滚动

现在可以滚动超出页面大小的子菜单（在菜单或上下文菜单）。

您可以根据需要使用 CSS 样式表自定义子菜单。例如，以下代码片段限制了子菜单的高度ContextMenu：

CSS
.dx-context-menu .dx-menu-items-container { 
    max-height: 200px; 
}

在Menu组件中，使用onSubmenuShowing函数配置与滚动相关的设置。例如，当项目数量超过指定限制时，您可以限制子菜单的大小：

Angular
onSubmenuShowing({ submenuContainer, itemData } { 
    if (itemData.items.length > 5) { 
        submenuContainer.style.maxHeight = this.limitSubmenuHeight ? `200px` : ''; 
    } 
}

React
const onSubmenuShowing = useCallback(({ submenuContainer, itemData }) => { 
    if (itemData.items.length > 5) { 
        submenuContainer.style.maxHeight = limitSubmenuHeight ? `200px` : ''; 
    } 
}, []);

Vue
function onSubmenuShowing({ submenuContainer, itemData } { 
    if (itemData.items.length > 5) { 
        submenuContainer.style.maxHeight = limitSubmenuHeight.value ? '200px' : ''; 
    } 
}

jQuery
onSubmenuShowing: ({ submenuContainer, itemData }) => {  
      if (itemData.items.length > 5) {  
        $(submenuContainer).css('maxHeight', 200 || '');  
      }    
}

选择以下受支持的开发框架之一来探索此新功能的功能：

#表单 — 组标题自定义内容

我们新的 Form groupItem.captionTemplate选项支持对组标题进行自定义内容替换。

选择以下受支持的开发框架之一来探索此新功能的功能：

#HTML 编辑器——拼写检查和 CSP 支持

DevExtreme HTML 编辑器现在在所有支持的浏览器中使用拼写检查功能。正如您所期望的，此附加功能通过实时拼写更正/建议支持增强了文本编辑功能。

以前的版本在将带有内联样式的标记传递到我们的 HTML 编辑器时需要内容安全策略 (CSP)指令。DevExtreme HTML 编辑器 v24.1 完全支持 CSP。

JS 脚本大小

在我们上一个主要发布周期 (v23.2) 中，我们减少了内置主题的 CSS 大小。在此发布周期中，我们减少了 DevExtreme JS 脚本的大小，如下所示：

我们更新了 DevExtreme JS 代码的 ECMAScript 编译目标。这消除了所有现代浏览器支持的操作对复杂语法构造（由于转译）的需求。

我们停止存储时区数据。我们已将时区相关操作切换为使用内部浏览器时区引擎。

这些修改将捆绑包大小减少了约 12%。

Angular 18 支持

DevExtreme v24.1 支持 Angular 18。早期版本（例如 DevExtreme v23.2）与 Angular 18 不兼容。

请参阅 Angular更新指南和迁移到新版本帮助主题来更新您的应用程序。

Angular 的新 DxHttpModule

#简化的请求拦截

Angular HttpClientModule是一个简化 HTTP 请求的模块。它支持请求和响应拦截器，允许您引入身份验证令牌或跨所有 HTTP 请求记录等功能。

以前，我们的DataSource、FileUploader和Map组件依赖非原生的 Angular Ajax 请求进行服务器通信。

在 v24.1 中，我们将这些组件从 Ajax 转换为HttpClientModule。只需导入我们的DxHttpModule即可激活此新功能。

影子 DOM 支持 (CTP)

Shadow DOM代表三种 Web 组件规范之一，由HTML 模板和自定义元素补充。

Shadow DOM 允许将隐藏的、单独的文档对象模型 (DOM) 附加到元素，称为“Shadow Host”。这个隐藏的 DOM 称为“Shadow DOM”，可以包含其他嵌套的 Shadow Host，形成称为 Shadow Tree 的结构。

这是使用独立 CSS 和 JavaScript 创建组件的直接方法。许多日常 Web 界面都使用 Shadow DOM（所有主流浏览器都提供此功能）。

此发布周期在 Angular、React 和 Vue 中引入了 Shadow DOM 支持作为社区技术预览 (CTP)。因此，您现在可以在自定义 HTML 元素 (Web 组件) 的 Shadow DOM 中使用 DevExtreme 组件。

注意：CTP 有限制。请参阅我们的文档以了解更多信息：Angular | React | Vue

选择以下受支持的开发框架之一来探索此新功能的功能：

Angular | React | Vue

可访问性

v24.1 与可访问性相关的增强功能包括 NVDA 支持，以改进以下组件的键盘导航和发音支持：

标签

标签面板

标签框

列表

下拉按钮

日历

带有主从关系的数据网格

此外，DataGrid现在TreeList满足状态消息标准。

您现在可以在许多 DevExtreme 演示中访问可访问性合规性（使用AXE®网络可访问性评估工具），其中包括：

数据网格概述

树形列表概述

HTML 编辑器概述

图表概述

AXE 可访问性报告示例：

ASP.NET Core - DateOnly/TimeOnly 类型支持

DevExtreme ASP.NET Core DataGrid 现在支持 DateOnly 和 TimeOnly 数据类型。与传统的 DateTime 数据类型相比，DateOnly 和 TimeOnly 数据类型具有以下优势：

使用清晰度。
提高了数据库兼容性。
序列化期间占用的空间更少。
能够减轻与不同时区相关的潜在错误/不一致。

以下 DataGrid 功能支持 DateOnly 和 TimeOnly 数据类型：

与过滤相关的 UI 元素（过滤行、过滤面板、搜索面板、标题过滤器）
分组（对间隔数据进行分组操作，包括标题过滤器的外部和内部）
摘要（最小值/最大值，计数）

Razor
<div id="grid"></div> 
<script> 
    $(function() { 
        $("#grid").dxDataGrid({ 
            columns: [ 
                { 
                    dataField: "orderDateOnly", 
                    dataType: "date", 
                    headerFilter: { 
                        groupInterval: "quarter" 
                    } 
                }, 
                { 
                    dataField: "orderTimeOnly", 
                    dataType: "time", 
                },] 
          }); 
    }); 
</script>

ASP.NET Core 数据验证

#独立编辑器验证

在此版本中，您可以使用Razor 语法（除了基于模型的方法）直接向 DevExtreme 编辑器添加验证规则。

此方法可以在下列情况下使用：

当无法更改模型时修改验证规则，例如当模型在视图之间共享时。
向视图添加额外的编辑器并定义独立于模型的相关验证规则。

Razor
@( 
    Html.DevExtreme().TextBoxFor(m => m.StringProperty).ValidationRules(tvr => { 
        tvr.AddRequired(); 
    }) 
)

#远程属性 - AddedFields 属性支持

在 ASP.NET Core 中，Remote特性有助于客户端验证。其AddedFields属性可实现基于服务器的字段组合验证。

此版本引入了对AdditionalFieldsDevExtreme DataGrid 和 TreeList 中的选项的支持。

以下代码片段验证 DataGrid 列中的电子邮件地址。当用户输入数据库中存在的电子邮件时，它会确定是创建新的个人资料还是编辑现有记录（请参阅 RemoteValidation 控制器）。要启用此验证，请将字段传递ID给AdditionalFields：

View
@(Html.DevExtreme().DataGrid<EmployeeValidation>() 
    .Editing(editing => { 
          editing.AllowUpdating(true); 
          editing.AllowAdding(true); 
    }) 
    .Columns(columns => { 
        columns.AddFor(m => m.ID); 
        columns.AddFor(m => m.Email); 
    }) 
)

Model
using System.ComponentModel.DataAnnotations; 
 
public class EmployeeValidation { 
    public int ID { get; set; } 
 
    [Remote("CheckUniqueEmailAddress", "RemoteValidation", AdditionalFields = nameof(ID))] 
    public string Email { get; set; } 
}

远程验证控制器
[HttpPost] 
public JsonResult CheckUniqueEmailAddress(EmployeeValidation model) { 
    var isValid = !db.Employees.Any(emp => { 
        var equals = string.Equals(emp.Email, model.Email, StringComparison.OrdinalIgnoreCase); 
        return model.ID != emp.ID &amp;&amp; equals; 
    }); 
    return Json(isValid); 
}

ASP.NET Core - 富文本编辑器

#新的表 API

DevExpress ASP.NET 和 Blazor 订阅

使用 v24.1，适用于 ASP.NET Core 的 DevExpress富文本编辑器允许您在运行时修改表格布局、装饰和结构。

JavaScript
const columnCount = 5;
const rowCount = 5;
const table = richEdit.document.tables.create(0, columnCount, rowCount);
table.autoFit = false;
table.styleName = "Grid Table 5 Dark Accent 1";
table.width = { type: TableWidthType.Twips, value: 9000 };
table.tableStyleOptions = {
    ...table.tableStyleOptions,
    totalRow: true,
    headerRow: true,
}
for (let i = 0; i < table.rows.count; i++) {
    const cells = table.rows.getByIndex(i)!.cells;
    for (let j = 0; j < cells.count; j++) {
        const cell = cells.getByIndex(j)!;
        richEdit.document.insertText(cell.interval.start, `Row ${i} Cell ${j}`);
    }
}

#HTML 导出/导入

DevExpress ASP.NET 和 Blazor 订阅

富文本编辑器现在支持导入和导出HTML 格式的文档。您可以向主子文档添加 HTML 标记（insertHtml方法重载）、获取主子文档的 HTML 文本和标记（getHtml方法重载）以及将文档内容下载到 HTML 格式的文件中。

相关产品

最新文章

相关文章