dhtmlxSuite是一個用JavaScript建立的富客戶端開發(fā)框架。它是一個JavaScript UI庫，用于建立一個完整的具有Ajax能力的前臺組件。用戶可以使用它建立一個企業(yè)級的跨瀏覽器Web應(yīng)用和移動應(yīng)用程序，它能提供優(yōu)秀的性能和更豐富的用戶體驗。

點擊下載dhtmlxSuite最新版

DHTMLX Suite v7.1的發(fā)布將使我們?yōu)?021年揭開序幕。該更新將在DHTMLX Grid和TreeGrid中推出所需功能：格式化列中的數(shù)字值以及在單元格中顯示和編輯多行文本。此外，我們還介紹了工具提示的模板和一系列其他新穎性。

數(shù)字格式

該版本的主題演講是能夠以所需的數(shù)字格式在DHTMLX Grid和TreeGrid列的單元格中指定和顯示值。從現(xiàn)在開始，您可以定義在小數(shù)點后顯示多少位數(shù)，以及如何設(shè)置千位和十進(jìn)制分隔符。您可以將值設(shè)置為百分比，并輕松地將必要的數(shù)字格式與貨幣和任何其他符號組合在一起。

下面的示例演示了具有不同格式設(shè)置的六個Grid列的配置：

• 第二列中具有數(shù)千個分隔符的人口數(shù)
• 百分比值在第三欄中四舍五入到小數(shù)點后兩位
• 第四欄中帶有千位分隔符的美元數(shù)量
• 以撇號作為小數(shù)點分隔符的生育率在第五欄中四舍五入到小數(shù)點后兩位
• 日期根據(jù)第六列中的美國日期格式

    columns: [
        { width: 150, id: "country", header: [{ text: "Country" }], footer: [{ text: "Summary" }] },
        { width: 150, id: "population", header: [{ text: "Population" }], footer: [{ content: "sum" }], type: "number", format: "# #" },
        { width: 120, id: "yearlyChange", header: [{ text: "Yearly Change" }], footer: [{ content: "avg" }], type: "percent", format: "#,00" },
        { width: 150, id: "netChange", header: [{ text: "Money" }], footer: [{ content: "sum" }], type: "number", format: "# #", template: i => `$ ${i}` },
        { width: 150, id: "fert", header: [{ text: "Fert. Rate" }], footer: [{ content: "min" }], type: "number", format: "# ' 00", template: i => `${i} yrs` },
        { width: 150, id: "date", header: [{ text: "Date" }], footer: [{ content: "count" }], type: "date", format: "%M %d %Y" }
    ],

列中的多行文字

v7.1中便利用戶體驗的另一個貢獻(xiàn)是能夠在Grid和TreeGrid列的單元格中顯示多行可編輯文本。它是通過Grid和TreeGrid的autoHeight：true配置選項實現(xiàn)的。它將單元格內(nèi)容分為多行，使其適合列的寬度并自動調(diào)整列的高度。

為了使多行內(nèi)容可編輯，您只需要在列的配置中指定編輯器的textarea類型，并在Grid或TreeGrid的配置中結(jié)合autoHeight：true選項設(shè)置editable：true選項：

const grid = new dhx.Grid("grid", {
    columns: [
{
// column’s config
editorType: “textarea”
}
// more columns
],
    data: dataset,
    autoHeight: true,
    editable: true,
});

請注意，僅在DHTMLX小部件的PRO版本中，才可以編輯列中的多行文本。

工具提示模板

V7.1擴展了DHTMLX小部件的自定義機會。從現(xiàn)在開始，您可以為Grid和TreeGrid單元創(chuàng)建自定義工具提示，其中包含任何類型的HTML內(nèi)容。例如，工具提示可以顯示幾行內(nèi)容，以提供有關(guān)表中數(shù)據(jù)的附加信息，包括圖像：

通過DHTMLX Grid和TreeGrid中的tooltipTemplate函數(shù)可以創(chuàng)建自定義工具提示。

其他更新

分行高度

雖然您可以在DHTMLX Grid或TreeGrid的配置中一行代碼中一次定義所有行的高度，但是您可能需要為一行或幾行指定不同的高度值。V7.1引入了新的height屬性，您可以為數(shù)據(jù)集中的特定行設(shè)置該屬性，如下例所示：

const dataset = [
        {
            "name": "Bestsellers",
            "id": "b.1",
            height: 150,
        },
...
        {
            "name": "A Time to Kill",
            "price": "12.25",
            "cover": "Hardcover",
            "ships": "12 hours",
            "inStock": "80",
            "parent": "c.1",
            height: 60,
        },
...
      ];

新的height屬性優(yōu)先于autoHeight：true配置選項。在DHTMLX Grid和TreeGrid文檔中了解更多信息。

Date() Object Support

從現(xiàn)在開始，在DHTMLX Grid和TreeGrid中使用日期配置列更加容易，因為它們支持Date（）對象：

const dataset = [
        {
            "country": "China",
            "date": new Date()
        },
        {
            "country": "India",
            "date": new Date(2010, 02, 10)
        },
];

管理DHTMLX窗口的全屏模式

我們在DHTMLX Window的API中添加了兩種新方法來控制全屏模式。所述isFullScreen（）方法檢查窗口是全屏與否。所述unsetFullScreen（）方法退出全屏。

多個系列的圖表工具提示

V7.1對DHTMLX圖表中的工具提示進(jìn)行了改進(jìn)。現(xiàn)在，用戶可以在x軸上看到與某個點相關(guān)的所有序列，從而更快地處理數(shù)據(jù)。

DHTMLX Grid，Tree和TreeGrid中的新事件

為了確保交互性，我們向DHTMLX Grid，Tree和TreeGrid添加了更多事件。該beforeRowResize和afterRowResize幫助聽行高度的變化（在僅專業(yè)版）。用戶對列中的數(shù)據(jù)進(jìn)行排序時，將觸發(fā)beforeSort和afterSort。在DHTMLX樹中，新的beforeCheck和afterCheck事件允許窗口小部件對復(fù)選框項目的狀態(tài)變化做出反應(yīng)。

DHTMLX TreeGrid中的根父級