界面控件DevExtreme使用指南 - 如何自定义项目外观

DevExtreme拥有高性能的HTML5 / JavaScript小部件集合使您可以利用现代Web开发堆栈包括ReactAngularASP.NET CorejQueryKnockout等构建交互式的Web应用程序该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。请注意在开始本教程之前请确保DevExtreme已安装在Angular、Vue、React或jQuery应用程序中。DevExpress新旧版本帮助文档下载可进QQ qun获取169725316对于Accordion面板的小定制您可以在面板数据对象中定义特定字段。例如下面的代码生成三个面板第一个和第三个没有自定义第二个是禁用的。jQueryJavaScriptvar 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 }); });HTMLdiv idaccordionContainer/divAngularHTMLdx-accordion [dataSource]accordionData /dx-accordionTypeScpiptimport { 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 ], // ... })VueApp.vuetemplate DxAccordion :data-sourceaccordionData /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 }] }; } }; /scriptReactApp.jsimport 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中您可以使用呈现函数(如下面的代码所示)或组件AngularHTMLdx-accordion [dataSource]accordionData itemTitleTemplatetitle itemTemplateitem div *dxTemplatelet employee of title span{{employee.firstName}} /span span{{employee.lastName}}/span /div div *dxTemplatelet employee of item span{{employee.birthDate}} /span span{{employee.position}}/span /div /dx-accordionTypeScpiptimport { 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 ], // ... })VueApp.vuetemplate DxAccordion :data-sourceaccordionData item-title-templatetitle item-templateitem 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 }]; }; } }; /scriptReactApp.jsimport 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回调函数如下面的代码所示jQueryJavaScriptvar 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); } }); });HTMLdiv idaccordionContainer/div您还可以自定义单个项在Angular、Vue和React中使用dxItem组件来声明它们。使用jQuery时您可以将这些项声明为脚本并在模板属性中引用它们或者直接为该属性分配自定义函数。AngularHTMLdx-accordion dxi-item titleJohn Smith spanNetwork Administrator/span /dxi-item dxi-item titleSamantha Jones spanTechnical Writer/span /dxi-item /dx-accordionTypeScpiptimport { DxAccordionModule } from devextreme-angular; // ... export class AppComponent { // ... } NgModule({ imports: [ // ... DxAccordionModule ], // ... })VueApp.vuetemplate DxAccordion DxItem titleJohn Smith template #default divNetwork Administrator/div /template /DxItem DxItem titleSamantha Jones template #default divTechnical 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 } }; /scriptReactApp.jsimport 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 titleJohn Smith spanNetwork Administrator/span /Item Item titleSamantha Jones spanTechnical Writer/span /Item /Accordion ); } } export default App;jQueryHTMLdiv idaccordionContainer/div script idindividualTemplate typetext/html spanTechnical Writer/span /scriptJavaScript$(function() { $(#accordionContainer).dxAccordion({ items: [{ title: John Smith, template: function() { return $(span).text(Network Administrator); } }, { title: Samantha Jones, template: $(#individualTemplate) }] }); });此外您可以使用第三方模板引擎来定制UI组件的外观。