如何更改Handsontable中已更改单元格的颜色？ [英] How can I change the color of a changed cell in Handsontable?

问题描述

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

I am using the Handsontable plugin and when the user changes the values in the cell, it should turn yellow so they can keep track of what has been changed. In this case, yellow is class .changeInput. The tricky part is when you double click the cell to change it, this becomes a textarea and no longer a td. Any ideas? Thanks in advance.

http://jsfiddle.net/PAH5J /

jQuery

jQuery

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

推荐答案

标记每个有变化的单元格，自定义渲染器，并只适用于像这样存在数据（更改）

to mark every cell that have change you can create a custom renderer and apply only if data("change") exists like this

//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（），像这样

http://jsfiddle.net/PAH5J/8/
EDIT
to move the highlighted area you can use the cellProperties instead of .data() like this

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

这篇关于如何更改Handsontable中已更改单元格的颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！