DHTMLX Suite包含了超過(guò)20個(gè)UI小部件可以幫助開(kāi)發(fā)功能齊全的Web應(yīng)用程序。例如開(kāi)發(fā)者可以創(chuàng)建一個(gè)全面的儀表板來(lái)可視化和監(jiān)控票務(wù)系統(tǒng)的性能。在本文這個(gè)JavaScript儀表板教程中我們將介紹如何在DHTMLX Suite UI小部件和Optimus微框架的幫助下構(gòu)建和配置交互式儀表板。DevExpress新舊版本幫助文檔下載可進(jìn)QQ qun獲取169725316Demo概述查看和下載UI儀表板演示通過(guò)DHTMLX創(chuàng)建的UI儀表板允許用戶創(chuàng)建新的票證將其分配給不同的公司部門(mén)并監(jiān)視其性能。該Demo是使用以下小部件創(chuàng)建的:Grid網(wǎng)格顯示收到的通知列表Charts圖表跟蹤年度銷(xiāo)售額評(píng)估銷(xiāo)售、市場(chǎng)、質(zhì)量保證和技術(shù)支持部門(mén)的業(yè)績(jī)Window窗口創(chuàng)建新票證DataView數(shù)據(jù)視圖可視化開(kāi)放門(mén)票列表Pagination分頁(yè)簡(jiǎn)化數(shù)據(jù)網(wǎng)格中的導(dǎo)航Toolbar工具欄提供跨UI儀表板的導(dǎo)航Layout布局用于附加和排列所有的UI組件創(chuàng)建JavaScript UI Dashboard首先您必須dashboard demo并在設(shè)備上運(yùn)行它構(gòu)建UI儀表板的DHTMLX小部件被劃分為多個(gè)視圖可以分別初始化或配置每個(gè)小部件也可以刪除它們。讓我們來(lái)概述一下基于Optimus框架的UI儀表板demo。從index.html文件開(kāi)始在文件的頭部可以找到suite.js和suite.css包括DHTMLX套件及其所有組件。同樣可以看到app.js和app.css來(lái)配置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部分我們可以看到一個(gè)容器來(lái)渲染demobody section classdemo--container idtop_layout/section /body應(yīng)用程序的初始化是通過(guò)render()方法完成的script const app new uidashboard.UIDashboardApp(); app.render(#top_layout); /scriptdemo的下一個(gè)主文件是index.js它包含呈現(xiàn)應(yīng)用程序的UIDashboardApp類(lèi)在index.html中被用來(lái)初始化我們上面描述的演示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類(lèi)繼承自index.js文件中包含的所有類(lèi)TopLayout類(lèi)是UI儀表板演示的下一個(gè)重要部分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ǔ)。儀表板演示的下一個(gè)組件是Views文件塊可以在view文件夾中找到它們每個(gè)視圖都是一個(gè)ViewName.js文件。讓我們從“unites”演示的TopLayout.js視圖開(kāi)始。在這里您可以看到如何構(gòu)建和初始化TopLayout類(lèi)它包括布局和標(biāo)簽欄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; } } }然后可以通過(guò)將其劃分為三個(gè)單元格來(lái)配置布局const layoutConfig { rows: [ { id: top, height: content, }, { id: tabbar, height: content, }, { css: cell_center, id: center, }, ], };在這里你可以看到一個(gè)輸出TopLayout類(lèi)繼承自以下類(lèi)import { View } from dhx-optimus; import TopBar from ./TopBar; import Dashboard from ./Dashboard; // Dashboard demo現(xiàn)在我們準(zhǔn)備概述Dashboard視圖它初始化UI儀表板demo打開(kāi)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個(gè)部分Dashboard類(lèi)繼承自以下類(lèi)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儀表板演示的方法您會(huì)發(fā)現(xiàn)視圖的結(jié)構(gòu)是完全相同的。每個(gè)視圖都將構(gòu)建儀表板演示的一部分并在必要時(shí)從底層類(lèi)繼承。您可以打開(kāi)每個(gè)視圖的文件探索它們的結(jié)構(gòu)并根據(jù)需求對(duì)它們進(jìn)行配置。