javascript 如何更改 Handsontable 中已更改单元格的颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19500164/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I change the color of a changed cell in Handsontable?
提问by triplethreat77
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.
我正在使用 Handsontable 插件，当用户更改单元格中的值时，它应该变为黄色，以便他们可以跟踪已更改的内容。在这种情况下，黄色是类 .changeInput。棘手的部分是当你双击单元格来改变它时，它变成了一个 textarea 而不再是一个 td。有任何想法吗？提前致谢。
jQuery
jQuery
$("textarea.handsontableInput").change(function (){
//$(this).find(td).addClass('changeInput');
$('.htNumeric .current').addClass('changeInput');
});
回答by Abraham Uribe
to mark every cell that have change you can create a custom renderer and apply only if data("change") exists like this
要标记具有更改的每个单元格，您可以创建自定义渲染器并仅在 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/
EDIT
to move the highlighted area you can use the cellProperties instead of .data() like this
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;
});
});
