Highcharts Grid在线表格介绍与使用示例

Highcharts Grid 产品介绍

Highcharts Grid 是 Highcharts 家族中专注于数据表格展示的轻量级产品，旨在帮助开发者快速构建高性能、可交互的数据网格。

它继承了 Highcharts 一贯的简洁 API 和优雅设计，让表格不再只是静态的数据陈列，而是具备排序、筛选、分页等交互能力的现代化数据组件。

核心特点

• 轻量高效：核心库体积小，加载速度快，适合嵌入各类 Web 应用，不拖累页面性能。
• 简洁 API：与 Highcharts 一脉相承的配置式写法，上手门槛低，几行代码即可渲染出功能完整的表格。
• 数据驱动：支持通过 dataTable 或 data 配置直接绑定数据源，方便与后端接口或前端状态管理无缝对接。
• 交互丰富：内置排序、筛选、分页等常用表格交互能力，提升数据浏览效率。
• 视觉统一：与 Highcharts 图表风格保持一致，便于在同一页面中组合图表与表格，形成完整的数据可视化方案。
• 易于扩展：提供灵活的列配置和自定义选项，可按业务需求定制表头格式、列宽和单元格样式。

Grid.grid('container', {
dataTable: {
columns: {
product: ['Apples', 'Pears', 'Plums', 'Bananas'],
weight: [100, 40, 0.5, 200],
price: [1.5, 2.53, 5, 4.5]
}
}
});

Highcharts Grid如何生成或渲染查看在线可编辑表格

保存为一个 .html 文件并在浏览器中打开，即可查看渲染的极简表格。完整代码如下：

<!DOCTYPE html>
<html>
<head>
<title>极简表格示例</title>
<script src="https://cdn.jsdelivr.net/npm/@highcharts/grid-lite/grid-lite.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@highcharts/grid-lite/css/grid.css" />
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
<script>
const data = {
name: [
"项目 A",
"项目 B",
"项目 C"
],
value: [
30,
70,
45
]
};

Highcharts.gridChart('container', {
title: {
text: '极简表格示例'
},
columns: [
{
id: 'name',
header: {
format: '名称'
}
},
{
id: 'value',
header: {
format: '值'
}
}
],
data: data
});
</script>
</body>
</html>

要实现网页上的可编辑表格，需要使用 Highcharts Grid Pro；Grid Lite 适合展示、排序和筛选数据，不包含单元格编辑功能。

下面是一个可直接渲染的示例：双击单元格或选中后按 Enter 编辑，修改会先保留在当前页面的数据中。

Grid.grid('container', {
data: {
columns: {
name: ['张敏', '李伟', '王芳', '陈杰', '刘洋', '周宁'],
department: ['销售', '研发', '市场', '研发', '销售', '市场'],
score: [86, 92, 78, 95, 88, 81]
}
},
caption: { text: '员工信息（可编辑）' },
description: { text: '双击单元格或选中后按 Enter 编辑。' },
columnDefaults: {
filtering: { enabled: true },
cells: {
editMode: { enabled: true },
events: {
afterEdit: function () {
console.log('已修改：', this.column.id, this.value);
}
}
}
},
columns: [
{
id: 'name',
header: { format: '姓名' },
cells: {
editMode: {
enabled: true,
validationRules: ['notEmpty']
}
}
},
{
id: 'department',
header: { format: '部门' }
},
{
id: 'score',
header: { format: '评分' },
dataType: 'number',
cells: {
editMode: {
enabled: true,
validationRules: ['number']
}
}
}
],
pagination: {
enabled: true,
pageSize: 5
}
});

需要注意：

• 这是 Grid Pro 功能。正式应用中需要配置有效的 Grid Pro key；预览代码按要求未填入 key。
• 示例中的修改只存在于前端。若要保存到数据库，可以在 afterEdit 事件中调用后端接口；具体保存逻辑需由应用实现。
• 可参考 Grid 单元格编辑示例 和 Grid 文档。