DHTMLX Suite包含了超过20个UI小部件可以帮助开发功能齐全的Web应用程序。例如开发者可以创建一个全面的仪表板来可视化和监控票务系统的性能。在本文这个JavaScript仪表板教程中我们将介绍如何在DHTMLX Suite UI小部件和Optimus微框架的帮助下构建和配置交互式仪表板。DevExpress新旧版本帮助文档下载可进QQ qun获取169725316Demo概述查看和下载UI仪表板演示通过DHTMLX创建的UI仪表板允许用户创建新的票证将其分配给不同的公司部门并监视其性能。该Demo是使用以下小部件创建的:Grid网格显示收到的通知列表Charts图表跟踪年度销售额评估销售、市场、质量保证和技术支持部门的业绩Window窗口创建新票证DataView数据视图可视化开放门票列表Pagination分页简化数据网格中的导航Toolbar工具栏提供跨UI仪表板的导航Layout布局用于附加和排列所有的UI组件创建JavaScript UI Dashboard首先您必须dashboard demo并在设备上运行它构建UI仪表板的DHTMLX小部件被划分为多个视图可以分别初始化或配置每个小部件也可以删除它们。让我们来概述一下基于Optimus框架的UI仪表板demo。从index.html文件开始在文件的头部可以找到suite.js和suite.css包括DHTMLX套件及其所有组件。同样可以看到app.js和app.css来配置webpack!DOCTYPE html html langen head ... titleDHTMLX - UI Dashboard/title ... !-- Suite -- script typetext/javascript src./lib/suite/suite.js/script link relstylesheet href./lib/suite/suite.css/ !-- App -- script typetext/javascript src./app.js/script link relstylesheet href./app.css/ /head所有这些文件都包含在demo包中在body部分我们可以看到一个容器来渲染demobody section classdemo--container idtop_layout/section /body应用程序的初始化是通过render()方法完成的script const app new uidashboard.UIDashboardApp(); app.render(#top_layout); /scriptdemo的下一个主文件是index.js它包含呈现应用程序的UIDashboardApp类在index.html中被用来初始化我们上面描述的演示export class UIDashboardApp extends App { init() { this.tickets getTickets(); this.store new Store(initialState); this.params.store this.store; this.state this.store.getState(); this.subscribe(); dhx.scrollViewConfig.enable true; this.show(, TopLayout, { tickets: this.tickets, schedulerData, ganttData }); // TopLayout view this.use(HistoryManager); } subscribe() { this.on(modeChanged, id { this.state.mode id || dashboard; }); this.on(addTicketClicked, obj { this.tickets.add( { title: obj.title, text: obj.comment, type: obj.type, icon: Avatar_01, name: ${obj.name} ${obj.lastName}, comments: 0, time: new Date().getTime(), }, 0 ); }); } }UIDashboardApp类继承自index.js文件中包含的所有类TopLayout类是UI仪表板演示的下一个重要部分import ./assets/styles/main.scss; import { App } from dhx-optimus; import Store from dhx-optimus-store; import { getLocationParams } from ./helpers/url; import TopLayout from ./views/TopLayout; // TopLayout view import HistoryManager from ./components/HistoryManager; import { getTickets } from ./services/dataService;总而言之index.html和index.js文件是UI仪表板演示的基础。仪表板演示的下一个组件是Views文件块可以在view文件夹中找到它们每个视图都是一个ViewName.js文件。让我们从“unites”演示的TopLayout.js视图开始。在这里您可以看到如何构建和初始化TopLayout类它包括布局和标签栏export default class TopLayout extends View { init() { this.ui new dhx.Layout(null, layoutConfig); this.navigationBar new dhx.Tabbar(this.ui.getCell(tabbar), { mode: top, tabAlign: center, tabWidth: 200, noContent: true, views: [ { id: dashboard, tab: Dashboard }, ], }); this.navigationBar.events.on(change, id { this.fire(modeChanged, [id]); }); this.show(this.ui.getCell(top), TopBar); return this.ui; } ready() { this.observe( state state.mode, mode { const cell this.navigationBar.getCell(this.app.state.mode); if (cell) { cell.show(); } this.changeView(mode); } ); } changeView(id) { switch (id) { case dashboard: this.show(this.ui.getCell(center), Dashboard, { tickets: this.params.tickets }); break; default: this.show(this.ui.getCell(center), NotReady); break; } } }然后可以通过将其划分为三个单元格来配置布局const layoutConfig { rows: [ { id: top, height: content, }, { id: tabbar, height: content, }, { css: cell_center, id: center, }, ], };在这里你可以看到一个输出TopLayout类继承自以下类import { View } from dhx-optimus; import TopBar from ./TopBar; import Dashboard from ./Dashboard; // Dashboard demo现在我们准备概述Dashboard视图它初始化UI仪表板demo打开Dashboard.js文件。在这里可以看到Dashboard的初始化以及Layout的配置export default class Dashboard extends View { init() { this.ui new dhx.Layout(null, { type: space, cols: [ { type: wide, rows: [ { height: 50%, cols: [ { id: left-top, }, { id: left-bottom, }, ], }, { id: center, }, ], }, { id: right, width: 30%, minWidth: 440, maxWidth: 440, }, ], }); this.show(this.ui.getCell(right), Notifications); this.show(this.ui.getCell(center), Tickets, { tickets: this.params.tickets }); this.show(this.ui.getCell(left-top), SalesChart); this.show(this.ui.getCell(left-bottom), NotificationsChart); return this.ui; } }因此我们将Layout的中心单元格划分为4个部分Dashboard类继承自以下类import { View } from dhx-optimus; import Notifications from ./Notifications; import Tickets from ./Tickets; import SalesChart from ./SalesChart; import NotificationsChart from ./NotificationsChart;这就是创建DHTMLX UI仪表板演示的方法您会发现视图的结构是完全相同的。每个视图都将构建仪表板演示的一部分并在必要时从底层类继承。您可以打开每个视图的文件探索它们的结构并根据需求对它们进行配置。