Handsontable：删除行后更新渲染器

Posted 2023-03-22

【中文标题】Handsontable：删除行后更新渲染器

【英文标题】：Handsontable: Updating renderers after removing row

【发布时间】：2015-06-10 03:44:59

【问题描述】：

我正在尝试将 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;
        
    );

【问题讨论】：

两件事。一，为什么不直接使用本机验证功能并自己提供呢？这样它颜色正确。其次，删除一行后，你能帮我试试这个吗？进行另一项更改，然后按 Enter。颜色自己修复了吗？

它必须是用户友好的。这就是我使用上下文菜单的原因。而且我对 JS 的熟练程度不高，无法自己制作，这也是我使用 handsontable 的原因。我是一名后端程序员。如果您知道如何覆盖原始功能以使其正常工作，我正在听。无论如何，我尝试了你想要的，但它仍然是错误的。

哦，我不是说要去掉上下文菜单，我的意思是你可以简单地将验证器函数添加到每一列，你就完成了。看handsontable.com/demo/validation.html。在这里，您将看到如何应用自定义验证器，该验证器将根据您的描述添加红色，并在您删除行时与上下文菜单一起使用

好吧，客户将他的（巨大的）csv 文件上传到系统中。然后他按下将调用 ajax 并返回不正确单元格的 x-y 位置的评估按钮。这个想法是他/她应该修复不正确的值或删除整行。列不是独立的，A 列中的值可能（或可能不）取决于 B 列中的值。并且有数百行。我可以看到您通过 JS 和 Ajax 做所有这些事情的观点，但这是不可能的。它行不通。这就是为什么我通过 php 在后端进行整个评估过程的原因。即使在 PHP 中，一些较大的报告也可能需要数十秒的时间来评估。

很公平。如果是这种情况，那么您使用渲染器是正确的。我仍然不明白这个问题，因为这是渲染和上下文菜单的工作方式：当你渲染某些东西时，它会调用这个函数。最初看起来它正确设置了颜色。删除该行后，它应该触发“afterChange”事件，该事件将再次调用渲染器。此时，该行不再存在，因此根本不应该调用它，对吧？

【参考方案1】：

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

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

该函数如下所示，并将添加到您的热定义的选项列表中：

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

编辑：

使用这种硬编码坐标的逻辑，删除一行总是会给您带来将 (x,y) 变为红色的行为。这就是在您的 php.ini 中出现“错误”的意思。这意味着，由于您从 PHP 收到带有错误的坐标，因此您不能期望硬编码的索引值会发生变化。

有些东西仍然没有意义。如果您在渲染后没有与 PHP 交互（您在渲染后不调用它），并且您说 PHP 是正确的，那么这是否意味着您永远不会修改您的表格？如果有人进行了更改并且您必须重新验证您的表格怎么办？

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

更改表格后，调用您的 php 函数重新验证。这将更改您在 php 中的错误数组，但由于 cells 选项是静态的，您不会看到更改。此时，您将使用：

hotInstance.updateSettings( cells: getCellsAgain() );

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

【讨论】：

不，这不是 PHP 错误。 PHP 只是检查数据是否正确（例如 EAN 编号）。一旦对其进行评估，它就会给出错误单元格的 x-y 位置，仅此而已。此时，用上面的函数按颜色编写疼痛细胞。这就是我这边的全部。此时用户可以编辑单元格，也可以删除整行。此时，handsontable 获取所有行并将它们向上移动。唯一保留在其位置上的数据是 cellProperties。我做了一些屏幕。希望它会更清楚。 postimg.org/gallery/1ockqrhrs

抱歉，不是很清楚。我看到错误但无法调试它。如果不是 PHP 错误，您能否使用假数据在 jsFiddle 上重新创建错误？向我们展示一个简单的案例，其中使用上下文菜单删除一行并使用您的自定义渲染器会中断并显示此行为。

我明白了。您明白，使用这种硬编码坐标的逻辑，删除一行总是会给您带来错误，对吧？当我说你的“错误”在 php.ini 中时，这就是我试图告诉你的。我的意思是，由于您从 PHP 收到带有错误的坐标，因此您不能期望硬编码的索引值会发生变化。因此，我为您提供了一个解决方案，我将在我的回答中的编辑下发布它。

哦，谢谢，你是对的。我只是稍微修改了我的代码，所以我不需要重新验证它，我只是移动渲染器。并且必须重新验证成功才能保存文件。再次感谢你，伙计