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

DHTMLX Spreadsheet正版試用下載

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

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

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

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

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

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

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

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

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

Grid/TreeGrid 的新導出選項

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

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

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

導出設(shè)置非常靈活，如果需要，您可以進行各種調(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 樣式一起導出。為此，您必須指定具有所需樣式的完整路徑的字符串值，如下所示：

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

默認情況下，此功能處于禁用狀態(tài)，因為它有助于減小導出數(shù)據(jù)的大小。

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

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

Grid/TreeGrid 中列單元格的單獨編輯器選項集

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

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

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

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

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

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

選擇和移動多個 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 "
} ) ;

 多選屬性還有助于使最終用戶能夠使用拖放操作移動帶有記錄的多行。當您為行配置拖放時，應該激活該屬性：

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屬性，允許最終用戶查看折疊行的所有子元素，因為當用戶在拖放過程中將鼠標懸停在它們上方時，它們會展開。如果您不需要此功能，只需將該屬性的值設(shè)置為false即可。

Tree/TreeGrid 中的折疊模式

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

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

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

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

其他改進

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

甘特圖控件交流群：764148812    歡迎進群交流討論