DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現(xiàn)代Web開發(fā)堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構建交互式的Web應用程序，該套件附帶功能齊全的數(shù)據(jù)網(wǎng)格、交互式圖表小部件、數(shù)據(jù)編輯器等。

請注意：在開始本教程之前，請確保DevExtreme已安裝在Angular、Vue、React或jQuery應用程序中。

DevExtreme v22.2正式版下載

DevExpress技術交流群7：674691612      歡迎一起進群討論

對于Accordion面板的小定制，您可以在面板數(shù)據(jù)對象中定義特定字段。例如，下面的代碼生成三個面板，第一個和第三個沒有自定義，第二個是禁用的。

jQuery

JavaScript

var accordionData = [{
title: "Employee",
text: "John Smith"
}, {
title: "Phone Number",
text: "(555)555-5555",
disabled: true
}, {
title: "Position",
text: "Network Administrator"
}];

$(function () {
$("#accordionContainer").dxAccordion({
dataSource: accordionData
});
});

HTML

<div id="accordionContainer"></div>

Angular

HTML

<dx-accordion
[dataSource]="accordionData">
</dx-accordion>

TypeScpipt

import { DxAccordionModule } from "devextreme-angular";
// ...
export class AppComponent {
accordionData = [{
title: "Employee",
text: "John Smith"
}, {
title: "Phone Number",
text: "(555)555-5555",
disabled: true
}, {
title: "Position",
text: "Network Administrator"
}];
}
@NgModule({
imports: [
// ...
DxAccordionModule
],
// ...
})

Vue

App.vue

<template>
<DxAccordion
:data-source="accordionData">
</DxAccordion>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';

import DxAccordion from "devextreme-vue/accordion";

export default {
components: {
DxAccordion
},
data() {
return {
accordionData: [{
title: "Employee",
text: "John Smith"
}, {
title: "Phone Number",
text: "(555)555-5555",
disabled: true
}, {
title: "Position",
text: "Network Administrator"
}]
};
}
};
</script>

React

App.js

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import { Accordion } from 'devextreme-react/accordion';

const accordionData = [{
title: "Employee",
text: "John Smith"
}, {
title: "Phone Number",
text: "(555)555-5555",
disabled: true
}, {
title: "Position",
text: "Network Administrator"
}];

class App extends React.Component {
render() {
return (
<Accordion
dataSource={accordionData}
/>
);
}
}

export default App;

如果需要更靈活的解決方案，可以定義和i。在Angular和Vue中，您可以在標記中聲明它，在React中，您可以使用呈現(xiàn)函數(shù)(如下面的代碼所示)或組件：

Angular

HTML

<dx-accordion
[dataSource]="accordionData"
itemTitleTemplate="title"
itemTemplate="item">
<div *dxTemplate="let employee of 'title'">
<span>{{employee.firstName}} </span>
<span>{{employee.lastName}}</span>
</div>
<div *dxTemplate="let employee of 'item'">
<span>{{employee.birthDate}} </span>
<span>{{employee.position}}</span>
</div>
</dx-accordion>

TypeScpipt

import { DxAccordionModule } from "devextreme-angular";
// ...
export class AppComponent {
accordionData = [{
firstName: "John", lastName: "Smith",
birthDate: "1986/03/14",
position: "Network Administrator"
}, {
firstName: "Samantha", lastName: "Jones",
birthDate: "1972/11/13",
position: "Technical Writer"
}];
}
@NgModule({
imports: [
// ...
DxAccordionModule
],
// ...
})

Vue

App.vue

<template>
<DxAccordion
:data-source="accordionData"
item-title-template="title"
item-template="item">
<template #title="{ data }">
<div>
<span>{{ data.firstName }} </span>
<span>{{ data.lastName }}</span>
</div>
</template>
<template #item="{ data }">
<div>
<span>{{ data.birthDate }} </span>
<span>{{ data.position }}</span>
</div>
</template>
</DxAccordion>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';

import DxAccordion from "devextreme-vue/accordion";

