使用渲染器时 HandsOnTable 单元格值发生变化

Posted 2023-03-22

【中文标题】使用渲染器时 HandsOnTable 单元格值发生变化

【英文标题】：HandsOnTable cell value changes when renderer is used

【发布时间】：2017-07-29 06:50:08

【问题描述】：

当我使用函数更改 HandsOnTable 单元格的背景时，单元格中呈现的值更改为小数点后 1 位。我以为这是因为我无意中删除了格式字符串，但这似乎是不正确的。

这是渲染器、单元格函数和列定义：

function negativeValueRenderer(instance, td, row, col, prop, value, cellProperties) 
    Handsontable.renderers.TextRenderer.apply(this, arguments);

    if (value !== instance.getData()[row][2])
        td.style.background = 'yellow';

Handsontable.renderers.registerRenderer('negativeValueRenderer', negativeValueRenderer);

function cells(row, col, prop) 
    if (col === 1)
        return  format: '0.00', renderer: negativeValueRenderer 
    else
        return  format: '0.00', 


var colDefs = [
    
        dateFormat: 'DD/MM/YYYY HH:mm',
        correctFormat: true,
        width: 150,
        editor: false,
        disableVisualSelection: true,
        readOnly: true,
    , 
        type: 'numeric',
        format: '0.00',
        width: 75
    , 
        type: 'numeric',
        format: '0.00',
        width: 75,
        editor: false,
        readOnly: true,
    
];

如何确保具有例如 1254.23 的单元格保留两位小数 - 在我的表格中，第三列以 2 位小数呈现，但第二列只有 1 位。

【参考方案1】：

我遇到了类似的问题。 在同一页面上，我有两个handsontables，我需要为两者上的活动行着色。所以我按照链接https://docs.handsontable.com/0.31.1/demo-conditional-formatting.html中的示例进行操作

有哪一行：

Handsontable.renderers.TextRenderer.apply(this, arguments);

那一行给我带来了很多问题，这些行包含复选框、数字、下拉列表等。我可能弄错了，但据我所知，他们将任何内容都转换为文本。我通过问题https://github.com/handsontable/handsontable/issues/732

解决了我的问题

正如您所见，所有单元格都有自己的类型，并且必须根据类型应用不同类型的渲染器。

        case 'text':
            Handsontable.TextCell.renderer.apply(this, arguments);
            break;
        case 'autocomplete':
            Handsontable.AutocompleteCell.renderer.apply(this, arguments);
            break;
        case 'checkbox':
            Handsontable.CheckboxCell.renderer.apply(this, arguments);
            break;
        case 'numeric':
            Handsontable.NumericCell.renderer.apply(this, arguments);
            break;
        case 'date':
            Handsontable.DateCell.renderer.apply(this, arguments);
            break;
        case 'handsontable':
            Handsontable.HandsontableCell.renderer.apply(this, arguments);
            break;
        default:
            Handsontable.TextCell.renderer.apply(this, arguments);
            break;

从您的 colDefs 中，您将获得列单元格的类型。

希望对你有帮助。

祝你好运