界面控件DevExtreme使用指南 - 如何自定义项目外观
DevExtreme拥有高性能的HTML5 / JavaScript小部件集合，使您可以利用现代Web开发堆栈（包括React，Angular，ASP.NET Core，jQuery，Knockout等）构建交互式的Web应用程序，该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。
请注意：在开始本教程之前，请确保DevExtreme已安装在Angular、Vue、React或jQuery应用程序中。
DevExpress新旧版本帮助文档下载可进QQ qun获取：169725316
对于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组件的外观。