请求Highchart Dashboards中DataGridClickCallbackFunction的JavaScript使用示例

下面是直接可用的JavaScript示例，通过配置DataGrid的clickCallback函数，实现点击行或单元格时获取对应列值的功能：

// 定义数据源
const employeeData = [
    { id: 1, name: "张三", age: 28, department: "前端开发" },
    { id: 2, name: "李四", age: 32, department: "后端开发" },
    { id: 3, name: "王五", age: 25, department: "UI设计" }
];

// 创建数据源实例
const dataSource = new Highcharts.Data.DataSource({
    data: employeeData
});

// 初始化Dashboard
Highcharts.Dashboards.board('container', {
    dataSources: {
        staff: dataSource
    },
    components: [
        {
            type: 'DataGrid',
            dataSource: 'staff',
            options: {
                columns: [
                    { key: 'id', name: '员工编号' },
                    { key: 'name', name: '员工姓名' },
                    { key: 'age', name: '年龄' },
                    { key: 'department', name: '所属部门' }
                ],
                // 点击回调函数核心逻辑
                clickCallback: function(event) {
                    // 获取点击行的完整数据
                    const rowData = event.row;
                    // 获取点击列的配置信息
                    const columnInfo = event.column;
                    // 提取当前单元格对应的值
                    const cellValue = rowData[columnInfo.key];

                    // 控制台输出（可根据业务需求替换为其他操作）
                    console.log(`点击列：${columnInfo.name}`);
                    console.log(`单元格值：${cellValue}`);
                    console.log(`整行数据：`, rowData);

                    // 示例：弹窗展示信息
                    alert(`列名：${columnInfo.name}\n值：${cellValue}\n整行数据：${JSON.stringify(rowData, null, 2)}`);
                }
            }
        }
    ]
});

关键参数说明 #

• event.row：返回点击行的完整数据对象，通过列配置的key字段即可取出对应列的值
• event.column：返回点击列的配置对象，包含key（数据源字段名）、name（列显示名称）等属性
• 若需要区分点击的是表头还是数据单元格，可通过event.target.tagName判断：

  clickCallback: function(event) {
      if (event.target.tagName === 'TD') {
          // 处理数据单元格点击逻辑
          console.log('点击了数据单元格');
      } else if (event.target.tagName === 'TH') {
          // 处理表头点击逻辑
          console.log('点击了表头');
      }
  }
  

内容的提问来源于stack exchange，提问作者PitRanld