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

Question

有没有办法改变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类,我认为当你拥有数千个时,性能和时间都不好行.只是想知道有没有更好的方法来做到这一点而不触及其他行.?? 任何帮助将受到高度赞赏.

Answer 1

假设您正在使用Slick.Data.DataView,您可以修改getItemMetadata方法以动态地将类添加到包含的行元素.然后,您可以简单地设置网格,以根据行内的某些值更改行的样式.假设您的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.