根據單元格值有條件地突出顯示handsontable中的行

Question

我有幾行數據。其中一列是錯誤標誌。如果錯誤標誌爲真，我想更改整行的背景顏色。我會怎麼做？

Answer 1

您可以對數據和相應的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/

Answer 2

如果您正在使用handsontable實際上尋找的東西，我有使用自定義渲染器完成此操作。這是'hackish'，但它運行良好，速度很快。

你的第一步是從handsontable css文件

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

禁用td和th的風格與此

.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 3

androidmj，我不能從未沒有你做到了！

儘管如此，您的代碼不會將更改傳遞給已修復的單元。隨着一些變化，我能夠得到它的工作。

我有一個表，其中第5列（記住，HandsOnTable開始計數0列）包含運輸方法。如果運輸方式是UPS，我想突出顯示整條生產線。

創建渲染

只有5種在HandsOnTable渲染，我跳過了密碼渲染，因爲我不使用它。請參閱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運輸的行中的每一列都突出顯示棕色。