DevExpress官网

DevExtreme拥有高性能的HTML5 / JavaScript小部件集合，使您可以利用现代Web开发堆栈（包括React，Angular，ASP.NET Core，jQuery，Knockout等）构建交互式的Web应用程序，该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。

请注意：在开始本教程之前，请确保DevExtreme已安装在Angular、Vue、React或jQuery应用程序中。

DevExtreme v22.2正式版下载

DevExpress技术交流群7：674691612      欢迎一起进群讨论

对于Accordion面板的小定制，您可以在面板数据对象中定义特定字段。例如，下面的代码生成三个面板，第一个和第三个没有自定义，第二个是禁用的。

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;

如果需要更灵活的解决方案，可以定义itemTemplate和iitemTitleTemplate。在Angular和Vue中，您可以在标记中声明它，在React中，您可以使用呈现函数(如下面的代码所示)或组件：

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回调函数，如下面的代码所示：

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时，您可以将这些项声明为脚本，并在模板属性中引用它们，或者直接为该属性分配自定义函数。

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组件的外观。

更多DevExpress线上公开课、中文教程资讯请上中文网获取

相关产品： DevExtreme跨平台开发框架,