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

點擊下載dhtmlxSuite最新版

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

數字格式

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

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

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

    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中便利用戶體驗的另一個貢獻是能夠在Grid和TreeGrid列的單元格中顯示多行可編輯文本。它是通過Grid和TreeGrid的autoHeight：true配置選項實現的。它將單元格內容分為多行，使其適合列的寬度并自動調整列的高度。

為了使多行內容可編輯，您只需要在列的配置中指定編輯器的textarea類型，并在Grid或TreeGrid的配置中結合autoHeight：true選項設置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小部件的自定義機會。從現在開始，您可以為Grid和TreeGrid單元創建自定義工具提示，其中包含任何類型的HTML內容。例如，工具提示可以顯示幾行內容，以提供有關表中數據的附加信息，包括圖像：

通過DHTMLX Grid和TreeGrid中的tooltipTemplate函數可以創建自定義工具提示。

其他更新

分行高度

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

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屬性優先于autoHeight：true配置選項。在DHTMLX Grid和TreeGrid文檔中了解更多信息。

Date() Object Support

從現在開始，在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圖表中的工具提示進行了改進。現在，用戶可以在x軸上看到與某個點相關的所有序列，從而更快地處理數據。

DHTMLX Grid，Tree和TreeGrid中的新事件

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

DHTMLX TreeGrid中的根父級