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

DHTMLX Spreadsheet正版試用下載

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

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

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

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

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

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

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

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

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

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

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

在實(shí)現(xiàn)從 Grid 導(dǎo)出到 PDF 和 PNG 文件時，需要使用和方法。它們通過以下方式使用grid.export對象調(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ù)的大小。

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

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

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

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

為了提供此功能，我們的開發(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對象中啟用了newOptions屬性，所有新的編輯器選項(xiàng)將獨(dú)立于初始化期間指定的其他選項(xiàng)顯示。

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

選擇和移動多個 TreeGrid 元素

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

新的屬性允許最終用戶使用“Ctrl + 單擊”熱鍵組合一次選擇樹形表中任意數(shù)量的行和單元格。您只需將此屬性添加到 TreeGrid 的配置對象并將其值設(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)您為行配置拖放時，應(yīng)該激活該屬性：

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

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

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

Tree/TreeGrid 中的折疊模式

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

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

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

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

其他改進(jìn)

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

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