三级黃色男人的天堂,日韩一二三区精品,肉浦团电影

如何快速構(gòu)建一個(gè)交互式的JavaScript UI儀表板？用DHTMLX很簡(jiǎn)單！

翻譯|使用教程|編輯：龔雪|2023-07-03 10:12:15.923|閱讀 118 次

概述：本文將為大家介紹如何用DHTMLX構(gòu)建一個(gè)交互式的JavaScript UI儀表板，歡迎下載相關(guān)組件體驗(yàn)！

# 界面/圖表報(bào)表/文檔/IDE等千款熱門(mén)軟控件火熱銷(xiāo)售中 >>

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)建和配置交互式儀表板。

DHTMLX Suite正式版下載

Demo概述

通過(guò)DHTMLX創(chuàng)建的UI儀表板允許用戶(hù)創(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組件

如何快速構(gòu)建一個(gè)交互式的JavaScript UI儀表板？用DHTMLX很簡(jiǎn)單！

創(chuàng)建JavaScript UI Dashboard

首先，您必須并在設(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 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>

所有這些文件都包含在demo包中，在body部分，我們可以看到一個(gè)容器來(lái)渲染demo：

<body>
<section class="demo--container" id="top_layout"></section>
</body>

應(yīng)用程序的初始化是通過(guò)render()方法完成的：

<script>
const app = new uidashboard.UIDashboardApp();
app.render("#top_layout");
</script>

demo的下一個(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)行配置。

標(biāo)簽：

本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@fc6vip.cn

文章轉(zhuǎn)載自：慧都網(wǎng)

上一篇：界面控件KendoReact PivotGrid組件，開(kāi)啟交互式數(shù)據(jù)探索新方式！下一篇：VCL組件DevExpress VCL圖表控件中文指南 - 如何實(shí)現(xiàn)值標(biāo)簽自定義？