用DHTMLX建立一套高交互的前端DashBord UI-控件新闻-慧都网

用DHTMLX建立一套高交互的前端DashBord UI

原创|使用教程|编辑：何跃|2021-12-07 16:40:27.883|阅读 406 次

概述：在前后端分离的情况下，很多企业的各类业务系统开始从只关注业务升级到同时关心交互与效率的层面，那么一套可以满足一线人员操作又能满足管理人员根据图表做决策的系统的开发需求就来了，DHTMLX可以一试！

DHTMLX Suite包括20多个UI部件，有助于开发全功能的网络应用程序。其中包含了一线办事人员会用到的美观的下拉框、输入框、表格、按钮，也包含了管理人员需要的各类图表，例如饼图、折线图等。具体举例，作为售票大厅工作的你甚至可以创建一个全面的仪表盘来可视化和监控票务系统的性能。

本篇将为身为技术的你还原这类系统是如何打造的，。

在这个JavaScript仪表盘教程中，我们将描述如何在Suite UI部件和Optimus微框架的帮助下建立和配置一个互动仪表盘。

案例预览

DHTMLX的UI仪表盘允许用户创建一个新的票据，将其分配给不同的公司部门，并监控其表现。这个演示是用以下DHTMLX工具创建的：

Grid 显示收到的通知清单。
Charts 追踪年度销售情况的图表，估计销售、市场、质量保证和技术支持部门的业绩。
Window 创建新票据的窗口。
DataView 数据视图来显示开放票据的列表。
Pagination 以简化数据网格中的导航。
Toolbar 为整个用户界面仪表板提供导航。
布局（Layout）用于附加和安排所有的用户界面组件。

创建 JavaScript UI Dashboard

首先，咱们并在你的设备上运行它。你可能会注意到，构建UI仪表盘的DHTMLX部件被划分为视图。你可以分别初始化或配置每个小部件，也可以将其删除。

让我们对基于Optimus框架的UI仪表板演示做一个概述。
我们将从index.html文件开始。在文件的头部部分，你可以找到 suite.js 和 suite.css。我们包括DHTMLX Suite及其所有的组件。此外，你可以看到app.js和app.css来配置webpack。

<!DOCTYPE html>
<html lang="en">
    <head>
        ...
        <title>DHTMLX - UI Dashboard</title>
        ...
 
        <!-- Suite -->
        <script type="text/javascript" src="./lib/suite/suite.js"></script>
        <link rel="stylesheet" href="./lib/suite/suite.css"/>
 
        <!-- App -->
        <script type="text/javascript" src="./app.js"></script>
        <link rel="stylesheet" href="./app.css"/>
    </head>
   <body>
        <section class="demo--container" id="top_layout">这是一个空的界面应用标签，记得ID要写呀</section>
    </body>
  <script>
//应用程序的初始化是通过render()方法进行的。
        const app = new uidashboard.UIDashboardApp();
        app.render("#top_layout");
    </script>

该演示的下一个主要文件是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"; // 顶部菜单
import HistoryManager from "./components/HistoryManager";
import { getTickets } from "./services/dataService";

总而言之，index.html和index.js文件是UI仪表板演示的基础。你可以在文档中了解更多关于使用这些文件以及如何使用Optimus构建应用程序的信息。

仪表盘演示的下一个组成部分是一个视图文件块。你可以在view文件夹中找到所有这些文件。每个视图都是一个ViewName.js文件。让我们从TopLayout.js视图开始，它 "联合 "了整个演示。

在这里你可以看到TopLayout类是如何建立和启动的。它包括Layout和Tabbar：

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;
        }
    }
}

然后，你可以通过将其划分为三个单元来配置Layout。

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仪表板演示。让我们打开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个部分。

// 仪表盘继承与以下类
import { View } from "dhx-optimus"; 
import Notifications from "./Notifications";
import Tickets from "./Tickets";
import SalesChart from "./SalesChart";
import NotificationsChart from "./NotificationsChart";

这就是DHTMLX UI仪表盘演示的创建方式。你会发现，视图的结构是非常相同的。每个视图都会建立仪表盘演示的部分，并在必要时继承底部的类。你可以打开每个视图的文件，探索它们的结构，并根据你的要求来配置它们。

纸上觉来终觉钱，要知此事请看DEMO代码，结合上述对区域划分的方法，找到使用DHTMLX快捷开发业务系统的方法！

以上您也可以直接下载DHTMLX SUITE从0开始体验。