股票价格阶梯表格更新后需清除单元格数据及自动滚动

问题说明 #

当前基于Tabulator实现的股票价格阶梯表格运行基本正常，但存在以下问题：

• WebSocket接收L1Update数据更新Last列新价格时，旧数据未清除，导致Price列多个价格持续显示绿色背景
• 需要实现仅当前价格对应的Price列单元格显示绿色，其余单元格恢复白色
• 新价格更新时需自动清除Last列所有旧数据
• 数据更新后自动滚动到Price列的当前价格位置

修改后的完整代码 #

var domtableOne = new Tabulator("#domtableOne", {
    maxHeight:"100%",
    height:"150pt",
    data:prices,
    index:"price",
    movableColumns: true,
    columns:[
        {
            title:"Last", 
            field:"DLnowprice", 
            editor:"input", 
            hozAlign:"center", 
            width:"15pt",
            mutator: function(value, data) {
                return data.DLnowprice || ""; // 空值显示空字符串
            }
        },
        {title:"Buyers", field:"bid", editor:"input", hozAlign:"center", width:"15%"},
        {
            title:"Price", 
            field:"price", 
            editor:"input", 
            hozAlign:"center", 
            width:"15%",
            formatter:function(cell, formatterParams, onRendered){
                var value = cell.getValue();
                var rowData = cell.getRow().getData();
                // 仅当前价格行高亮
                cell.getElement().style.backgroundColor = rowData.DLnowprice === value ? "lightgreen" : "white";
                return value;
            }
        },
        {title:"Sellers", field:"ask", editor:"input", hozAlign:"center", width:"15%"},
        {title:"P/L$", field:"ppld", editor:"input", hozAlign:"center", width:"15%"},
        {title:"P/L%", field:"plper", editor:"input", hozAlign:"center", width:"15%"},
    ]
});

// WebSocket数据处理逻辑
if (json.cmd == "L1Update") {
    var Lprice = json.result.price.toFixed(2);
    var Lbid = json.result.bid;
    var Lask = json.result.ask;

    // 清除所有行的Last列旧数据
    domtableOne.getData().forEach(row => {
        row.DLnowprice = "";
    });
    domtableOne.refreshData(); // 刷新表格，清除旧高亮

    // 更新当前价格行的数据
    domtableOne.updateData([{ 
        price:Lprice, 
        DLnowprice:Lprice, 
        bid:Lbid, 
        ask:Lask 
    }]);

    // 自动滚动到当前价格所在行（居中显示，平滑滚动）
    var targetRow = domtableOne.getRow(Lprice);
    if (targetRow) {
        targetRow.scrollTo({block: "center", behavior: "smooth"});
    }
}

核心修复点 #

• 清除旧数据与高亮：更新新数据前遍历所有行，清空DLnowprice字段并刷新表格，彻底清除旧的高亮状态
• 精准高亮控制：Price列的格式化函数直接对比当前行的价格与Last列值，确保只有当前价格行显示绿色背景
• 自动滚动定位：通过表格的getRow方法获取目标行，调用scrollTo实现自动滚动到可视区域居中位置
• 优化Last列显示：修改mutator函数，空值时显示空字符串，避免残留旧数据

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