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

DHTMLX Spreadsheet正版試用下載

這個(gè)小更新主要是為了改進(jìn)兩個(gè)流行的 Suite 小部件——Grid 和 TreeGrid。它包括自動(dòng)高度、將數(shù)據(jù)表導(dǎo)出為 PDF 和 PNG 文件以及將單獨(dú)的編輯器選項(xiàng)列表添加到列的任何單元格等新功能。我們添加了在 TreeGrid 中選擇任意數(shù)量的行和單元格以及通過(guò)拖放移動(dòng)行的功能。Tree 和 TreeGrid 小部件也獲得了折疊模式。除此之外，我們還更新了圖表中的導(dǎo)出 API。。

Grid/TreeGrid (PRO) 中的自動(dòng)高度模式

新的 Suite 版本能夠在 Grid 和 TreeGrid 小部件中設(shè)置自動(dòng)高度。實(shí)際上，在調(diào)整使用 DHTMLX 構(gòu)建的數(shù)據(jù)表的大小時(shí)，此功能非常有用。例如，現(xiàn)在當(dāng)最終用戶決定添加或刪除行時(shí)，Grid/TreeGrid 將自動(dòng)調(diào)整它們的高度以適合所有表格行。換句話說(shuō)，表格會(huì)在添加行后擴(kuò)展，而刪除行會(huì)使表格縮小。這將有助于解決常見(jiàn)問(wèn)題，例如最后一行和網(wǎng)格底部之間的空白區(qū)域。

要為 DHTMLX Grid 啟用自動(dòng)高度模式，您應(yīng)該在 Grid 配置對(duì)象中將屬性的值設(shè)置為“auto”。

const grid = new dhx.Grid("grid", {
columns: [
// columns config
],
data: dataset,
adjust: true,
height: "auto",
});

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

屬性現(xiàn)在提供了相同的“自動(dòng)”選項(xiàng)。因此，最終用戶在展開(kāi)和折疊樹(shù)數(shù)據(jù)時(shí)應(yīng)該不會(huì)有任何問(wèn)題。

在這兩個(gè)小部件中，您還可以使用min-height和max-height CSS 屬性為容器指定最小和最大高度限制：

<style>
.grid {
min-height: 400px;
max-height: 600px;
}
</style>

Grid/TreeGrid 的新導(dǎo)出選項(xiàng)

在處理表格形式的大型數(shù)據(jù)集時(shí)，有機(jī)會(huì)離線使用這些信息是件好事。這就是為什么我們繼續(xù)擴(kuò)展套件小部件的流行導(dǎo)出選項(xiàng)列表的原因。從 v8.1 開(kāi)始，Grid 和 TreeGrid 小部件允許將數(shù)據(jù)導(dǎo)出為 PDF 和 PNG 格式。這些新功能將補(bǔ)充已經(jīng)可用的 CSV 和 Excel 導(dǎo)出功能。

在實(shí)現(xiàn)從 Grid 導(dǎo)出到 PDF 和 PNG 文件時(shí)，需要使用和方法。它們通過(guò)以下方式使用grid.export對(duì)象調(diào)用：

• 網(wǎng)格.export.pdf();
• 網(wǎng)格.export.png();

導(dǎo)出設(shè)置非常靈活，如果需要，您可以進(jìn)行各種調(diào)整：

grid.export.pdf({
pdf:{format: false, scale:0.8},
theme: "dark",
});

TreeGrid 小部件還接收了pdf()和png()方法。

除此之外，Grid 和 TreeGrid 的 API 現(xiàn)在還包含 exportStyles屬性，可以將數(shù)據(jù)與所需的 CSS 樣式一起導(dǎo)出。為此，您必須指定具有所需樣式的完整路徑的字符串值，如下所示：

const grid = new dhx.Grid("grid_container", {
columns: [
// columns config
],
exportStyles: [
"http://mySite.com/exportStyle.css",
"http://mySite.com/secondExportStyle.css"
],
data: dataset
});

默認(rèn)情況下，此功能處于禁用狀態(tài)，因?yàn)樗兄跍p小導(dǎo)出數(shù)據(jù)的大小。

最終用戶將能夠通過(guò)相應(yīng)的 UI 按鈕導(dǎo)出數(shù)據(jù)。您可以使用此示例測(cè)試 PDF 和 PNG 導(dǎo)出選項(xiàng)。

可通過(guò)我們的在線導(dǎo)出服務(wù)免費(fèi)導(dǎo)出為 PDF/PNG。如果在沒(méi)有有效訂閱的情況下使用，水印將出現(xiàn)在導(dǎo)出的表格上。另一種選擇是獲取本地導(dǎo)出模塊，可以將其安裝在您的服務(wù)器上以避免向我們的服務(wù)發(fā)送數(shù)據(jù)。導(dǎo)出為 PDF/PNG 的模塊在商業(yè)、企業(yè)和終極許可下的套件包中提供，或者可以單獨(dú)購(gòu)買。

