更改slickgrid中特定行的背景颜色？ [英] Changing background color of a specific row in slickgrid?

问题描述

有什么办法可以改变slickgrid表中特定行的背景颜色，同时保留其他，因为它是？我使用

is there any way to change the background color of a specific row in slickgrid table while leaving other as it is ??? i'm using

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类。每当我想更改特定行的背景颜色时，我必须更改为整个网格的颜色（通过循环网格长度）或者如果我为一个特定的行设置类例如

where "editable-col" , "buy-row" & "buy-col" are the CSS classes containing the color setting properties for background/foreground etc. whenever i want to change the background color of a specific row , i have to change to color of whole grid(by looping through grid length) , or if i set class for a specific row e.g.

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类，这是我认为在性能和时间，当你有成千上万的行不好。只是想知道是有什么更好的方法来做到这一点，而不触及其他行。 ??任何帮助将高度赞赏。

it sets the css class for the desired row but clear all css properties for other rows , to avoid this i need to reset the css classes for the other rows too which is i think not good in terms of performance and time when you have thousands of rows. just want to know is there any better way to do this without touching the other rows. ?? any help will be highly appreciated.

推荐答案

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

Assuming you're using Slick.Data.DataView, you can modify the getItemMetadata method to dynamically add classes to the containing row element. You can then simply setup your grid to change the row's style based on some value inside the row. Assuming your Slick.Data.DataView instance is called 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]> 。

This will allow you to dynamically add the "buy-row" class to the row. You can change the function to have multiple conditions for different classes, just remember that the CSS classes for every row will be conditional based on the row object properties. The ret.cssClasses is the key here. It is the string that'll get output in the row HTML: <div class="[ret.cssClasses]">.

现在，您可以执行这样的操作来更改行的类：

You can now do something like this to change a row's classes:

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.

这篇关于更改slickgrid中特定行的背景颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！