DevExtreme拥有高性能的HTML5 / JavaScript小部件集合使您可以利用现代Web开发堆栈包括ReactAngularASP.NET CorejQueryKnockout等构建交互式的Web应用程序该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。在本文中我们将总结DevExtreme v22.2中一些值得期待的新功能这些功能适用于DevExtreme JavaScript (Angular, React, Vue, jQuery)和基于DevExtreme的ASP. NET MVC/Core控件。DevExpress新旧版本帮助文档下载可进QQ qun获取169725316UI/UX自定义增强表单 - 自定义标签模板目前我们的表单只能显示文本标签然而一些用户需要在编辑器标签中显示图像或其他丰富的内容。为了满足这一需求在新版本中引入自定义标签模板这将利用许多DevExtreme组件中使用的技术——允许开发人员自定义应用程序UI的技术。为了帮助说明此功能的好处下面的表单标签使用图标进行了增强。dx-form [formData]employee dxi-item dataFieldname div *dxTemplatelet data of label person-icon/person-icon Name /div ... /dxi-item /dx-formAccordion – 自定义标题模板的个别项目DevExtreme Accordion允许开发者为所有项目标题指定一个共享的自定义模板在某些情况下您可能需要为每个项目使用不同的模板。在新版本中开发者可以在项目级别上指定标题模板。例如在下面的例子中第一项有一个副标题当然您可以在Accordion中添加按钮、图像或任何自定义内容dx-accordion dxi-item div *dxTemplatelet data of title h1Super Mart of the West/h1 h2Arkansas department/h2 /div ... /dxi-item /dx-accordion编辑器 - 自定义验证消息位置如果编辑器验证失败则在编辑器下方显示一条消息。用户要求在这方面提供更大的灵活性并允许控件在编辑器上方或左侧/右侧显示验证消息官方将在下次主要更新中引入相应的 validationMessagePosition 配置选项。dx-text-box validationMessagePositionleft|right|top|bottom dx-validator dxi-validation-rule typenumber messageValue must be a number /dxi-validation-rule /dx-validator /dx-text-box日历 - 显示周数另一个要求很高的UI增强是在Calendar组件中显示周数开发者可以通过组件配置中的新“showWeekNumbers”选项激活此功能。dx-calendar [showWeekNumbers]true [(value)]currentValue /dx-calendar复选框 - 由终端用户设置不确定值DevExtreme CheckBox支持不确定状态它是通过将组件值设置为null或undefined来启用的。一旦终端用户单击复选框就不可能回到不确定状态。一些用户要求引入一种方法将值重置回不确定的状态为了实现这一点新版本引入一个附加的价值变更模式。在这种模式下每次点击都会旋转三个组件状态——选中、未选中和不确定。dx-check-box [valueChangeMode] default|includeIndeterminate [(value)]value /dx-check-box工具栏 - 多线路自适应模式如果给定设备上没有足够的空间工具栏可以自动隐藏下拉菜单中的项目最终用户可以打开此菜单来调用与隐藏项关联的操作。在此模式下通过换行到下一行工具栏项仍然可见因此最终用户可以立即访问所有可用的项目。dx-toolbar [multiline]true /dx-toolbar数据透视网格导出到Excel - 导出字段面板标题DevExtreme PivotGrid允许开发者将其内容导出到Microsoft Excel (v20.2)目前导出的数据只包括列/行维度值(类别)和交叉点的聚合值(数字)。为了帮助解决特定的用例我们将更新导出引擎以便您也可以包括维度(字段)名称。dx-pivot-grid [dataSource]dataSource (onExporting)onExporting($event) dxo-export [enabled]true [exportFieldHeaders] true /dxo-export /dx-pivot-gridAPI增强弹出 - 隐藏/显示API增强开发这可能已经在弹出窗口的onHiding/ ondisplays事件中使用了 cancel 标志来中止操作(基于特定的条件)有些人要求异步计算条件。例如当您必须等待最终用户批准/拒绝请求时对于这种情况我们的一些组件支持 Promise 类型的 cancel 标志值新版本以同样的方式支持弹出窗口的onHiding/ ondisplays事件中的promise。onHiding: (e) { e.cancel showConfirmation(Are you sure?); // returns a Promise },弹出窗口的show/hide方法返回一个Promise对象该对象在操作完成后被解析。用户要求在这方面有一些灵活性——特别是在事件处理程序通过 cancel 标志取消操作时拒绝Promise。try { await popup.hide(); // closed successfully } catch (e) { // closing was cancelled }TagBox - 提交自定义项目的额外事件DevExtreme TagBox允许终端用户添加自定义项目一旦用户输入自定义文本并按Enter新创建的项就会提交给数据源。为了加速数据输入过程用户要求在TagBox失去焦点时(当用户按Tab键或单击表单的提交/保存按钮时)自动提交自定义项目新版本扩展API来支持这些使用场景。Slider RangeSlider - 延迟 valueChanged 事件当终端用户开始拖动Slider的句柄时组件立即引发valueChanged事件。因此在用户释放句柄之前会引发一系列事件新版本引入一个额外的模式只在用户交互结束时触发一次valueChanged事件。dx-slider valueChangeModeinstant|eventual /dx-slider