Handsontable：删除行后更新渲染器

Question

我正在尝试将 Handsontable 实施到我们的报告系统中。除了一件事，我做了我想做的一切。我正在使用渲染器突出显示错误单元格（只需在背景上设置红色）。但是，当我通过上下文菜单-> 删除行删除行时，所有渲染器都保留在它们的 x-y 位置上。我希望他们按照自己的行行事。

$container.handsontable({
        data: data,
        rowHeaders: true,
        colHeaders: true,
        minSpareRows: 1,
        contextMenu: true,
        stretchH: 'all',
        comments: true,
        cells: function(row, col, prop) {
            var cellProperties = {};
            {foreach $excelError as $error}
                    if (row === {$error['row']} && col === {$error['col']}) {
                        cellProperties.renderer = {$error['renderer']};
                        cellProperties.comment = {$error['desc']};
                    }
            {/foreach}

            if (row === 0) {
                cellProperties.renderer = firstRowRenderer;
            }
            return cellProperties;
        }
    });

尽管变量名 $error 它也包含正确的行数据，这些数据只是用白色来处理单元格。 errorRenderer函数长这样（白色的和这个差不多）

var errorRenderer = function(instance, td, row, col, prop, value, cellProperties) {
       Handsontable.renderers.TextRenderer.apply(this, arguments);
       $(td).css({
                background: 'red',
                color: "white",
                fontWeight: "bold"
       });
 };

知道如何解决这个问题吗？即使只捕获那个删除行事件我也会很好，因为我可以调用 ajax 并再次重新渲染单元格。

感谢您的任何想法。

编辑：

固定解：

    var cellsProp = new Array();
    {foreach $excelError as $error}
    cellsProp[{$error['row']}] = new Array();
    cellsProp[{$error['row']}][{$error['col']}] = {$error['renderer']|noescape};
    {/foreach}

    var removing = false;

    $container.handsontable({
        data: data,
        rowHeaders: true,
        colHeaders: true,
        minSpareRows: 1,
        contextMenu: true,
        stretchH: 'all',
        comments: true,
        cells: function(row, col, prop) {
            var cellProperties = {};

            if (typeof cellsProp[row] != "undefined") {
                cellProperties.renderer = cellsProp[row][col];
            }

            if (row === 0) {
                cellProperties.renderer = firstRowRenderer;
            }
            return cellProperties;
        }, 
        beforeRemoveRow: function(index, amount) {
            if (removing == false) {
                for (x = index; x < cellsProp.length; x++) {
                    cellsProp[x] = cellsProp[x+1];
                }
            }
            removing = true;
        },
        afterRemoveRow: function(index, amount) {
            removing = false;
        }
    });

Answer 1

错误在 PHP。当一行被删除时，你的 PHP 仍然认为特定的行索引有误。如果您可以提供一个函数来从 PHP 中删除一行，我们可以创建一个函数 beforeRemoveRow，该函数在删除一行后触发。

在这里我们可以调用您的 PHP 函数并为其提供要删除的行索引。您的程序现在应该可以运行了。

该函数看起来像这样，并且会添加到您的热定义的选项列表中：

beforeRemoveRow: function(index, amount) {
    phpFunctionRemoveRow(index);
}

编辑：

使用这种硬编码坐标的逻辑，删除一行总是会使 (x,y) 变为红色。这就是在你的 php 中有一个 "error" 的意思。这意味着，由于您从 PHP 收到有错误的坐标，因此您不能指望硬编码索引值会发生变化。

还是有点不明白。如果您在渲染后没有与 PHP 交互（您在渲染后不调用它），并且您说 PHP 是正确的，那么这是否意味着您永远不会修改您的 table?如果有人进行更改并且您必须重新验证您的 table 怎么办？

但是，如果你有能力做到这一点，那么我会做的是：

更改 table 后，调用您的 php 函数重新生效。这将更改 php 中的错误数组，但由于 cells 选项是静态的，因此您不会看到更改。那时，您将使用：

hotInstance.updateSettings({ cells: getCellsAgain() });

在那个函数中，getCellsAgain()，你会再次调用你的 php 代码来告诉你新的索引。如果不在 JS 端进行验证，那是最好的结果。

Handsontable：删除行后更新渲染器

Handsontable: Updating renderers after removing row

javascript

jquery

handsontable