DHTMLX Suite v8.2日前已正式發(fā)布，此版本的核心是DHTMLX Form，這個小部件接收了4個備受期待的新控件，如Fieldset、Avatar、Toggle和ToggleGroup。官方技術(shù)團(tuán)隊還為Grid和TreeGrid小部件中的頁眉/頁腳工具提示提供了一系列新的配置選項等。

在本文中，我們提供了這個版本的詳細(xì)概述。

DHTMLX Form的新控件

DHTMLX Form是DHTMLX Suite JavaScript UI小部件庫中的一個流行小部件，它允許用戶實現(xiàn)可定制的Web表單，這些表單通常作為web應(yīng)用程序和最終用戶之間的關(guān)鍵通信鏈接。在v8.2中，技術(shù)團(tuán)隊用4個新控件擴(kuò)展了這個小部件的功能。

Fieldset控件

Fieldset控件的目的是讓用戶完全自由地對Web表單中的其他控件進(jìn)行分組，這個控件使您能夠在視覺上將表單分解為幾個邏輯部分，從而使大型表單結(jié)構(gòu)更好、更直觀。它允許用戶創(chuàng)建復(fù)雜的表單，其中一個字段集可以包含其他幾個具有嵌套控件的字段集。

要將此控件附加到使用DHTMLX構(gòu)建的表單，需要添加相應(yīng)的控件類型 - type: “fieldset”，多個配置屬性為指定控件設(shè)置提供了廣泛的選項選擇。例如您可以為控件指定名稱、添加必要的標(biāo)簽、在組內(nèi)安排控件等。

const form = new dhx.Form("form", {
rows: [
{
type: "fieldset",
label: "General Info",
rows: [
{
align: "between",
cols: [
{
type: "fieldset",
label: "Personal info",
rows: [
{
type: "input",
label: "Name",
},
{
type: "input",
label: "Surname",
},
]
},
{
type: "fieldset",
label: "Contact info",
rows: [
{
type: "input",
label: "City",
},
{
type: "input",
label: "Address",
},
]
},
]
},
]
},
]
});

您可以通過方法訪問Fieldset中的任何控件，并使用多個方法和事件與之交互。例如，可以使用 方法遍歷所有嵌套的字段集元素，它接受以下參數(shù)：

• callback: function – 負(fù)責(zé)迭代過程的函數(shù)，該函數(shù)使用以下參數(shù)調(diào)用：
  1. item: object – 一個項目的對象
  2. index: number – 項目的索引
  3. array: object[] – 迭代項目的數(shù)組
• tree: boolean – 確定是否應(yīng)該迭代所有嵌套字段集項的參數(shù)(默認(rèn)為false)

form.getItem("fieldset").forEach((item, index, arr) => {
console.log(index, item, arr);
}, true);

有了新的Fieldset控件，您就有了一個有效的工具，可以在單個web表單中分組各種控件，并根據(jù)自己的喜好靈活地調(diào)整這些控件的結(jié)構(gòu)。

Avatar控件

標(biāo)準(zhǔn)的Web表單通常包含用于收集文本數(shù)據(jù)的控件，但也可能需要有一個上傳圖像的選項。從v8.2開始，DHTMLX Form允許使用新的Avatar控件向表單添加圖像。

下面的示例提供了一個機(jī)會來了解這種控件在實踐中是如何工作的，您可以使用占位符圖標(biāo)或拖放方式將自己的圖像添加到表單中，然后將其刪除，并更改Avatar設(shè)置。

要將此控件添加到網(wǎng)頁中，必須在表單初始化時在type屬性中指定它：

const form = new dhx.Form("form", {
css: "dhx_widget--bordered",
padding: 20,
rows: [{
type: "avatar",
"label": "Employee photo",
"size": "medium", // "small" | "medium" | "large" | number
"icon": "dxi dxi-person",
"accept": "image/*",
"target": "http://docs.dhtmlx.com/suite/backend/upload",
...
//Other properties
}]
});

從上面的代碼中可以看到，這個控件有許多屬性，允許您定義最終用戶如何看到它。可以使用基本控制大小或應(yīng)用自定義大小，使這種類型的輸入是強制性的，添加幫助信息，在沒有上傳圖像時設(shè)置占位符圖標(biāo)等。

就像DHTMLX Form的其他控件一樣，Avatar控件也提供了一系列方法和事件，使您能夠以各種方式操作該控件。

例如，您可以通過使用accept和validation屬性應(yīng)用某些驗證規(guī)則來限制文件選擇：

