DHTMLX Suite?是一個用于構(gòu)建跨瀏覽器Web應(yīng)用和移動應(yīng)用的強(qiáng)大JavaScript UI庫。DHTMLX UI 組件庫允許您更快地構(gòu)建跨平臺、跨瀏覽器 Web 和移動應(yīng)用程序。它包括一組豐富的即用式 HTML5 組件，這些組件可以輕松組合到單個應(yīng)用程序界面中。

DHTMLX Spreadsheet正版試用下載https://www.evget.com/product/4251/download

DHTMLX Suite 迎來了8.0重大更新。此重大更新通過內(nèi)置的可自定義主題（包括高對比度主題）和主題配置器工具，將您的樣式功能提升到一個新的水平。對比主題的出現(xiàn)和對 WAI-ARIA 屬性的支持現(xiàn)在使我們的庫完全可訪問。

還添加了流行的套件小部件，并引入了一系列值得注意的功能，即圖表和網(wǎng)格小部件。DHTMLX Chart獲得了一種新的圖表類型 - 日歷熱圖圖表，并將選項(xiàng)導(dǎo)出為PDF和PNG格式。網(wǎng)格補(bǔ)充了拖放多行的功能，timePicker編輯器，并擴(kuò)展了凍結(jié)功能。此外，流行的套件小部件還有廣泛的次要功能和改進(jìn)。

新的內(nèi)置和自定義主題

Web 應(yīng)用程序的視覺外觀通常與功能方面一樣重要，以確保最佳用戶體驗(yàn)?；贕oogle的Material Design，我們的UI小部件庫在樣式方面一直非常靈活，允許您使用具有自定義設(shè)置的CSS類來調(diào)整小部件中任何元素的外觀。但是現(xiàn)在，使用有用的輔助工具，整個樣式設(shè)置過程可以更簡單，更省時。

DHTMLX Suite v8.0附帶了4個新的內(nèi)置主題：?光,?黑暗,?淺高對比度和?深色高對比度.要將任何這些主題應(yīng)用于項(xiàng)目中的特定套件小部件，您應(yīng)該使用?設(shè)置主題（）?全局對象中的方法?敦煌.它需要兩個參數(shù)：

• 主題（必需）– 使用字符串值命名應(yīng)設(shè)置的主題（默認(rèn)值 – “淺色”）
• 容器（可選）– 指定將應(yīng)用預(yù)配置主題的容器，采用 HTMLElement、容器的 ID 或布局單元格 document.documentElement（默認(rèn)值）的 ID。

或者，您可以通過?數(shù)據(jù)?所選容器的屬性。了解如何在?文檔.

如果您查看默認(rèn)主題（淺色）的樣式設(shè)置，您可以在 CSS 變量中看到配色方案的變量。它們使您能夠自動更改其他主題的配色方案（以 HSL 格式指定）。更準(zhǔn)確地說，當(dāng)您從淺色主題的根元素中的配色方案中修改 CSS 變量的任何值時，也會針對其他基本主題實(shí)時計(jì)算該值。

--dhx-h-primary: 200;
--dhx-s-primary: 98%;
--dhx-l-primary: 40%;

可以通過以下方式更改所有套件主題的這些顏色：

<style>
:root {
--dhx-h-primary: 0;
--dhx-s-primary: 94%;
--dhx-l-primary: 30%;
}
</style>

您還可以使用顏色選取器組件動態(tài)覆蓋原色。
檢查樣品>

基于原色的其他 CSS 變量將相應(yīng)地重新計(jì)算。例如，焦點(diǎn)顏色將按如下方式計(jì)算：

--dhx-color-focused: hsl(calc(var(--dhx-h-primary) + 10), var(--dhx-s-primary), var(--dhx-l-primary));

當(dāng)需要在單個主題中進(jìn)行調(diào)整時，您應(yīng)該在 數(shù)據(jù)-DHX 主題 屬性。查找有關(guān)此內(nèi)容的更多詳細(xì)信息 文檔頁面.

除此之外，已經(jīng)有可能 配置自定義主題 通過覆蓋基本主題中內(nèi)部 CSS 變量的值。與預(yù)定義主題類似，自定義主題通過 設(shè)置主題（） 方法。

此外，還有一種更新穎、更直接的方法可以根據(jù)您的項(xiàng)目要求設(shè)置套件小部件的樣式。此版本的 DHTMLX 套件庫補(bǔ)充了一個特殊的?主題配置器.

