Question

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

Answer 1

如果你实际上是在寻找使用handontable的东西，我已经使用自定义渲染器完成了这项工作。它是'hackish'，但它运行良好，而且速度很快。

您的第一步是禁用handontable 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列检查＆＃34; On Credit Hold＆＃34;并突出显示红色。

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

enter image description here

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

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

3 个答案: