DHTMLX Suite包含了超過20個UI小部件可以幫助開發(fā)功能齊全的Web應(yīng)用程序。例如開發(fā)者可以創(chuàng)建一個全面的儀表板來可視化和監(jiān)控票務(wù)系統(tǒng)的性能。在本文這個JavaScript儀表板教程中我們將介紹如何在DHTMLX Suite UI小部件和Optimus微框架的幫助下構(gòu)建和配置交互式儀表板。DevExpress新舊版本幫助文檔下載可進QQ qun獲取169725316Demo概述查看和下載UI儀表板演示通過DHTMLX創(chuàng)建的UI儀表板允許用戶創(chuàng)建新的票證將其分配給不同的公司部門并監(jiān)視其性能。該Demo是使用以下小部件創(chuàng)建的:Grid網(wǎng)格顯示收到的通知列表Charts圖表跟蹤年度銷售額評估銷售、市場、質(zhì)量保證和技術(shù)支持部門的業(yè)績Window窗口創(chuàng)建新票證DataView數(shù)據(jù)視圖可視化開放門票列表Pagination分頁簡化數(shù)據(jù)網(wǎng)格中的導(dǎo)航Toolbar工具欄提供跨UI儀表板的導(dǎo)航Layout布局用于附加和排列所有的UI組件創(chuàng)建JavaScript UI Dashboard首先您必須dashboard demo并在設(shè)備上運行它構(gòu)建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應(yīng)用程序的初始化是通過render()方法完成的script const app new uidashboard.UIDashboardApp(); app.render(#top_layout); /scriptdemo的下一個主文件是index.js它包含呈現(xiàn)應(yīng)用程序的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儀表板演示的基礎(chǔ)。儀表板演示的下一個組件是Views文件塊可以在view文件夾中找到它們每個視圖都是一個ViewName.js文件。讓我們從“unites”演示的TopLayout.js視圖開始。在這里您可以看到如何構(gòu)建和初始化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現(xiàn)在我們準備概述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;這就是創(chuàng)建DHTMLX UI儀表板演示的方法您會發(fā)現(xiàn)視圖的結(jié)構(gòu)是完全相同的。每個視圖都將構(gòu)建儀表板演示的一部分并在必要時從底層類繼承。您可以打開每個視圖的文件探索它們的結(jié)構(gòu)并根據(jù)需求對它們進行配置。