更改 slickgrid 中特定行的背景颜色？

Posted 2023-02-22

【中文标题】更改 slickgrid 中特定行的背景颜色？

【英文标题】：Changing background color of a specific row in slickgrid?

【发布时间】：2013-11-22 03:30:40

【问题描述】：

有什么方法可以改变 slickgrid 表格中特定行的背景颜色，同时保持其他的不变？？？我正在使用

for ( var i = 0; i < grid.length; i++) 
    rowIndex[i] = 
        price : "editable-col",
        qty : "editable-col",
        ccy : "buy-row",
        side : "buy-col",
        symbol : "buy-row",
        enable : "buy-row"
    ;

grid.setCellCssStyles("", rowIndex);

其中“editable-col”、“buy-row”和“buy-col”是包含背景/前景等颜色设置属性的 CSS 类。每当我想更改特定行的背景颜色时，我必须更改为整个网格的颜色（通过循环网格长度），或者如果我为特定行设置类，例如

rowIndex[5] = 
    price : "editable-col",
    qty : "editable-col",
    ccy : "buy-row",
    side : "buy-col",
    symbol : "buy-row",
    enable : "buy-row"
;
grid.setCellCssStyles("", rowIndex);

它为所需行设置 css 类，但清除其他行的所有 css 属性，为避免这种情况，我也需要为其他行重置 css 类，我认为这在性能和时间方面不好有数千行。只是想知道有没有更好的方法来做到这一点而不触及其他行。 ??任何帮助将不胜感激。

【参考方案1】：

假设您使用的是Slick.Data.DataView，您可以修改getItemMetadata method 以动态地将类添加到包含的行元素。然后，您可以简单地设置网格以根据行内的某些值更改行的样式。假设您的 Slick.Data.DataView 实例被称为 dataView：

dataView.getItemMetadata = metadata(dataView.getItemMetadata);

function metadata(old_metadata) 
  return function(row) 
    var item = this.getItem(row);
    var meta = old_metadata(row) || ;

    if (item) 
      // Make sure the "cssClasses" property exists
      meta.cssClasses = meta.cssClasses || '';

      if (item.canBuy)                     // If the row object has a truthy "canBuy" property
        meta.cssClasses += ' buy-row';      // add a class of "buy-row" to the row element.
       // Note the leading ^ space.

      if (item.qty < 1)                    // If the quantity (qty) for this item less than 1
        meta.cssClasses += ' out-of-stock'; // add a class of "out-of-stock" to the row element.
      

   /* Here is just a random example that will add an html class to the row element
      that is the value of your row's "rowClass" property. Be careful with this as
      you may run into issues if the "rowClass" property isn't a string or isn't a
      valid class name. */
      if (item.rowClass) 
        var myClass = ' '+item.rowClass;
        meta.cssClasses += myClass;
      
    

    return meta;
  

这将允许您将“购买行”类动态添加到行中。您可以将函数更改为对不同的类有多个条件，只要记住每一行的 CSS 类将基于行对象属性是有条件的。 ret.cssClasses 是这里的关键。它是在 HTML 行中输出的字符串：<div class="[ret.cssClasses]">。

您现在可以执行以下操作来更改行的类：

var row = dataView.getItem(5);

row.canBuy = true;
dataView.updateItem(row.id, row);
// The row element should now have a class of "buy-row" on it.

row.canBuy = false;
row.qty = 0;
dataView.updateItem(row.id, row);
// It should now have a class of "out-of-stock" and the "buy-row" class should be gone.

row.qty = 10;
row.rowClass = 'blue';
dataView.updateItem(row.id, row);
// It should now have a class of "blue" and the "out-of-stock" class should be gone.

【讨论】：

如何确保“cssClasses”属性存在？

【参考方案2】：

是的，一种方法是简单地使用 jQuery：

var rowNumber = 3;
$($('.grid-canvas').children()[rowNumber]).css('background-color','red');

更新

要持续突出显示，您需要实现 getItemMetadata 函数。可以这样做：

html

<div style="width:600px;">
    <div id="myGrid" style="width:100%;height:500px;"></div>
</div>

css

.highlight
    background-color: #ff0000 !important;

javascript

var grid;
var columns = [
    id: "title", name: "Title", field: "title",
    id: "duration", name: "Duration", field: "duration",
    id: "%", name: "% Complete", field: "percentComplete",
    id: "start", name: "Start", field: "start",
    id: "finish", name: "Finish", field: "finish",
    id: "effort-driven", name: "Effort Driven", field: "effortDriven"
];

var data = [];
for (var i = 0; i < 500; i++) 
    data[i] = 
        title: "Task " + i,
        duration: "5 days",
        percentComplete: Math.round(Math.random() * 100),
        start: "01/01/2009",
        finish: "01/05/2009",
        effortDriven: (i % 5 == 0)
    ;

data.getItemMetadata = function (row) 

    if (this[row].title == 'Task 5')
        return 
            cssClasses: 'highlight'

        ;

    
    return null;


grid = new Slick.Grid("#myGrid", data, columns,  enableColumnReorder: false );

【讨论】：

一旦行不在视野范围内，就不会保留 CSS。 SlickGrid 在滚动或分页时重复使用相同的行元素，并将覆盖与其关联的样式。

分组有问题