根据单元格值有条件地突出显示handsontable中的行

Question

我有几行数据。其中一列是错误标志。如果错误标志为真，我想更改整行的背景颜色。我该怎么做？

Answer 1

如果您实际上是在使用 handsontable 寻找东西，我已经使用自定义渲染器完成了这项工作。这有点“骇人听闻”，但效果很好，而且速度很快。

您的第一步是从可动手做的 css 文件中禁用 td 和 th 样式

//remove this!
.handsontable th, .handsontable td{ background-color:#FFFFFF;}

用这个替换

.handsontable th{ background-color:#FFFFFF;}

假设您的原始表格有 2 列，看起来像这样：

$("#dataTable").handsontable({
minSpareRows: 1,
autoWrapRow: true,
contextMenu: true,
height:500,
columns: [ {
        { 
          type: 'text'
        },{
          //this is your error flag column
          type: 'text'
        }
    ]
});

您将创建一个自定义渲染器：

var yourErrorRenderer = function (instance,td, row, col, prop, value, cellProperties) {
 if($('#YOUR TABLE').handsontable('getDataAtCell',row, errorFlagCol) == 'error'){
    $(td).parent().css('background-color','#205199');
  }else{
    $(td).parent().css('background-color','#FFFFFF');
  }
  return td;
};

那么你的桌子会这样设置：

$("#dataTable").handsontable({
minSpareRows: 1,
autoWrapRow: true,
contextMenu: true,
height:500,
columns: [ {
        { 
          type: 'text'
        },{
          //this is your error flag column
          renderer:yourErrorRenderer
        }
    ]
});

Answer 2

androidmj，没有你我不可能做到！

但是，您的代码不会将更改传递到已修复的单元格。通过一些更改，我能够让它工作。

我有一个表，其中第 5 列（请记住，HandsOnTable 从 0 开始计数列）包含运输方式。如果运输方式是 UPS，我想将整行突出显示为棕色。

创建您的渲染器

HandsOnTable 中只有 5 种渲染器，我跳过了密码渲染器，因为我没有使用它。参考https://github.com/handsontable/handsontable/blob/master/src/cellTypes.js。

请注意，我已将每个渲染器中的第 5 列硬编码为我正在测试的单元格内容的位置。

另外，我认为重要的是要注意，使用另一个 if 语句，您可以在此处进行额外检查。例如，我可以检查第 3 列的“信用保留”并突出显示红色行。

            var highlightingAutocompleteRenderer = function (instance, td, row, col, prop, value, cellProperties) {
                Handsontable.renderers.AutocompleteRenderer.apply(this, arguments);
                if($('#hot').handsontable('getDataAtCell',row, 5) == 'UPS'){
                    td.className = 'UPS';
                }
            };

            var highlightingCheckboxRenderer = function (instance, td, row, col, prop, value, cellProperties) {
                Handsontable.renderers.CheckboxRenderer.apply(this, arguments);
                if($('#hot').handsontable('getDataAtCell',row, 5) == 'UPS'){
                    td.className = 'UPS';
                }
            };

            var highlightingNumericRenderer = function (instance, td, row, col, prop, value, cellProperties) {
                Handsontable.renderers.NumericRenderer.apply(this, arguments);
                if($('#hot').handsontable('getDataAtCell',row, 5) == 'UPS'){
                    td.className = 'UPS';
                }
            };

            var highlightingTextRenderer = function (instance, td, row, col, prop, value, cellProperties) {
                Handsontable.renderers.TextRenderer.apply(this, arguments);
                if($('#hot').handsontable('getDataAtCell',row, 5) == 'UPS'){
                    td.className = 'UPS';
                }
            };

创建您的专栏

请注意，我已经为 每个 列设置了渲染器。渲染器检查指定文本的正确列。

columns: [
    {type: 'date',
    renderer: highlightingAutocompleteRenderer},

    { type: 'text',
    renderer: highlightingTextRenderer},

    {type: 'autocomplete',
    source: ["aaaaa","bbbbb","ccccc","ddddd"],
    renderer: highlightingAutocompleteRenderer},

    { type: 'dropdown',
    source: ["Cancelled","Complete","Finished","On Credit Hold","In Production"],
    renderer: highlightingAutocompleteRenderer},

    {type: 'numeric',
    renderer: highlightingNumericRenderer},

    {type: 'dropdown',
    source: ["Common Carrier","Customer Pickup","Delivery Truck","UPS"],
    renderer: highlightingAutocompleteRenderer},
]

CSS

您可能知道如何创建 CSS，但无论如何都在这里。

.UPS {
    background-color: #644117;
    color: white;
    font-weight: demi-bold;
}

就是这样 - 现在要由 UPS 运送的行中的每一列都突出显示为棕色。

Answer 3

您可以为数据和相应的 CSS 规则使用不同的类。

例如：如果你想用不同的颜色逐个突出显示表格行，你可以使用类odd和even：

HTML

<table class="list">
    <tr class="odd">
        <td> Milk </td>
        <td> 2.2$ </td>
    </tr>
    <tr class="even">
        <td> Potato </td>
        <td class="discount"> 1.5$ </td>
    </tr>
</table>

CSS

.list tr.odd {
    background: #4e8;
}

.list tr.even {
    background: #8fe;
}

如果您需要突出显示表格中的任何单元格，只需再创建一个具有自定义名称的类，例如discount：

.list td.discount {
    color: red;
    font-weight: bold;
}

看这个例子：http://jsfiddle.net/fSSF5/1/