Highcharts Grid / 网格产品选项详解｜官方使用文档说明

理解 Highcharts Grid

在其核心，网格由一个数据源组成，该数据源以一定数量的列和行进行渲染。许多可用的配置选项适用于列以及它们对应的行和标题单元格。

以下内容介绍了网格中各种根配置对象

dataTable 数据表

{
    dataTable: {
        columns: {
            product: ["Apple", "Pear", "Orange", "Banana"],
            weight: [182, 178, 150, 120],
            price: [3.5, 2.5, 3, 2.2],
            vitamin_a: [54,27,225,64]
        }
    }
}

dataTable 对象是确保网格正确渲染的唯一必需选项，而dataTable.columns 则创建了DataTable类的实例。这个类具有键值对，其中键用于标题单元格，值是对应行单元格的值数组。

了解更多关于 数据处理和 DataTable 类信息。

Data modifiers 数据修改器

除了可序列化的选项外，你还可以传递一个对你在渲染网格时想要使用的 数据表DataTable 的引用。例如，你可以提前应用 Highcharts 仪表板库中的 数学修饰器Math Modifier ，以添加一列新列，其值是对一个或多个现有列进行数学运算的结果。

您可以在 here阅读更多关于数据修器 Data Modifiers.

columnDefaults and columns[ ]

{
    columnDefaults: {
        cells: {
            editMode: {
                enabled: true
            }
        }
    },
    columns: [{
        id: "weight",
        header: {
            format: "Weight"
        },
        cells: {
            format: "{value}g",
            editMode: {
                enabled: false
            }
        }
    }, {
        id: "price",
        header: {
            format: "Price"
        },
        cells: {
            format: "${value}"
        }
    }]
}

columnDefaults 对象定义了网格中所有列的默认选项，例如列排序器、列调整大小器、值编辑器、单元格格式等，columns[]数组中的对象可以在需要时用来覆盖特定列的默认设置。请注意，columnDefaults中的大多数选项在columns[]数组中的对象中也会一一对应。

了解更多关于 columns[] 的信息，请参阅我们的Columns article 或查看 API 参考文档中的 columnDefaults and columns[].

caption 标题

{
    caption: {
        text: "Title of the Grid";
    }
}

上面的代码片段展示了如何在网格上方插入标题或标题栏。

有关 caption 选项的更多信息，请参阅 API reference.

header[ ]

{
    header: [
        {
            columnId: "product"
            format: "Fruit",
        },
        "weight",
        "price"
    ]
}

虽然可以通过 columns[] 选项设置单个列及其标题单元格的格式和可见性，但同样可以使用 header[] 根选项实现。使用哪个选项取决于您的具体用例，在某些情况下， header[] 会比 columns[] 更简洁。

此外，header[ ]选项还可以更改表头和分组表头的顺序，形成层次结构。

Header 文章 提供了关于header[]的更多信息。

.

accessibility 可访问性

{
  accessibility: {
    enabled: false,
    ...
  }
}

可以使用 accessibility 选项对象来启用或禁用无障碍功能，例如 ARIA 属性和 ARIA 实时通知。

有关无障碍选项的更多信息，请阅读我们的文档文章 无障碍 accessibility.

lang 语言

要自定义ARIA属性和播报器的默认语言或措辞，请使用lang.accessibility 选项。在当前版本的Highcharts Grid中， lang 选项仅与无障碍 accessibility相关，但随着我们添加更多功能，将会扩展到其他用例。请通过访问我们的更新日志changelog和路线图roadmap保持最新信息。

rendering 渲染

The rendering option object can be used to configure options related to performance and the rendering of the Grid. Example: Rendering.rows represents the rows in the Grid.
rendering 选项对象来配置与性能和网格渲染相关的选项。例如：Rendering.rows 表示网格中的行。

{
    rendering: {
        rows: {
            bufferSize: 5,
            strictHeights: true
        }
    }
}

有关渲染选项的更多信息，请阅读我们的文章Performance and rendering或 API reference.

Pagination 分页

pagination 选项对象允许您将大型数据集拆分成易于管理的页面，从而提升性能和用户体验。启用后，分页会显示部分数据，并配有导航控件。

{
    pagination: {
        enabled: true,
        pageSize: 25,
        position: 'bottom',
        controls: {
            pageSizeSelector: {
                enabled: true,
                options: [10, 25, 50, 100]
            },
            pageInfo: {
                enabled: true
            },
            firstLastButtons: {
                enabled: true
            },
            previousNextButtons: {
                enabled: true
            },
            pageButtons: {
                enabled: true,
                count: 5
            }
        }
    }
}

分页控件包括页面大小选择、页面信息显示、首页/末页按钮、上一页/下一页按钮以及编号页面按钮。您还可以配置分页事件（在 Grid Pro 版本中）以响应页面变更和页面大小调整。

有关分页选项和事件的更多信息，请参阅 Pagination 或 API reference.

events 事件

Highcharts Grid Pro 支持多种事件监听器，可以添加到表头、列和单元格。这些提供了自定义功能并扩展了表格的可用性。更多关于事件的内容，请阅读Events article.

setOptions() 设置选项

在同一页面添加多个网格时，建议使用 setOptions() 全局设置默认选项。这种方法比逐个配置每个网格更高效。有关所有默认选项的概述，请参阅API参考 API reference.

Grid.setOptions({
    columnDefaults: {
        sorting: {
            sortable: false
        }
    }
})

这个示例禁用了页面上每个网格的最终用户排序功能。