界面控件DevExtreme使用指南 - 控制折叠操作 键盘支持

DevExtreme拥有高性能的HTML5 / JavaScript小部件集合使您可以利用现代Web开发堆栈包括ReactAngularASP.NET CorejQueryKnockout等构建交互式的Web应用程序该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。请注意在开始本教程之前请确保DevExtreme已安装在Angular、Vue、React或jQuery应用程序中。DevExtreme新旧版本帮助文档下载可进QQ qun获取169725316控制操作默认情况下同一时刻只能有一个面板处于展开状态要改变这一点将collapsible 和 multiple属性切换为true。jQueryJavaScript$(function () { $(#accordionContainer).dxAccordion({ // ... // All panels may be collapsed collapsible: true, // Multiple panels may be expanded multiple: true }); });AngularHTMLdx-accordion [collapsible]true !-- All panels may be collapsed -- [multiple]true !-- Multiple panels may be expanded -- /dx-accordionTypeScpiptimport { DxAccordionModule } from devextreme-angular; // ... export class AppComponent { // ... } NgModule({ imports: [ // ... DxAccordionModule ], // ... })VueApp.vuetemplate DxAccordion :collapsibletrue !-- All panels may be collapsed -- :multipletrue !-- Multiple panels may be expanded -- /DxAccordion /template script import devextreme/dist/css/dx.light.css; import DxAccordion from devextreme-vue/accordion; export default { components: { DxAccordion } }; /scriptReactApp.jsimport React from react; import devextreme/dist/css/dx.light.css; import { Accordion } from devextreme-react/accordion; class App extends React.Component { render() { return ( Accordion collapsible{true} {/* All panels may be collapsed */} multiple{true} {/* Multiple panels may be expanded */} /Accordion ); } } export default App;键盘支持最终用户可以使用以下键与UI组件进行交互。您可以使用registerKeyHandler(key, handler)方法实现键的自定义处理程序。jQueryJavaScriptfunction registerKeyHandlers () { const accordion $(#accordionContainer).dxAccordion(instance); accordion.registerKeyHandler(backspace, function(e) { // The argument e contains information on the event }); accordion.registerKeyHandler(space, function(e) { // ... }); }AngularTypeScpiptimport { ..., ViewChild, AfterViewInit } from angular/core; import { DxAccordionModule, DxAccordionComponent } from devextreme-angular; // ... export class AppComponent implements AfterViewInit { ViewChild(DxAccordionComponent, { static: false }) accordion: DxAccordionComponent; // Prior to Angular 8 // ViewChild(DxAccordionComponent) accordion: DxAccordionComponent; ngAfterViewInit () { this.accordion.instance.registerKeyHandler(backspace, function(e) { // The argument e contains information on the event }); this.accordion.instance.registerKeyHandler(space, function(e) { // ... }); } } NgModule({ imports: [ // ... DxAccordionModule ], // ... })Vuetemplate DxAccordion :refmyAccordionRef / /template script import devextreme/dist/css/dx.light.css; import DxAccordion from devextreme-vue/accordion; const myAccordionRef my-accordion; export default { components: { DxAccordion }, data() { return { myAccordionRef } }, computed: { accordion: function() { return this.$refs[myAccordionRef].instance; } }, mounted: function() { this.accordion.registerKeyHandler(backspace, function(e) { // The argument e contains information on the event }); this.accordion.registerKeyHandler(space, function(e) { // ... }); } } /scriptReactApp.jsimport React from react; import devextreme/dist/css/dx.light.css; import { Accordion } from devextreme-react/accordion; class App extends React.Component { constructor(props) { super(props); this.accordionRef React.createRef(); } render() { return ( Accordion ref{this.accordionRef} / ); } get accordion() { return this.accordionRef.current.instance; } componentDidMount() { this.accordion.registerKeyHandler(backspace, function(e) { // The argument e contains information on the event }); this.accordion.registerKeyHandler(space, function(e) { // ... }); } } export default App;