Tabulator5.2创建表格时如何为每行添加可读取的隐藏数据

Tabulator 原生支持行数据携带无对应列定义的字段，这类字段不会渲染到表格UI中，但调用row.getData()时会完整返回，完全满足存储DB_ID这类隐藏标识的需求，不需要额外维护独立数组做ID映射，性能和稳定性都更好。

方案一：直接合并字段（推荐，适配2000行数据场景无额外开销） #

1. 调整行数据生成逻辑 #

取消原来展示字段、隐藏字段分开存储的逻辑，直接把隐藏字段合并进行数据对象即可：

var i = 0
counter = 2000
// 提前定义所有需要存储的隐藏字段名，后续自动建列时会跳过这些字段
const HIDDEN_FIELDS = ['DB_ID', 'extrId', 'connectionDbIndex']
while (i < counter){
    var more = {'DB_ID' : 2012, extrId: 10, connectionDbIndex: 101 }
    var row = {
        id:1+i, 
        name:"Oli Bob"+i, 
        progress:12, 
        gender:"male"+i, 
        rating:1, 
        col:"red", 
        dob:"19/02/1984", 
        car:1 , 
        site:'new' , 
        ticket:12 , 
        opened:false , 
        cssClass:class2.randomId() , 
        data : {'s' : 10}
    }
    // 将隐藏字段直接合并进行数据
    Object.assign(row, more)
    class2.insert_row(row)
    i++ 
}

2. 修改insert_row函数 #

自动生成列定义时跳过隐藏字段，不给隐藏字段创建列配置，Tabulator就不会渲染这些字段，但会完整保留数据：

insert_row(payload){
    this.tableContent.push(payload)
    // 移除原逻辑中单独存储rowMoreData的代码
    for (let key in payload ){
        var headerLabel = key
        // 隐藏字段直接跳过，不生成列
        if (HIDDEN_FIELDS.includes(headerLabel)) continue
        if (! this.alreadyColumsAdded.includes(headerLabel)){
            this.alreadyColumsAdded.push(headerLabel)
            var colConfig = {
                title:headerLabel, 
                field:headerLabel, 
                hozAlign:"left",
                responsive:2,  
                headerFilter:'input', 
                headerFilterLiveFilter:true,
                headerSort:false 
            }
            this.tableHeaders.push(colConfig)
        }
    }
}

3. 调用验证 #

表格初始化完成后，任意行调用getData()即可拿到包含隐藏字段的完整数据：

// 示例：获取第一行的完整数据
const targetRow = table.getRowFromPosition(0)
const rowData = targetRow.getData()
console.log(rowData.DB_ID) // 正常输出2012，所有隐藏字段都可直接读取

注意：不要给隐藏字段配置visible:false的列，这种方式会生成额外的DOM节点，2000行场景下会增加不必要的性能消耗，直接不创建对应列是最优实现。

方案二：兼容原有存储逻辑（最小改动） #

如果不想调整现有rowMoreData的存储结构，可以在表格配置中加dataLoaded回调，初始化时批量合并隐藏数据：

// 在tableOptions中新增如下配置
dataLoaded: function(data){
    // 注意：必须保证tableContent和rowMoreData的行顺序完全一一对应，否则会出现数据错位
    data.forEach((row, index) => {
        Object.assign(row, this.rowMoreData[index])
    })
}

这种方案不需要修改原有行生成和insert_row逻辑，但容错率更低，优先使用方案一。

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