界面控件DevExtreme使用指南 - 折叠组件快速入门（一）

DevExtreme拥有高性能的HTML5 / JavaScript小部件集合使您可以利用现代Web开发堆栈包括ReactAngularASP.NET CorejQueryKnockout等构建交互式的Web应用程序该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。DevExpress新旧版本帮助文档下载可进QQ qun获取169725316请注意在开始本教程之前请确保DevExtreme已安装在Angular、Vue、React或jQuery应用程序中。Accordion UI组件包含几个面板一个显示在另一个面板下面。本教程展示如何将Accordion折叠添加到页面并配置组件的核心设置因此开发者将创建以下UI组件本教程中的每一节都描述了单个配置步骤开发者也可以在以下GitHub存储库中找到完整的源代码getting-started-with-accordion。创建一个Accordion折叠jQuery将DevExtreme添加到jQuery应用程序中并使用以下代码创建Accordion:index.js$(function() { $(#accordion).dxAccordion({ }); });index.htmlhtml head !-- ... -- script typetext/javascript srchttps://code.jquery.com/jquery-3.5.1.min.js/script link relstylesheet hrefhttps://cdn3.devexpress.com/jslib/22.2.5/css/dx.light.css script typetext/javascript srchttps://cdn3.devexpress.com/jslib/22.2.5/js/dx.all.js/script script typetext/javascript srcindex.js/script /head body div idaccordion/div /body /htmlAngular将​​​​​​​DevExtreme添加到你的Angular应用中并使用以下代码创建一个Accordionapp.component.htmldx-accordion/dx-accordionapp.component.tsimport { Component } from angular/core; Component({ selector: app-root, templateUrl: ./app.component.html, styleUrls: [./app.component.css] }) export class AppComponent { }app.module.tsimport { BrowserModule } from angular/platform-browser; import { NgModule } from angular/core; import { AppComponent } from ./app.component; import { DxAccordionModule } from devextreme-angular; NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, DxAccordionModule ], providers: [ ], bootstrap: [AppComponent] }) export class AppModule { }Vue将​​​​​​​DevExtreme添加到您的Vue应用程序中并使用以下代码创建AccordionApp.vuetemplate DxAccordion / /template script import devextreme/dist/css/dx.light.css; import { DxAccordion } from devextreme-vue/accordion; export default { components: { DxAccordion } } /scriptReact将​​​​​​​DevExtreme添加到React应用程序中并使用以下代码创建AccordionApp.jsimport React from react; import devextreme/dist/css/dx.light.css; import { Accordion } from devextreme-react/accordion; function App() { return ( Accordion / ); } export default App;将Accordion折叠绑定到数据开发者可以从数据源或项目数组中显示Accordion数据注意每个数据源对象必须包含标题字段其值指定面板的标题。jQueryindex.js$(function() { $(#accordion).dxAccordion({ dataSource: employees }); });index.htmlhead !-- ... -- script typetext/javascript srcdata.js/script /headdata.jsconst employees [{ ID: 1, Prefix: Mr., FirstName: John, LastName: Heart, Position: CEO, State: California, BirthDate: 1964/03/16, }, { ID: 2, Prefix: Mrs., FirstName: Olivia, LastName: Peyton, Position: Sales Assistant, State: California, BirthDate: 1981/06/03, }, { ID: 3, Prefix: Mr., FirstName: Robert, LastName: Reagan, Position: CMO, State: Arkansas, BirthDate: 1974/09/07, }, { ID: 4, Prefix: Ms., FirstName: Greta, LastName: Sims, Position: HR Manager, State: Georgia, BirthDate: 1977/11/22, }];Angularapp.component.htmldx-accordion [dataSource]employees /dx-accordionapp.component.tsimport { Component } from angular/core; import { Employee, Service } from ./app.service; Component({ selector: app-root, templateUrl: ./app.component.html, styleUrls: [./app.component.css], providers: [Service], }) export class AppComponent { employees: Employee[]; constructor(private service: Service) { this.employees service.getEmployees(); } }app.service.tsimport { Injectable } from angular/core; export class Employee { ID: number | undefined; FirstName: string | undefined; LastName: string | undefined; Prefix: string | undefined; Position: string | undefined; BirthDate: string | undefined; State: string | undefined; } const employees: Employee[] [{ ID: 1, Prefix: Mr., FirstName: John, LastName: Heart, Position: CEO, State: California, BirthDate: 1964/03/16, }, { ID: 2, Prefix: Mrs., FirstName: Olivia, LastName: Peyton, Position: Sales Assistant, State: California, BirthDate: 1981/06/03, }, { ID: 3, Prefix: Mr., FirstName: Robert, LastName: Reagan, Position: CMO, State: Arkansas, BirthDate: 1974/09/07, }, { ID: 4, Prefix: Ms., FirstName: Greta, LastName: Sims, Position: HR Manager, State: Georgia, BirthDate: 1977/11/22, }]; Injectable() export class Service { getEmployees() { return employees; } }VueApp.vuetemplate DxAccordion :data-sourceemployees / /template script // ... import { employees } from ./data; export default { components: { DxAccordion }, data() { return { employees } } } /scriptdata.jsexport const employees [{ ID: 1, Prefix: Mr., FirstName: John, LastName: Heart, Position: CEO, State: California, BirthDate: 1964/03/16, }, { ID: 2, Prefix: Mrs., FirstName: Olivia, LastName: Peyton, Position: Sales Assistant, State: California, BirthDate: 1981/06/03, }, { ID: 3, Prefix: Mr., FirstName: Robert, LastName: Reagan, Position: CMO, State: Arkansas, BirthDate: 1974/09/07, }, { ID: 4, Prefix: Ms., FirstName: Greta, LastName: Sims, Position: HR Manager, State: Georgia, BirthDate: 1977/11/22, }];ReactApp.js// ... import { employees } from ./data; function App() { return ( Accordion dataSource{employees} / ); } export default App;data.jsexport const employees [{ ID: 1, Prefix: Mr., FirstName: John, LastName: Heart, Position: CEO, State: California, BirthDate: 1964/03/16, }, { ID: 2, Prefix: Mrs., FirstName: Olivia, LastName: Peyton, Position: Sales Assistant, State: California, BirthDate: 1981/06/03, }, { ID: 3, Prefix: Mr., FirstName: Robert, LastName: Reagan, Position: CMO, State: Arkansas, BirthDate: 1974/09/07, }, { ID: 4, Prefix: Ms., FirstName: Greta, LastName: Sims, Position: HR Manager, State: Georgia, BirthDate: 1977/11/22, }];