如何快速构建一个交互式的JavaScript UI仪表板？用DHTMLX很简单！-北京尧图网络

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仪表板演示的方法您会发现视图的结构是完全相同的。每个视图都将构建仪表板演示的一部分并在必要时从底层类继承。您可以打开每个视图的文件探索它们的结构并根据需求对它们进行配置。

如何快速构建一个交互式的JavaScript UI仪表板？用DHTMLX很简单！

相关推荐

VCL组件DevExpress VCL图表控件中文指南 - 如何实现值标签自定义？

戴森球计划3000+工厂蓝图库：从新手到星际工程师的完整指南

JavaScript中的CRUD操作指南示例 - 用DHTMLX创建医院管理系统！

更多资讯

Kimi Code agent-core-v2 的 llm 模块：一次 LLM 请求的协议无关设计与实现

Isaac Sim关节驱动配置避坑指南：从物理原理到真机迁移

Spring Boot多模块依赖管理：父工程与子工程区别及最佳实践

基于Python的深度学习新闻推荐系统：从源码到毕设落地实战

Spring面试题核心解析：IoC生命周期、自动配置与事务原理

AI Skills实战指南：从提示词到TypeScript代码评审Agent技能

今日更新

济南做网站多少钱：3个案例拆解，防黑源码下载全攻略

婚恋网站实战案例：避开3个高价坑，省钱50%还能跑赢流量

制作网页比较方便的软件怎么选?一文搞懂避坑指南

本周精选

如何彻底离线使用 Laya-CoreML：Hugging Face 下载、缓存机制与 local_files_only 详解

基于1Panel 部署MySQL MCP 服务：TaoToken 统一 Key 接入与 config.toml 配置实战

崇州园区营销网站建设避坑指南：5大注意事项保备案安全

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？