Grid/TreeGrid 中列單元格的單獨(dú)編輯器選項(xiàng)集

新的 DHTMLX Suite 8.1 還觸及了編輯等數(shù)據(jù)管理的關(guān)鍵方面。從現(xiàn)在開(kāi)始，您可以在列的單元格中添加自己的一組不同的編輯器選項(xiàng)。此功能可用于選擇、多選和組合框編輯器類型。

為了提供此功能，我們的開(kāi)發(fā)團(tuán)隊(duì)擴(kuò)展了Grid 和 TreeGrid 小部件中的屬性。現(xiàn)在您可以將列的此屬性定義為采用以下參數(shù)的回調(diào)函數(shù)：

col – 列的當(dāng)前配置，調(diào)用函數(shù)的位置
row – 行中的所有單元格，調(diào)用函數(shù)的位置

該函數(shù)將返回字符串值數(shù)組或?qū)ο髷?shù)組。

應(yīng)該提到的是，如果在editorConfig對(duì)象中啟用了newOptions屬性，所有新的編輯器選項(xiàng)將獨(dú)立于初始化期間指定的其他選項(xiàng)顯示。

 因此，您可以為最終用戶提供從單元格中的各種值集中進(jìn)行選擇的可能性，從而使編輯過(guò)程更加靈活和方便。

選擇和移動(dòng)多個(gè) TreeGrid 元素

在 Suite 庫(kù)的最近重大更新之后，一次拖放多條記錄的功能已可用于 Grid 組件，我們的客戶非常喜歡它。對(duì)該功能的高需求使我們確信將其添加到 TreeGrid 小部件中。就在這里。

新的屬性允許最終用戶使用“Ctrl + 單擊”熱鍵組合一次選擇樹(shù)形表中任意數(shù)量的行和單元格。您只需將此屬性添加到 TreeGrid 的配置對(duì)象并將其值設(shè)置為true。

const treeGrid = new dhx. TreeGrid ( "treegrid" , {
columns : [
// columns config
] ,
data : dataset ,
adjust : true ,
multiselection : true ,
dragExpand : true ,
selection : "row" , // "cell" | "row" | "complex "
} ) ;

 多選屬性還有助于使最終用戶能夠使用拖放操作移動(dòng)帶有記錄的多行。當(dāng)您為行配置拖放時(shí)，應(yīng)該激活該屬性：

const treeGrid =  new dhx. TreeGrid ( "treegrid" ,  {
...

//在樹(shù)狀網(wǎng)格內(nèi)拖放行
multiselection :  true ,
dragItem :  "both"  // or dragItem: "row"
//在樹(shù)狀網(wǎng)格之間拖放行
multiselection : true ,
dragMode : "both" // or dragMode: "source"
} ) ;

此外，我們添加了dragExpand屬性，允許最終用戶查看折疊行的所有子元素，因?yàn)楫?dāng)用戶在拖放過(guò)程中將鼠標(biāo)懸停在它們上方時(shí)，它們會(huì)展開(kāi)。如果您不需要此功能，只需將該屬性的值設(shè)置為false即可。

Tree/TreeGrid 中的折疊模式

還有一個(gè)影響 Suite 的 TreeGrid 和 Tree 的更值得注意的變化。在 v8.1 中，我們?yōu)槟峁┝艘环N方法來(lái)初始化這兩個(gè)小部件，同時(shí)保持行的折疊狀態(tài)。以前，您可以使用collapseAll()方法執(zhí)行此操作，但它會(huì)導(dǎo)致性能下降。

由于新添加的 collapsed屬性，在初始化 Tree 和 TreeGrid 時(shí)保持行的折疊狀態(tài)成為可能。有必要將此屬性添加到所需小部件的配置對(duì)象并將其值設(shè)置為true。這就是將collapsed屬性嵌入到 TreeGrid 配置中的方式：

const treeGrid = new dhx.TreeGrid("treegrid", {
columns: [
...
],
collapsed: true,
data: dataset
});

類似的屬性負(fù)責(zé) Tree 小部件中的折疊模式。中如何實(shí)現(xiàn)此功能。

其他改進(jìn)

最后，我們想提一下圖表小部件中對(duì)和方法的一系列小補(bǔ)充，旨在改善您使用相應(yīng)導(dǎo)出選項(xiàng)的體驗(yàn)。我們將 theme 和exportStyles選項(xiàng)添加到兩種方法中的導(dǎo)出對(duì)象。pdf對(duì)象現(xiàn)在還包括以下新選項(xiàng)：pageRanges、displayHeaderFooter、footerTemplate和headerTemplate。
就像在 Grid 和 TreeGrid 小部件中一樣，現(xiàn)在您可以使用屬性來(lái)導(dǎo)出具有 CSS 樣式的圖表。

甘特圖控件交流群：764148812    歡迎進(jìn)群交流討論