Как добавить класс CSS в определенные строки в slickGrid?

Question

Я искал везде, чтобы узнать, как добавить класс в определенную строку в slickgrid. Похоже, раньше было свойство rowCssClasses, но теперь оно исчезло. Любая помощь по этому вопросу будет чрезвычайно признателен.

Обновление: я понял это с помощью getItemMetadata... поэтому перед рендерингом вы должны сделать что-то вроде этого:

dataView.getItemMetadata = function (row) {
    if (this.getItem(row).compareThis > 1) {
        return {
            'cssClasses': 'row-class'
        };
    }
};

Это вставит этот 'row-class' в строку, соответствующую оператору if. Кажется, что эта функция getItemMetadata не существует, пока вы не поместите ее туда, и slickGrid не проверяет, есть ли там что-нибудь. Это усложняет определение его параметров, но если вы ищете getItemMetadata в файле slick.grid.js, вы должны найти некоторые скрытые сокровища! Я надеюсь, что это помогает кому-то!

Если есть лучший способ сделать это, пожалуйста, дайте мне знать.

Answer 1

В более новых версиях SlickGrid DataView предоставляет свой собственный getItemMetadata, чтобы обеспечить форматирование для заголовков и итогов группы. Хотя это легко связать с вашей собственной реализацией. Например,

function row_metadata(old_metadata_provider) {
  return function(row) {
    var item = this.getItem(row),
        ret = old_metadata_provider(row);

    if (item && item._dirty) {
      ret = ret || {};
      ret.cssClasses = (ret.cssClasses || '') + ' dirty';
    }

    return ret;
  };
}

dataView.getItemMetadata = row_metadata(dataView.getItemMetadata);

Answer 2

        myDataView.getItemMetadata = function(index)
        {
            var item = myDataView.getItem(index);
            if(item.isParent === true) {
                return { cssClasses: 'parentRow' };
            }
            else {
                return { cssClasses: 'childRow' };
            }
        };

// В моем CSS

       .parentRow {
           background-color:  #eeeeee;
        }
        .childRow {
           background-color:  #ffffff;
        }    

Answer 3

Вы можете использовать функцию setCellCssStyles: https://github.com/mleibman/SlickGrid/wiki/Slick.Grid#wiki-setCellCssStyles

grid.setCellCssStyles (ключ, хэш)

ключ - строковый ключ. Перезапишет любые данные, уже связанные с этим ключом.

hash - Хэш дополнительных CSS-классов ячеек, которые вводятся по номеру строки, а затем по идентификатору столбца. Несколько классов CSS могут быть указаны и разделены пробелом.

Пример:

{0: {"number_column": "cell-bold", "title_column": "cell-title-cell-подсветка" }, 4: { "cent_column": "cell-подсветка " } }

Я использовал это, чтобы выделить отредактированные поля в моей сетке. Мне не понравился метод getItemMetadata.