界面控件DevExtreme使用指南 - 如何自定義項目外觀

DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現代Web開發堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）建構互動式的Web應用程式，該套件附帶功能齊全的資料網格、互動式圖表小部件、資料編輯器等。

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

DevExtreme Complete Subscription官方最新版免費下載下傳試用，曆史版本下載下傳，線上文檔和幫助檔案下載下傳-慧都網

對于Accordion面闆的小定制，您可以在面闆資料對象中定義特定字段。例如，下面的代碼生成三個面闆，第一個和第三個沒有自定義，第二個是禁用的。

jQuery

JavaScript

var accordionData = [{
title: "Employee",
text: "John Smith"
}, {
title: "Phone Number",
text: "[phone]",
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: "[phone]",
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: "[phone]",
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: "[phone]",
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元件的外觀。