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儀表板演示的方法您會發現視圖的結構是完全相同的。每個視圖都將構建儀表板演示的一部分并在必要時從底層類繼承。您可以打開每個視圖的文件探索它們的結構并根據需求對它們進行配置。