DHTMLX UI 組件庫允許您更快地構建跨平臺、跨瀏覽器 Web 和移動應用程序。它包括一組豐富的即用式 HTML5 組件，這些組件可以輕松組合到單個應用程序界面中。

DHTMLX Suite v8.3已于近日正式發布啦！這個更新附帶了一組新特性和改進，旨在促進您使用JavaScript UI小部件庫的體驗。例如，在Colorpicker小部件中添加了設置顏色透明度級別的功能。在v8.3中，流行的Grid/TreeGrid功能，如自動高度模式、單元格中的HTML內容和事件處理程序，可以專門應用于頁眉和頁腳。

Colorpicker（顏色選擇器） - 顏色透明度選項

DHTMLX Colorpicker是一個方便的工具，可以在各種UI元素(如表單或彈出窗口)中實現顏色選擇功能。在v8.3中，我們為這個小部件補充了一個豐富的調色板，可以指定所選顏色的透明度。

您不需要在代碼中添加任何東西來允許最終用戶使用顏色透明度，因為這個特性在默認情況下是通過新的透明度屬性啟用的，此屬性負責在網頁上顯示透明度比例。

要通過UI設置所需的顏色透明度級別，最終用戶只需拖動透明度刻度上的滑塊旋鈕，如下面的示例所示。

如果需要，可以通過將transparency屬性的值設置為false來禁用顏色透明度特性。

const colorpicker = new dhx.Colorpicker("colorpicker", {
transparency: false
});

Grid & TreeGrid - 列的頁眉和頁腳的新功能

自動高度模式(PRO)

在8.1版本中，我們為使用Grid和TreeGrid小部件構建的表中的行引入了自動高度模式，新的Suite版本將此功能擴展到表列中的頁眉和頁腳。因此，Grid/TreeGrid將根據內容動態調整頁眉/頁腳的高度，頁眉和頁腳可以包含各種長度的文本，并且對最終用戶仍然完全可見。

通過編程方式，在Grid/TreeGrid配置對象中添加新的headerAutoHeight和footerAutoHeight參數來激活頁眉/頁腳的自動高度模式。它們允許切換頁眉或頁腳的自動高度模式，獨立于常見的autoheight屬性。

下面是如何在Grid小部件中完成的：

const grid = new dhx.Grid("grid", {
columns: [
...
],
...
autoHeight: false, // enables autoHeight in data (content)
headerAutoHeight: true, // enables autoHeight in header
footerAutoHeight: true, // enables autoHeight in footer
});

請注意，此功能僅在DHTMLX Grid的PRO版中可用。

請記住，如果您的表應該具有特定固定高度的頁眉和頁腳，也可以通過已經存在的headerRowHeight和footerRowHeight屬性來指定它們。

事件處理程序

DHTMLX Suite 8.3為您提供了一種新的方便方法，可以在Grid/TreeGrid中向列的頁眉和頁腳添加事件處理程序。現在，您可以依靠eventHandlers屬性來更快地完成此任務，而不是自己將事件處理程序附加到頁眉/頁腳。如果以前這個屬性只允許向數據集中定義的HTML元素或列單元格中的自定義模板添加事件處理程序，那么現在它也可以用于頁眉/頁腳單元格。

例如，您可以在標題中將onclick事件添加到主復選框中。當復選框被標記為已選中/未選中并更新列中的所有從屬復選框時，該事件應該觸發：

const grid = new dhx.Grid("grid", {
columns: [
{
width: 60,
id: "paid",
header: [
{
text: `
<label class="dhx_checkbox dhx_cell-editor__checkbox ">
<input type="checkbox" class="dhx_checkbox__input dhx_checkbox--check-all">
<span class="dhx_checkbox__visual-input "></span>
</label>
`,
...// more options
],
...// more options
eventHandlers: {
onclick: {
"dhx_checkbox--check-all": function(event, data) {
grid.data.forEach(row => {
grid.data.update(row.id, {
[data.col.id]: event.target.checked,
});
});
}
},
},
});

這種新特性擴展了使用DHTMLX交付動態和交互式數據表的機會。

頁眉/頁腳單元格中的HTML內容

除了自動高度模式和事件處理程序之外，8.3版本還為列的頁眉/頁腳添加了一個Grid/TreeGrid功能。現在，您可以使用htmlEnable屬性用任何HTML內容來補充這些表元素。

例如，您可以應用htmlEnable屬性來改變標題單元格的樣式，如下所示：

const grid = new dhx.Grid("grid", {
columns: [
{ width: 200, id: "country", header: [
{
text: "<span style='font-size:16px; color: steelblue'>Country</span>",
htmlEnable: true,
}
]},
{ width: 150, id: "population", htmlEnable: true, header: [
{ text: "<span class='header-title'>Population</span>" }
...// other columns' configs
],
data: dataset,
htmlEnable: false,
});

當應用于列的頁眉(或頁腳)時，htmlEnable屬性將重新定義已經為父列或整個表指定的相同配置的值。

更多產品更新內容，請詳詢“”獲取~