我有一个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,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],autoWrapRow: true,autoWrapCol: true,beforeRemoveRow: removerow_validation
});
我有一个复选框.当我点击复选框时,应将“到期”(第4列)的值填充到“已接收”(列).如果我取消选中它,那么Received应为空白,这与表onload相同.
我的工作如下:
$("#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列.但是如果我从第5列编辑任何单元格,那么除了编辑单元格之外的整个列都会刷新,第5列变为空白.
我怎么能避免它.
请参考图片了解详细信息:
如何在编辑后避免刷新单元格?
解决方法
出现问题是因为我需要在将行值更改为另一行后更新数据数组.当我更改内容时,它仅在屏幕上更改.当我编辑单元格时,它将调用渲染函数,它将采用旧的数据数组,这就是为什么它显示没有值的列.
这是我的解决方案:
如果:
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
});