DHTMLX UI 組件庫(kù)允許您更快地構(gòu)建跨平臺(tái)、跨瀏覽器 Web 和移動(dòng)應(yīng)用程序。它包括一組豐富的即用式 HTML5 組件，這些組件可以輕松組合到單個(gè)應(yīng)用程序界面中。DHTMLX JS UI 組件可用于任何服務(wù)器端技術(shù)：PHP、Java、ASP.NET、Ruby、Grails、ColdFusion、Python 等。此外，您可以輕松地將它們集成到基于Angular、React和 Vue.js 的 Web 應(yīng)用中。

DHTMLX Suite v8.4帶來(lái)了大量的API更新，這有助于用戶使用流行的JavaScript UI小部件，如Grid/TreeGrid、Combobox、Chart、Form和Toolbar。DHTMLX Combobox小部件提供了一個(gè)機(jī)會(huì)，可以將邏輯添加到小部件中適用的模板中，其中集成了Combobox，即Grid、TreeGrid和Form。Chart小部件現(xiàn)在允許指定一個(gè)模板來(lái)顯示Pie、Pie3D和Donut圖表中的值，并為導(dǎo)出的PDF和PNG格式的圖表添加頁(yè)眉/頁(yè)腳。

DHTMLX ComboBox：自定義模板中的事件處理器

DHTMLX ComboBox小部件的新功能是旨在擴(kuò)展用戶的自定義功能，從現(xiàn)在開始可以通過(guò)新的eventHadlers屬性向Combobox項(xiàng)的自定義模板的HTML元素中添加事件處理程序。

eventHandlers對(duì)象包含一組key:value對(duì)，其中key為處理程序命名事件，value包含事件對(duì)象和組合框項(xiàng)的id。

例如，您可以使用eventHandlers配置選項(xiàng)，當(dāng)終端用戶從組合框列表中刪除選項(xiàng)時(shí)觸發(fā)onclick事件，如下例所示：

const combobox = new dhx.Combobox("combobox", {
newOptions: true, // enables the ability to add and save new values from UI
itemHeight: 40,
template: ({ value, src }) => {
return `
<div class="list-item">
<div class="list-item__content">
<img class="list-item__image" src="${src}" alt="${value}">
<span class="list-item__value">${value}</span>
</div>
<button class="list-item__button list-item__button--delete">
<i class="dxi dxi-delete-forever"></i>
</button>
</div>
`;
},
eventHandlers: {
onclick: {
"list-item__button--delete": (event, id) => {
combobox.data.remove(id);
combobox.clear();
}
}
},
data,
});

當(dāng)需要禁用此特性時(shí)，可以通過(guò)從處理程序函數(shù)返回false或使用stopPropagation()方法來(lái)實(shí)現(xiàn)。

DHTMLX Grid/TreeGrid：導(dǎo)出PDF和PNG文件的頁(yè)眉/頁(yè)腳

現(xiàn)在我們轉(zhuǎn)向使用最廣泛的DHTMLX Suite小部件——JavaScript Grid和TreeGrid，這兩個(gè)小部件都增加了新的配置選項(xiàng)。

首先，Grid和TreeGrid的“combobox”列編輯器的配置對(duì)象包含了新的eventHandlers選項(xiàng)，最初官方將詞功能集成到Grids編輯器和Form Combo控件的Combobox小部件中，它允許設(shè)置處理事件的邏輯，這些事件分配給列中Combobox編輯器項(xiàng)的自定義模板的HTML元素。

此外在將JavaScript Grid或TreeGrid導(dǎo)出為PDF或PNG文件時(shí)，您還有機(jī)會(huì)指定頁(yè)眉和頁(yè)腳，相應(yīng)的選項(xiàng)被添加到兩個(gè)小部件的png()和pdf()導(dǎo)出方法的配置對(duì)象中。

grid.export.png({
url: "http://export.dhtmlx.com/chart/png/8.0.0",
header: "<h2>Header</h2>",
footer: "<h4>Footer</h4>"
});

此外，現(xiàn)在可以在動(dòng)態(tài)加載期間使用大多數(shù)Data/TreeCollection方法(也可以在List小部件中添加)，將Grid/TreeGrid工具提示設(shè)置為配置對(duì)象，并指定各種設(shè)置，例如顯示/隱藏工具提示框的延遲時(shí)間、其樣式和位置等，并在列中為Combobox編輯器應(yīng)用過(guò)濾功能。

DHTMLX Toolbar：菜單項(xiàng)和導(dǎo)航項(xiàng)控件的新導(dǎo)航選項(xiàng)

新的DHTMLX Suite 8.4為DHTMLX Toolbar小部件的導(dǎo)航功能增加了一個(gè)方便的功能，您只需將鼠標(biāo)指針懸停在工具欄上，就可以使最終用戶在工具欄中看到菜單選項(xiàng)。

要做到這一點(diǎn)，您可以在為工具欄的menuItem和navItem控件添加的新navigationType配置中設(shè)置指針參數(shù)：

const toolbar = new dhx.Toolbar("toolbar_container", {
navigationType: "pointer"
});

navigationType參數(shù)的默認(rèn)值是click，這意味著當(dāng)用戶單擊菜單項(xiàng)時(shí)將顯示它們。

DHTMLX Chart：在PDF和PNG格式中導(dǎo)出模板值、頁(yè)面/頁(yè)腳的圖表

Chart小部件是另一個(gè)流行的Suite小部件，在v8.4中包含了一些改進(jìn)。

從v8.4開始，在使用DHTMLX Suite構(gòu)建Pie、Pie3D和Donut圖表時(shí)，您可以為數(shù)據(jù)項(xiàng)的值提供模板。所需的模板函數(shù)由valueTemplate選項(xiàng)指定：

const chart = new dhx.Chart("chart_container", {
type: "pie",
series: [
{
value: "value",
valueTemplate: value => {
return (value * 100).toFixed(2) + "%";
}
}
]
});

就像Grid和TreeGrid一樣，DHTMLX Chart允許您在以PDF和PNG格式導(dǎo)出的圖表中添加頁(yè)眉和頁(yè)腳。為此，您可以在導(dǎo)出對(duì)象中使用相應(yīng)的頁(yè)眉和頁(yè)腳選項(xiàng)。

如需了解更多產(chǎn)品資訊，歡迎咨詢“”！