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

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

DHTMLX Suite v8.3正式版下載

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

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

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

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

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

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

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

自動高度模式(PRO)

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

通過編程方式，在Grid/TreeGrid配置對象中添加新的headerAutoHeight和footerAutoHeight參數(shù)來激活頁眉/頁腳的自動高度模式。它們允許切換頁眉或頁腳的自動高度模式，獨立于常見的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版中可用。

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

事件處理程序

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

例如，您可以在標(biāo)題中將onclick事件添加到主復(fù)選框中。當(dāng)復(fù)選框被標(biāo)記為已選中/未選中并更新列中的所有從屬復(fù)選框時，該事件應(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,
});
});
}
},
},
});

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

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

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

例如，您可以應(yīng)用htmlEnable屬性來改變標(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)用于列的頁眉(或頁腳)時，htmlEnable屬性將重新定義已經(jīng)為父列或整個表指定的相同配置的值。文章來源地址http://www.zghlxwxcb.cn/news/detail-787077.html

到了這里，關(guān)于DHTMLX Suite v8.3發(fā)布！深化JavaScript UI小部件庫使用體驗的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！