該工具包括幾個自定義主題，可以使用多個預(yù)設(shè)通過直觀的 UI 進(jìn)行修改。主題準(zhǔn)備就緒后，您將能夠?qū)⑵渲苯訌?fù)制并粘貼到您的 Web 項(xiàng)目中。

輔助功能支持

隨著v8.0的發(fā)布，我們終于可以說DHTMLX套件了。?完全符合 Web 內(nèi)容可訪問性準(zhǔn)則?（WCAG 2.0）的最高AAA級別。除了以前可用的鍵盤導(dǎo)航，新套件還提供了另外兩個缺失的部分 - 高對比度主題和 WAI-ARIA 支持。這意味著現(xiàn)在您完全有能力構(gòu)建可供殘障人士和殘障人士使用的 Web 應(yīng)用程序。

DHTMLX 圖表中的新日歷熱圖圖表 （PRO）

從 v8.0 開始，我們的?JavaScript 圖表小部件?允許使用新的圖表類型可視化數(shù)據(jù) –?日歷熱圖圖表.它用于使用二維日歷網(wǎng)格顯示數(shù)值數(shù)據(jù)如何隨時間變化，其中值被替換為顏色漸變。該圖表允許可視化不同時間段（從一周到一年）的數(shù)據(jù)，每個圖表單元格對應(yīng)于一個工作日。使用明亮到暗淡的色譜和圖表上的圖例可以更輕松地比較數(shù)據(jù)并快速揭示各種模式或任何偏差。這種類型的圖表對于數(shù)據(jù)分析特別有用。

檢查樣品>

如果要將日歷熱圖圖表添加到項(xiàng)目中，則必須指定?類型：“日歷熱圖”?屬性。此類圖表的其他可用屬性包括?系列?（必需）和?legend（可選）。它們具有多個參數(shù)，可以在相應(yīng)的配置中指定。

還值得注意的是，我們的新圖表提供了多種選項(xiàng)，用于根據(jù)日期范圍顯示上傳的數(shù)據(jù)。默認(rèn)情況下，熱圖將顯示數(shù)據(jù)，從數(shù)據(jù)集中顯示的最早年份的 1 月 1 日到最晚年份的 12 月 31 日。

但是，如果您必須處理大型數(shù)據(jù)集并且只需要查看其中的特定部分，該怎么辦？這不是問題，因?yàn)槟袡C(jī)會使用可選的設(shè)置自定義日期范圍?開始日期?和?結(jié)束日期?參數(shù)在?系列?財(cái)產(chǎn)。

在上面的示例中，圖表涵蓋了從“20/01/22”到“20/08/23”（包括“20/08/23”）的時間段。

const config = {
type: "calendarHeatMap",
css: "dhx_widget--bordered",
series: [
{
value: "value",
date: "date",
dateFormat: "%d %M %Y",
startDate: "20 Jan 2022",
endDate: "20 Aug 2023",
// other series parameters
}
],
}

但是，例如，如果我們沒有指定 startDate 參數(shù)，圖表將顯示基于其他參數(shù)和數(shù)據(jù)集的數(shù)據(jù)（即，從數(shù)據(jù)集中找到的最早年份的 1 月 1 日開始）。在我們的例子中，圖表將顯示從“01/01/22”到“20/08/23”（包括“01/01/22”）期間的信息。

有關(guān)熱圖圖表配置的此特性和其他特性的更多詳細(xì)信息，請參閱?文檔.

作為一個不錯的獎勵，我們還創(chuàng)建了熱圖圖表與流行的DHTMLX工具集成的示例，用于項(xiàng)目管理 -?甘特,?活動日歷和?調(diào)度.它將幫助您獲得一個更有用的信息來源，以便更有效地處理項(xiàng)目。

請注意，日歷熱圖圖表僅在 DHTMLX 圖表和 DHTMLX 套件的專業(yè)版中可用。

拖放網(wǎng)格中的多個選定行 （PRO）

DHTMLX Grid是我們套件庫中使用最廣泛的小部件之一。難怪我們經(jīng)常收到許多關(guān)于此小部件可能改進(jìn)的請求。對于此版本，我們準(zhǔn)備了幾個重要的網(wǎng)格更新。我們從能力開始 同時拖放任意數(shù)量的選定行.

通常情況下，最終用戶需要對表中的記錄重新排序，此功能將立即完成這項(xiàng)工作。要啟用此新穎性，您應(yīng)該啟用 多選 使用 多選：真 配置屬性，并指定行的拖放，如下所示：

const grid = new dhx.Grid("grid", {
columns: [
// columns config
],
data: data,
selection: "row",
multiselection: true,
dragItem: "both" // or dragItem: "row"
});