const form = new dhx.Form("form", {
css: "dhx_widget--bordered",
padding: 40,
rows: [
{
type: "avatar",
...
accept: "image/png",
validation: ({ file }) => {
return file && file.size <= 2097152;
},
preMessage: "Choose a png file",
errorMessage: "The file size is more than 2Mb, or the field is empty",
successMessage: "The file was successfully validated",
},
]
});

accept屬性為上傳的文件定義了可接受的擴(kuò)展名(image和png)，而validation屬性檢查文件是否被上傳并且它的大小小于2mb。您也可以使用preMessage, errorMessage和successMessage屬性使最終用戶與Avatar控件的交互完全直接，使用這些屬性實現(xiàn)的文本消息將幫助最終用戶了解他們在上傳表單中的文件時是否做對了。

Toggle和ToggleGroup控件

Toggle控件是一種特殊的按鈕，用于幫助最終用戶在兩個或多個狀態(tài)或選項之間切換。它們通常顯示為緊湊的按鈕，并帶有其狀態(tài)的圖形文本表示。在DHTMLX Suite 8.2中，我們?yōu)镈HTMLX表單添加了兩種類型的切換按鈕：

• – 是一個按兩種狀態(tài)(例如開/關(guān))原理工作的按鈕。

...
rows: [
{
type: "toggle",
icon: "dxi dxi-eye",
offIcon: "dxi dxi-eye-off",
},
...

• – 一組在結(jié)構(gòu)上或邏輯上連接在一起的單選擇或多選擇按鈕。

...
{
type: "toggleGroup",
multiselection: true,
value: {
left: true,
center: true,
},
options: [
{
id: "left",
icon: "dxi dxi-format-align-left",
value: 1,
},
{
id: "center",
icon: "dxi dxi-format-align-center",
value: "center"
},
{
id: "right",
icon: "dxi dxi-format-align-right
},
{
id: "space",
icon: "dxi dxi-format-line-spacing",
disabled: true,
}
]
}
...

 ToggleGroup按鈕具有比簡單切換按鈕更多的功能，上面提供的多選擇示例只是ToggleGroup的多種使用場景之一，您可以在這個示例中找到更多新按鈕類型的用例。

Grid/TreeGrid頁眉和頁腳的工具提示

新版本的DHTMLX Suite庫在兩個數(shù)據(jù)管理小部件(Grid和TreeGrid)中擴(kuò)展了工具提示的配置多樣性，以前整個網(wǎng)格的工具提示是通過相應(yīng)的工具提示屬性啟用/禁用的，現(xiàn)在您有了幾種新的方法來為頁眉和頁腳指定單獨的工具提示。由于這兩個小部件的所有新配置選項都是相似的，所以讓我們以DHTMLX Grid為例來看看它們是如何工作的。

首先，有新的和p配置屬性，可以讓您完全控制網(wǎng)格頁眉和頁腳的工具提示。

const grid = new dhx.Grid("grid_container", {
columns: [
// columns config
],
data: dataset,
tooltip: false,
headerTooltip: true,
footerTooltip: true,
});

 如果需要，還可以為特定網(wǎng)格列的頁眉/頁腳啟用工具提示。要做到這一點，您應(yīng)該在列內(nèi)相應(yīng)的header/footer對象中指定tooltip屬性：

const grid = new dhx.Grid("grid", {
columns: [
{ id: "country", header: [{ text: "Country", tooltip: true }] },
{ id: "population", header: [{ text: "Population" }] },
// more columns
],
data: dataset,
tooltip: false,
});

或者，您可以通過tooltipTemplate配置屬性中指定的模板為整個網(wǎng)格(或特定列)的頁眉/頁腳提供自定義工具提示。從現(xiàn)在開始，工具提示也可以顯示為列的復(fù)雜頁眉/頁腳內(nèi)容的值，例如聚合函數(shù)(“avg”，“sum”，“max”，“min”，“count”)。此外，您有機(jī)會為任何類型的頁眉/頁腳內(nèi)容使用模板，這意味著可以為過濾器等元素添加工具提示。下面，你可以看到這些新奇的東西是如何實現(xiàn)和付諸實踐的。

const grid = new dhx.Grid("grid", {
columns: [
{
id: "title",
tooltipTemplate: (value) => `Book: ${value}`,
header: [
{
text: "Title",
tooltipTemplate: () => `Here can be an explanation for the title of this column. You can write a long description.`
},
{
content: "inputFilter",
tooltipTemplate: () => `Write something to search by book title`
},
],
},
{
id: "authors",
...
footer: [{ content: "count" }]
},
// more columns
});

更多產(chǎn)品更新內(nèi)容，點擊“”咨詢~