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

點(diǎn)擊下載dhtmlxSuite最新版

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

數(shù)字格式

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

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

• 第二列中具有數(shù)千個(gè)分隔符的人口數(shù)
• 百分比值在第三欄中四舍五入到小數(shù)點(diǎn)后兩位
• 第四欄中帶有千位分隔符的美元數(shù)量
• 以撇號(hào)作為小數(shù)點(diǎn)分隔符的生育率在第五欄中四舍五入到小數(shù)點(diǎn)后兩位
• 日期根據(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中便利用戶體驗(yàn)的另一個(gè)貢獻(xiàn)是能夠在Grid和TreeGrid列的單元格中顯示多行可編輯文本。它是通過Grid和TreeGrid的autoHeight：true配置選項(xiàng)實(shí)現(xiàn)的。它將單元格內(nèi)容分為多行，使其適合列的寬度并自動(dòng)調(diào)整列的高度。

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

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

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

工具提示模板

V7.1擴(kuò)展了DHTMLX小部件的自定義機(jī)會(huì)。從現(xiàn)在開始，您可以為Grid和TreeGrid單元?jiǎng)?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配置選項(xiàng)。在DHTMLX Grid和TreeGrid文檔中了解更多信息。

Date() Object Support

從現(xiàn)在開始，在DHTMLX Grid和TreeGrid中使用日期配置列更加容易，因?yàn)樗鼈冎С諨ate（）對象：

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

管理DHTMLX窗口的全屏模式

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

多個(gè)系列的圖表工具提示

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

DHTMLX Grid，Tree和TreeGrid中的新事件

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

DHTMLX TreeGrid中的根父級(jí)