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

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

Colorpicker（顏色選擇器） - 顏色透明度選項(xiàng)

DHTMLX Colorpicker是一個(gè)方便的工具，可以在各種UI元素(如表單或彈出窗口)中實(shí)現(xiàn)顏色選擇功能。在v8.3中，我們?yōu)?這個(gè)小部件補(bǔ)充了一個(gè)豐富的調(diào)色板，可以指定所選顏色的透明度。

您不需要在代碼中添加任何東西來(lái)允許最終用戶(hù)使用顏色透明度，因?yàn)檫@個(gè)特性在默認(rèn)情況下是通過(guò)新的透明度屬性啟用的，此屬性負(fù)責(zé)在網(wǎng)頁(yè)上顯示透明度比例。

要通過(guò)UI設(shè)置所需的顏色透明度級(jí)別，最終用戶(hù)只需拖動(dòng)透明度刻度上的滑塊旋鈕，如下面的示例所示。

如果需要，可以通過(guò)將transparency屬性的值設(shè)置為false來(lái)禁用顏色透明度特性。

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

Grid & TreeGrid - 列的頁(yè)眉和頁(yè)腳的新功能

自動(dòng)高度模式(PRO)

在8.1版本中，我們?yōu)槭褂肎rid和TreeGrid小部件構(gòu)建的表中的行引入了自動(dòng)高度模式，新的Suite版本將此功能擴(kuò)展到表列中的頁(yè)眉和頁(yè)腳。因此，Grid/TreeGrid將根據(jù)內(nèi)容動(dòng)態(tài)調(diào)整頁(yè)眉/頁(yè)腳的高度，頁(yè)眉和頁(yè)腳可以包含各種長(zhǎng)度的文本，并且對(duì)最終用戶(hù)仍然完全可見(jiàn)。

通過(guò)編程方式，在Grid/TreeGrid配置對(duì)象中添加新的headerAutoHeight和footerAutoHeight參數(shù)來(lái)激活頁(yè)眉/頁(yè)腳的自動(dòng)高度模式。它們?cè)试S切換頁(yè)眉或頁(yè)腳的自動(dòng)高度模式，獨(dú)立于常見(jiàn)的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
});

請(qǐng)注意，此功能僅在DHTMLX Grid的PRO版中可用。

請(qǐng)記住，如果您的表應(yīng)該具有特定固定高度的頁(yè)眉和頁(yè)腳，也可以通過(guò)已經(jīng)存在的headerRowHeight和footerRowHeight屬性來(lái)指定它們。

事件處理程序

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

例如，您可以在標(biāo)題中將onclick事件添加到主復(fù)選框中。當(dāng)復(fù)選框被標(biāo)記為已選中/未選中并更新列中的所有從屬?gòu)?fù)選框時(shí)，該事件應(yīng)該觸發(fā)：

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,
});
});
}
},
},
});

這種新特性擴(kuò)展了使用DHTMLX交付動(dòng)態(tài)和交互式數(shù)據(jù)表的機(jī)會(huì)。

頁(yè)眉/頁(yè)腳單元格中的HTML內(nèi)容

除了自動(dòng)高度模式和事件處理程序之外，8.3版本還為列的頁(yè)眉/頁(yè)腳添加了一個(gè)Grid/TreeGrid功能。現(xiàn)在，您可以使用htmlEnable屬性用任何HTML內(nèi)容來(lái)補(bǔ)充這些表元素。

例如，您可以應(yīng)用htmlEnable屬性來(lái)改變標(biāo)題單元格的樣式，如下所示：

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,
});

當(dāng)應(yīng)用于列的頁(yè)眉(或頁(yè)腳)時(shí)，htmlEnable屬性將重新定義已經(jīng)為父列或整個(gè)表指定的相同配置的值。

更多產(chǎn)品更新內(nèi)容，請(qǐng)?jiān)斣?xún)“”獲取~