Question

我有handsontable如下：

$(document).ready(function () {
$("#example1grid").handsontable({
    colHeaders: [],        
  });

  var data = [
    ["2008", 10, 11, 12, 13],
    ["2009", 20, 0, 14, 13],
    ["2010", 30,35, 12, 13]
  ];

  $("#example1grid").handsontable("loadData", data);   

});

我需要的是：

我的专栏B的值为： 10,20,30 和C列 - ＆gt;的 11,0,35

如果单元格C中的值>单元格B中的值，然后单元格B的背景颜色应为红色否则单元格B的背景颜色应为绿色。

所以在结果单元格B中值为10,30 - > RED和20 - ＆gt;绿色

检查小提琴：FIDDLE

Answer 1

尝试：

$(document).ready(function () {

    $("#example1grid").handsontable({
        colHeaders: ["", "Kia", "Nissan", "Toyota", "Honda"],        
      });

      var data = [
        ["2008", 10, 11, 12, 13],
        ["2009", 20, 11, 14, 13],
        ["2010", 30, 15, 12, 13]
      ];

      $("#example1grid").handsontable("loadData", data);   
        //$('td').css('background-color', 'red');
    });
    Handsontable.hooks.add('afterRender', function(){
      var f = $('.htCore').find('tbody tr td:nth-child(2)');
      var s = $('.htCore').find('tbody tr td:nth-child(3)');
         f.each(function(i,v){
         if (s.eq(i).text() > $(v).text()) {
           $(v).css({'background':'red'});
         } else {
           $(v).css({'background':'green'});
         }
         });
    });

getattr

或：

  $("#example1grid").handsontable("loadData", data);   
    //$('td').css('background-color', 'red');
});
Handsontable.hooks.add('afterRender', function() {
var d = this;
var col1 = d.getDataAtCol(1);
var col2 = d.getDataAtCol(2);
$.each(col1,function(i,v){

 if (col2[i] > v ) {
  $(d.getCell(i,1)).css({'background':'red'});
 } else {
 $(d.getCell(i,1)).css({'background':'green'});
 }
});

http://jsfiddle.net/2ra8gwa7/1/

Answer 2

根据我对非DOM操作解决方案的评论，这里有一个使用本机Handsontable方法：

http://jsfiddle.net/zekedroid/2ra8gwa7/2/

重要的是渲染器。尝试应用不同的渲染行为时，不应在渲染后操纵DOM，而应使用这些自定义渲染器：

function colorRenderer(instance, td, row, col, prop, value, cellProperties) {
    Handsontable.renderers.TextRenderer.apply(this, arguments);

            // get reference to data
    var data = instance.getData();
    // grab the value of the current row at the column we want to compare to
    var valueAtC = data[row][2];
    if (valueAtC > value) {
        td.style.backgroundColor = 'red';
    } else {
        td.style.backgroundColor = 'green';
    }

    return td;
};

正如您所看到的，我们所要做的就是将此渲染器仅应用于B列，因此每当呈现该列上的任何单元格时，它都会检查同一行的值，但在列C上。然后我们直接将更改应用于td，这确保所有Handsontable方法都可以访问THIS DOM元素，而不是手动操作的方法！

Handsontable相对于下一列的下一个单元改变单元格颜色

2 个答案: