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

以下内容介绍了网格中各种根配置对象
dataTable 数据表
js
{
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[ ]
js
{
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 标题
js
{
caption: {
text: "Title of the Grid";
}
}
上面的代码片段展示了如何在网格上方插入标题或标题栏。
有关 caption 选项的更多信息,请参阅 API reference.
header[ ]
js
{
header: [
{
columnId: "product"
format: "Fruit",
},
"weight",
"price"
]
}
虽然可以通过 columns[] 选项设置单个列及其标题单元格的格式和可见性,但同样可以使用 header[] 根选项实现。使用哪个选项取决于您的具体用例,在某些情况下, header[] 会比 columns[] 更简洁。
此外,header[ ]选项还可以更改表头和分组表头的顺序,形成层次结构。
Header 文章 提供了关于header[]的更多信息。
.
accessibility 可访问性
js
{
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 表示网格中的行。
js
{
rendering: {
rows: {
bufferSize: 5,
strictHeights: true
}
}
}
有关渲染选项的更多信息,请阅读我们的文章Performance and rendering或 API reference.
Pagination 分页
pagination 选项对象允许您将大型数据集拆分成易于管理的页面,从而提升性能和用户体验。启用后,分页会显示部分数据,并配有导航控件。
js
{
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.
js
Grid.setOptions({
columnDefaults: {
sorting: {
sortable: false
}
}
})
这个示例禁用了页面上每个网格的最终用户排序功能。