如何从Tabulator的groupHeader中获取分组对应值及行计数用于JS与HTML文件

以下代码基于Tabulator原生公开API实现，不需要读取内部私有属性或DOM结构，拿到的统计结果可直接传入自动交易机器人模块使用。

前提：你初始化Tabulator时已将实例赋值给变量table，分组字段为股票代码字段（示例中用stock_code指代，替换为你实际的字段名即可）。

Tabulator 5.x 版本实现 #

// 获取全部分组实例
const allGroups = table.getGroups();

// 整理为[股票代码, 告警条数]结构的统计数组
const stockAlertStats = allGroups.map(group => {
  return {
    stock_code: group.getKey(), // 分组key，即对应股票代码
    alert_count: group.getRows().length // 当前分组内的告警条目总数
  }
})

// 可直接将stockAlertStats传入你的交易机器人逻辑
console.log(stockAlertStats)

Tabulator 4.x 版本实现 #

const allGroups = table.getGroups();

const stockAlertStats = allGroups.map(group => {
  return {
    stock_code: group.key, // 4.x版本直接取key属性
    alert_count: group.rows.length // 4.x版本直接取rows数组长度
  }
})

console.log(stockAlertStats)

动态更新配置 #

如果需要在告警新增/删除、分组变化时自动获取最新统计数据，绑定groupUpdated事件即可：

// 5.x版本
table.on("groupUpdated", function(){
  const latestStats = table.getGroups().map(g => ({
    stock_code: g.getKey(), 
    alert_count: g.getRows().length
  }))
  // 自动推送最新统计数据到交易机器人模块
})

// 4.x版本
table.on("groupUpdated", function(){
  const latestStats = table.getGroups().map(g => ({
    stock_code: g.key, 
    alert_count: g.rows.length
  }))
})

注意：不要读取groupHeaders的DOM内容提取股票代码，避免样式、国际化配置改动导致提取结果出错，原生API返回的是原始数据字段值，准确率更高。

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