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

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

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

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

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

例如，您可以使用eventHandlers配置選項，當終端用戶從組合框列表中刪除選項時觸發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,
});

當需要禁用此特性時，可以通過從處理程序函數返回false或使用stopPropagation()方法來實現。

DHTMLX Grid/TreeGrid：導出PDF和PNG文件的頁眉/頁腳

現在我們轉向使用最廣泛的DHTMLX Suite小部件——JavaScript Grid和TreeGrid，這兩個小部件都增加了新的配置選項。

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

此外在將JavaScript Grid或TreeGrid導出為PDF或PNG文件時，您還有機會指定頁眉和頁腳，相應的選項被添加到兩個小部件的png()和pdf()導出方法的配置對象中。

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

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

DHTMLX Toolbar：菜單項和導航項控件的新導航選項

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

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

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

navigationType參數的默認值是click，這意味著當用戶單擊菜單項時將顯示它們。

DHTMLX Chart：在PDF和PNG格式中導出模板值、頁面/頁腳的圖表

Chart小部件是另一個流行的Suite小部件，在v8.4中包含了一些改進。

從v8.4開始，在使用DHTMLX Suite構建Pie、Pie3D和Donut圖表時，您可以為數據項的值提供模板。所需的模板函數由valueTemplate選項指定：

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格式導出的圖表中添加頁眉和頁腳。為此，您可以在導出對象中使用相應的頁眉和頁腳選項。

如需了解更多產品資訊，歡迎咨詢“”！