如何更改 Handsontable 中已更改单元格的颜色?

Posted

技术标签:

【中文标题】如何更改 Handsontable 中已更改单元格的颜色?【英文标题】:How can I change the color of a changed cell in Handsontable? 【发布时间】:2013-10-30 06:40:44 【问题描述】:

我正在使用 Handsontable 插件,当用户更改单元格中的值时,它应该变为黄色,以便他们可以跟踪已更改的内容。在这种情况下,黄色是类 .changeInput。棘手的部分是当你双击单元格来改变它时,它变成了一个 textarea 而不再是一个 td。有任何想法吗?提前致谢。

http://jsfiddle.net/PAH5J/

jQuery

$("textarea.handsontableInput").change(function () 
    //$(this).find(td).addClass('changeInput');
    $('.htNumeric .current').addClass('changeInput');
);

【问题讨论】:

你需要使用事件委托,也许是“keyup”而不是更改http://jsfiddle.net/PAH5J/4/ @AbrahamUribe 我需要更改后的 td 保持黄色此外,这似乎只会影响 textarea。 仅适用于最后编辑的单元格http://jsfiddle.net/PAH5J/6/ @AbrahamUribe,我希望所有编辑的单元格都保持黄色,这可能吗? 喜欢这个http://jsfiddle.net/PAH5J/8/? 【参考方案1】:

要标记每个有更改的单元格,您可以创建自定义渲染器并仅在 data("change") 像这样存在时应用

//Custom renderer add class if the element have the data "change"
var myRenderer = function (instance, td, row, col, prop, value, cellProperties) 
  Handsontable.TextCell.renderer.apply(this, arguments);
  if($(td).data("change"))
      $(td).addClass('changeInput');
  
;     
$('#example').handsontable(
data: data,
minSpareRows: 1,
colHeaders: true,
contextMenu: true,
  cells: function (row, col, prop) //set the new renderer for every cell
    return type: renderer: myRenderer;
  
);
//afterChange get every cell and add class and data
$('#example').handsontable('getInstance').addHook('afterChange', function(changes) 
  var ele=this;
  $.each(changes, function (index, element) 
            $(ele.getCell(element[0],element[1])).addClass('changeInput').data("change",true);
);

$("#example").on("keyup","textarea.handsontableInput",function ()
$(this).addClass('changeInput');
).on("blur","textarea.handsontableInput",function ()
$(this).removeClass('changeInput');
);       

http://jsfiddle.net/PAH5J/8/编辑 要移动突出显示的区域,您可以像这样使用 cellProperties 而不是 .data()

var myRenderer = function (instance, td, row, col, prop, value, cellProperties) 
     Handsontable.TextCell.renderer.apply(this, arguments);
     if (cellProperties.change) //check for new property change in the cell
         $(td).addClass('changeInput'); //add the changeInput class to the actual td
     
;    
$('#example1').handsontable('getInstance').addHook('afterChange', function(changes) 
    var ele=this;
    $.each(changes, function (index, element) 
         //add the changeInput class to the actual td
         $(ele.getCell(element[0],ele.propToCol(element[1]))).addClass('changeInput')
         //get the cell properties and create a new one "change"     
         //to check in the renderer
         ele.getCellMeta(element[0],ele.propToCol(element[1])).change=true;
    );    
);

【讨论】:

我犯了一个错误,没有给出我正在使用的完整示例。而不仅仅是数据:数据,我正在从函数中获取数据...函数 getCarData() jsfiddle.net/D4Kx3 并且无法使其正常工作 http://jsfiddle.net/D4Kx3/1/ 但你不应该有两列同名“价格” 工作得很好,谢谢。最后一件事,我的复选框不再被正确读取。它们看起来是假的。 jsfiddle.net/D4Kx3/2 在最终解决方案中,当我们滚动表格时,突出显示的区域不会移动(当在非固定行中进行更改时)。我所做的是通过将更改的单元格添加到 afterChange 函数和渲染器中来跟踪更改的单元格,只需检查该行和 col 的单元格是否存在于跟踪的单元格中。不过感谢您的解决方案。 要修复滚动错误,您可以使用渲染器中的 cellProperties http://jsfiddle.net/D4Kx3/31/

以上是关于如何更改 Handsontable 中已更改单元格的颜色?的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 Angular 6 + Handsontable 根据另一个单元格值仅更改一个单元格值?

R Shiny Handsontable 更改单个单元格后自动更新功能

Handsontable onchange 事件需要更改同一单元格本身的值,而相邻的工作不工作

使用或不使用 setDataAtCell/getDataAtCell handsontable 更改单元格值 afterChange

HandsOnTable (Vue Wrapper) - 将行与数据库 ID 关联?

从外部提交 Handsontable 中的更改