除编辑后的编辑单元格外,Handsontable会刷新整个列

时间:2016-02-22 09:09:50

标签: jquery cell handsontable

我有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'
            });
        });
    }
});

工作正常。

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

我该如何避免它。

请参考图片了解详细信息:

STEP 1

STEP 2

STEP 3

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

1 个答案:

答案 0 :(得分:0)

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

这是我的解决方案:

如果:

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
        });