Handsontable 在编辑后刷新除编辑单元格之外的整个列

Posted 2023-03-22

【中文标题】Handsontable 在编辑后刷新除编辑单元格之外的整个列

【英文标题】：Handsontable gets refreshed the entire column except the editing cell after edit

【发布时间】：2016-06-03 15:23:54

【问题描述】：

我有一个Handsontable，如下：

ordertable = new Handsontable(container, 
    data: data,
    colHeaders: ['Customer', 'Mode', 'Remarks', 'Due', 'Recieved'],
    columns: [
        data: 2,
        readOnly: true
    , 
        data: 6,
        type: 'autocomplete',
        source: collectionmethod,
        validator: collectionmethod_validations,
        strict: true
    , 
        data: 5,
        readOnly: false
    , 
        data: 4,
        readOnly: true,
        type: 'numeric',
        format: '0.00'
    , 
        data: 3,
        type: 'numeric',
        format: '0.00',
        validator: amt_validations,
        allowInvalid: true
    ],
    minSpareRows: 0,
    rowHeaders: true,
    contextMenu: ['row_above', 'row_below', 'remove_row', 'undo', 'redo'],
    colWidths: [150, 100, rest, 100, 100],
    autoWrapRow: true,
    autoWrapCol: true,
    beforeRemoveRow: removerow_validation

);

我有一个复选框。当我单击复选框时，Due（第 4 列）的值应填充到“已接收”（列）中。如果我取消选中它，那么Received 应该是空白的，这与表加载相同。

我的做法如下：

$("#sel_prefill").click(function() 
    if ($("#sel_prefill:checked").val()) 
        var g = $('.htCore').find('tbody tr td:nth-child(5)'); //Due
        var f = $('.htCore').find('tbody tr td:nth-child(6)') // Recieved
        g.each(function(i, v) 
            f.eq(i).text(g.eq(i).text());
            $(v).css(
                'text-align': 'right'
            );
        );
     else 
        var g = $('.htCore').find('tbody tr td:nth-child(5)'); //Due
        var f = $('.htCore').find('tbody tr td:nth-child(6)') // Recieved
        g.each(function(i, v) 
            f.eq(i).text("");
            //$container.handsontable('setDataAtCell', 1, 4, 5);
            $(v).css(
                'text-align': 'right'
            );
        );
    
);

一切正常。

但问题是，在检查复选框的值后，第 4 列的值被填充到第 5 列。但是if I edit any cell from 5th column, then the entire column except editted cell gets refreshed and 5th column becomes blank.。

我怎样才能避免它。

详细步骤请参考图片：

如何避免在编辑后刷新单元格？

【问题讨论】：

我认为你的问题是这个f.eq(i).text("");

@madalin ivascu 好的伙计。那我应该改成什么？你的建议是什么？您可以详细说明并发布答案吗？会很有帮助的。

@madalin ivascu 这只是代码改进的例子。我不认为它会这样做，因为编辑后它根本没有调用该函数。它调用了一些内置函数。我需要对其进行修改，使其能够处理我的问题。

这就是与您的问题相关的所有代码吗？您描述的问题似乎与“更改”事件而不是“点击”更相关，并且您仅发布了与点击事件相关的代码。

@127.0.0.1 无论是单击还是更改，它都只是一个独立的单选按钮。只有 handsontable 的依赖在函数内部定义，您可以从问题中引用。

【参考方案1】：

出现问题是因为一旦我将行值更改为另一个，我需要更新数据数组。当我更改内容时，它只会在屏幕上更改。当我编辑单元格时，它会调用渲染函数，它会采用旧数据数组，这就是它显示没有值的列的原因。

这是我的解决方案：

如果：

g.each(function(i, v) 
            f.eq(i).text(g.eq(i).text());
            data[i][3] = g.eq(i).text(); //Need to update the array also
        );

在其他地方：

g.each(function(i, v) 
            f.eq(i).text("");
            data[i][3] = ""; //Need to update the array also
        );