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

Posted 2023-03-22

【中文标题】Handsontable 相对于下一列的下一个单元格更改单元格颜色

【英文标题】：Handsontable change cell color with respect to the next cell of next column

【发布时间】：2016-03-22 03:16:33

【问题描述】：

我有一个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 列 -> 11,0,35

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

所以在结果单元格 B 中，值为 10,30 -> RED 和 20 -> Green

检查小提琴：FIDDLE

【问题讨论】：

你可以为handson表编写cellRenderer函数。你可以在那里进行条件格式化。

【参考方案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');
         
         );
    );

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

或：

  $("#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/L77wjmk9/

【讨论】：

正确。非常感谢哥们！！

很好的解决方案，但要小心，因为以这种方式修改 DOM 违背了 Handsontable 的做事方式。例如，如果您冻结了这些列，它们将不再位于 .htCore 中，并且不会应用颜色。另一种方法是将 customRenderer 应用于您检查值​​并将 css 规则直接应用于呈现的 TD 的列。

好的，伙计。 @ZekeDroid 您可以使用customRenderer 创建一个小提琴并发布作为答案吗？这对我很有帮助。

@ZekeDroid 第二种方式怎么样？ ^

是的，对不起，我意识到评论应该跟在小提琴后面。我现在就处理这个：D

【参考方案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 方法都可以访问这个 DOM 元素，而不是手动操作的！

【讨论】：

添加新值时颜色似乎没有更新

打开控制台看看有没有bug？我看到它工作得很好。也许浏览器类型？你是在尝试我的小提琴还是你的代码？

jsfiddle 坏了，有一些剩余的会话数据，新的 jsfiddle 有问题，尤其是会话保存