export default {
components: {
DxAccordion
},
data() {
return {
accordionData: [{
firstName: "John", lastName: "Smith",
birthDate: "1986/03/14",
position: "Network Administrator"
}, {
firstName: "Samantha", lastName: "Jones",
birthDate: "1972/11/13",
position: "Technical Writer"
}];
};
}
};
</script>

React

App.js

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import { Accordion } from 'devextreme-react/accordion';

const accordionData = [{
firstName: "John", lastName: "Smith",
birthDate: "1986/03/14",
position: "Network Administrator"
}, {
firstName: "Samantha", lastName: "Jones",
birthDate: "1972/11/13",
position: "Technical Writer"
}];

class App extends React.Component {
render() {
return (
<Accordion
dataSource={accordionData}
itemTitleRender={this.renderTitle}
itemRender={this.renderItem}
/>
);
}

renderTitle(data) {
return (
<div>
<span>{data.firstName} </span>
<span>{data.lastName}</span>
</div>
);
}

renderItem(data) {
return (
<div>
<span>{data.birthDate} </span>
<span>{data.position}</span>
</div>
);
}
}

export default App;

如果使用jQuery，請使用DOM操作方法來組合折疊項的HTML標記，要應用這個標記，使用itemTemplate和itemTitleTemplate回調(diào)函數(shù)，如下面的代碼所示：

jQuery

JavaScript

var accordionData = [{
firstName: "John", lastName: "Smith",
birthDate: "1986/03/14",
position: "Network Administrator"
}, {
firstName: "Samantha", lastName: "Jones",
birthDate: "1972/11/13",
position: "Technical Writer"
}];

$(function () {
$("#accordionContainer").dxAccordion({
dataSource: accordionData,
itemTemplate: function (itemData, itemIndex, itemElement) {
itemElement.append("<p>" + itemData.birthDate + " </p>");
itemElement.append("<p>" + itemData.position + "</p>");
},
itemTitleTemplate: function (itemData, itemIndex, itemElement) {
itemElement.append("<span>" + itemData.firstName + " </span> ");
itemElement.append("<span>" + itemData.lastName + "</span>");
}
});
});

HTML

<div id="accordionContainer"></div>

您還可以自定義單個項，在Angular、Vue和React中，使用dxItem組件來聲明它們。使用jQuery時，您可以將這些項聲明為腳本，并在模板屬性中引用它們，或者直接為該屬性分配自定義函數(shù)。

Angular

HTML

<dx-accordion>
<dxi-item title="John Smith">
<span>Network Administrator</span>
</dxi-item>
<dxi-item title="Samantha Jones">
<span>Technical Writer</span>
</dxi-item>
</dx-accordion>

TypeScpipt

import { DxAccordionModule } from "devextreme-angular";
// ...
export class AppComponent {
// ...
}
@NgModule({
imports: [
// ...
DxAccordionModule
],
// ...
})

Vue

App.vue

<template>
<DxAccordion>
<DxItem title="John Smith">
<template #default>
<div>Network Administrator</div>
</template>
</DxItem>
<DxItem title="Samantha Jones">
<template #default>
<div>Technical Writer</div>
</template>
</DxItem>
</DxAccordion>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';

import DxAccordion, { DxItem } from "devextreme-vue/accordion";

export default {
components: {
DxAccordion,
DxItem
}
};
</script>

React

App.js

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import { Accordion, Item } from 'devextreme-react/accordion';

class App extends React.Component {
render() {
return (
<Accordion>
<Item title="John Smith">
<span>Network Administrator</span>
</Item>
<Item title="Samantha Jones">
<span>Technical Writer</span>
</Item>
</Accordion>
);
}
}

export default App;

jQuery

HTML

<div id="accordionContainer"></div>
<script id="individualTemplate" type="text/html">
<span>Technical Writer</span>
</script>

JavaScript

$(function() {
$("#accordionContainer").dxAccordion({
items: [{
title: "John Smith",
template: function() {
return $("<span>").text("Network Administrator");
}
}, {
title: "Samantha Jones",
template: $("#individualTemplate")
}]
});
});

此外，您可以使用第三方模板引擎來定制UI組件的外觀。