檢查樣品>

因此，最終用戶將能夠使用“Ctrl + 單擊”組合選擇任意數(shù)量的行，并將它們拖動到網(wǎng)格上的正確位置。

請注意，此功能僅在 DHTMLX Grid 和 DHTMLX Suite 的專業(yè)版中可用。

在網(wǎng)格/樹網(wǎng)格的日期選取器編輯器中指定時間

套件庫的新版本 8.0 擴(kuò)展了?日期選取器編輯器?在網(wǎng)格和樹網(wǎng)格小部件中。從現(xiàn)在開始，您可以使最終用戶在兩個小部件中設(shè)置時間和日期，方法與DHTMLX日歷中相同。

在引擎蓋下，它是通過傳遞來實(shí)現(xiàn)的?日歷用具?（除了?馬克,?禁用日期,?價值,?范圍和?日期格式） 到?編輯器配置?對象，在網(wǎng)格或樹網(wǎng)格小組件中配置日期選取器編輯器。正如您在下面的示例中看到的，網(wǎng)格列“開始日期”帶有“日期”類型編輯器，以及?時間選取器?參數(shù)在?編輯器配置?。

const config = {
columns: [
// other column configuration parameters
{ id: "start_date", header: [{ text: "Start date" }], type: "date", format: "%d/%m/%Y %H:%i", editorConfig: {timePicker: true} },
],
};

檢查樣品>?

Check the sample >

圖表中的新export

在構(gòu)建業(yè)務(wù)Web應(yīng)用程序時，為表格數(shù)據(jù)和各種圖形或圖表提供導(dǎo)出選項(xiàng)會很有好處。例如，最終用戶可能需要在會議期間脫機(jī)處理一些與項(xiàng)目相關(guān)的信息，或者通過電子郵件將其發(fā)送給同事。這就是為什么大多數(shù)信息打包套件小部件，即DHTMLX圖表，現(xiàn)在包括將數(shù)據(jù)轉(zhuǎn)換為PDF和PNG格式的可能性。

Chart小部件中的導(dǎo)出功能與DHTMLX圖中的導(dǎo)出功能一樣。DHTMLX圖表的API現(xiàn)在具有?export.pdf（）和export.png（）方法，可通過以下方式使用chart.export對象調(diào)用這些方法：

• 圖表.導(dǎo)出.pdf（配置）
• 導(dǎo)出.png文件（配置）

在用戶端，將通過相應(yīng)的UI按鈕執(zhí)行導(dǎo)出為PDF和PNG。您可以使用以下命令嘗試它在實(shí)踐中的工作方式?范例。

PDF/PNG格式的導(dǎo)出可通過我們的在線導(dǎo)出服務(wù)免費(fèi)獲得。默認(rèn)情況下，導(dǎo)出的圖表上會有水印。擁有有效支持計(jì)劃的開發(fā)人員將能夠在其支持計(jì)劃期間導(dǎo)出不帶水印的圖表。如果您不想將數(shù)據(jù)發(fā)送到我們的在線服務(wù)，我們將提供一個獨(dú)立的導(dǎo)出模塊，您可以將其安裝為Docker映像。我們將根據(jù)DHTMLX套件的商業(yè)、企業(yè)和終極許可證免費(fèi)提供此模塊，或者您可以在購買DHTMLX圖表許可證的基礎(chǔ)上再購買此模塊。

網(wǎng)格和TreeGrid中的新凍結(jié)選項(xiàng)

凍結(jié)列和行的功能是Grid和TreeGrid小部件提供的最流行的功能之一。在v8.0中，我們使用新選項(xiàng)對其進(jìn)行了擴(kuò)展。以前，最終用戶可以在表格的左側(cè)設(shè)置列，在表格的頂部設(shè)置行。現(xiàn)在，他們可以對右側(cè)的列和底部的行執(zhí)行相同的操作。因此，最終用戶分析表格數(shù)據(jù)將更加方便。

以編程方式，凍結(jié)的右側(cè)列和底部行相應(yīng)地使用rightSplit和bottomSplit屬性啟用：

const grid = new dhx.Grid ( "grid" , {
// configuration parameters for columns
adjust: true ,
data: dataset,
topSplit: 2,
bottomSplit: 2,
leftSplit: 1,
rightSplit: 2,
selection: "row" ,
resizable: true ,
}) ;

檢查樣品>
因此，如有必要，您可以凍結(jié)表所有邊的任意數(shù)量的記錄，只保留中間部分可滾動。

了解更多詳細(xì)更新，點(diǎn)擊跳轉(zhuǎn)查看