Как добавить класс в ячейку в SlickGrid

Есть ли у кого-нибудь идея, как я могу добавить класс "myClass" в какую-либо ячейку (например, строку 5, столбец 3) в SlickGrid?

Ответ 1

Чтобы добавить определенный класс CSS в некоторые строки, используйте параметр "rowClasses", добавленный недавно в http://github.com/mleibman/SlickGrid/commit/26d525a136e74e0fd36f6d45f0d53d1ce2df40ed

Вы не можете добавить класс CSS в определенную ячейку, только для всех ячеек в данном столбце - используйте свойство "cssClass" в определении столбца.

Возможно, вы можете использовать комбинацию из двух. Другой способ - поместить внутренний DIV внутри ячейки с помощью пользовательского форматирования и установить там класс. Поскольку у вас есть доступ к строке/ячейке внутри форматирования, вы можете решить, как его отобразить.

Ответ 2

$('.slick-cell').addClass('myClass'); // adds "myClass" to all cells...

$('.slick-row[row=1] .slick-cell[cell=1]').addClass('myClass'); // adds "myClass" to 2nd column of the 2nd row...

note: строки и столбцы - это индекс с нулевым индексом...

Ответ 3

Теперь есть лучший способ сделать это, что позволяет вам обращаться к произвольным отдельным ячейкам:

https://github.com/mleibman/SlickGrid/wiki/Slick.Grid#wiki-setCellCssStyles

Ответ 4

Оловянный ответ, но теперь он называется rowCssClasses (и по какой-то причине вызывается с "undefined" несколько раз в дополнение ко всем регулярным строкам, я сделал

if(row == undefined){ return '' }

чтобы пройти через это.

Ответ 5

Я хочу изменить цвет фона в большом количестве ячеек в зависимости от значения в ячейке. Я хочу рассчитать стиль из значения, когда ячейка отображается, а не заранее. asyncPostRender работает слишком медленно. Я не хочу менять код SlickGrid.

Мне удалось установить стиль ячейки на основе значения с использованием настраиваемого форматирования, setTimeout и функции grid.getCellNode(строка, ячейка), setTimeout необходимо, чтобы мы могли установить стиль ячейки после того, как ячейки были добавлены в DOM.

Вот пример, основанный на примере # 1 SlickGrid. Ячейки% Complete окрашены в красный цвет, когда <= 25% завершены, а зеленый, когдa >= 75% завершены, в противном случае - желтый. В этом примере используются пользовательские стили CSS, но также возможно добавить класс CSS в каждую ячейку. SlickGrid реализует свои ячейки как элементы div, а не элементы td. Пример также демонстрирует передачу "сетки" в форматировщик, используя закрытие и явную инициализацию. Это необходимо, если на одной странице есть несколько сеток. Извините, пример не очень короткий!

Вот тот же пример в JSFiddle.

var grid;

var post_format_timeout;
var post_format_cells = [];

function highlight_completion(grid, row, cell, value, cellNode) {
  var $c = $(cellNode);
  if (value <= 25)
      col = '#ff8080';
  else if (value >= 75)
      col = '#80ff80';
  else
      col = '#ffff80';
  $c.css('background-color', col);
}

function post_format() {
  var n = post_format_cells.length;
  for (var i=0; i<n; ++i) {
    var info = post_format_cells[i];
    var grid = info[0];
    var row = info[1];
    var cell = info[2];
    var value = info[3];
    var highlight_fn = info[4];
    var cellNode = grid.getCellNode(row, cell);
    highlight_fn(grid, row, cell, value, cellNode);
  }
  post_format_timeout = null;
  post_format_cells = [];
}

function post_format_push(info) {
  if (!post_format_timeout) {
    post_format_timeout = setTimeout(post_format, 0);
    post_format_cells = [];
  }
  post_format_cells.push(info);
}

function format_completion(grid, row, cell, value, colDef, dataContext) {
  post_format_push([grid, row, cell, value, highlight_completion]);
  return grid.getOptions().defaultFormatter(row, cell, value, colDef, dataContext);
}

$(function () {
  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)
    };
  }

  var my_format_completion = function(row, cell, value, colDef, dataContext) {
    return format_completion(grid, row, cell, value, colDef, dataContext);
  }

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

  var options = {
    enableCellNavigation: true,
    enableColumnReorder: false,
    explicitInitialization: true
  };

  grid = new Slick.Grid("#myGrid", data, columns, options);
  grid.init();
});

<link rel="stylesheet" href="https://cdn.rawgit.com/6pac/SlickGrid/2.2.6/slick.grid.css" type="text/css"/>
<link rel="stylesheet" href="https://cdn.rawgit.com/6pac/SlickGrid/2.2.6/css/smoothness/jquery-ui-1.11.3.custom.css" type="text/css"/>
<link rel="stylesheet" href="https://cdn.rawgit.com/6pac/SlickGrid/2.2.6/examples/examples.css" type="text/css"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/6pac/SlickGrid/2.2.6/lib/jquery.event.drag-2.2.js"></script>
<script src="https://cdn.rawgit.com/6pac/SlickGrid/2.2.6/slick.core.js"></script>
<script src="https://cdn.rawgit.com/6pac/SlickGrid/2.2.6/slick.grid.js"></script>

<div id="myGrid" style="width:500px; height:180px;"></div>

Ответ 6

Попробуйте что-то вроде этого:

$(function(){
 $('#element_id tr:eq(4)', '#element_id tr td:eq(2)').addClass('myClass');
});

Ответ 7

Как уже упоминалось ранее, вы можете использовать свойство cssClass, чтобы добавить класс CSS ко всем ячейкам столбца (исключая заголовок). cssClass - это свойство строки, но вы можете немного изменить код slick grid, чтобы заставить его вести себя как функция/строка, а затем вы можете добавлять условные классы к отдельным ячейкам. Вот пример (SlickGrid v2.1)

//Измените функцию appendCellHtml и замените

var cellCss = "slick-cell l" + cell + " r" + Math.min(columns.length - 1, cell + colspan - 1) +
      (m.cssClass ? " " + m.cssClass : "");

 var cssClass = $.isFunction(m.cssClass) ? m.cssClass(row, cell, null /* or value */, m, d) : m.cssClass;
  var cellCss = "slick-cell l" + cell + " r" + Math.min(columns.length - 1, cell + colspan - 1) +
      (cssClass ? " " + cssClass : "");

а затем используйте cssClass точно так же, как форматтер.

Ответ 8

Лучший способ, который я нашел, - добавить свойство asyncPostRender в форматировщик столбцов. Это позволяет вам указать функцию, которая будет вызываться асинхронно после отображения ячейки. В этой функции у вас есть доступ к ячейке node и данным строки. Это работает на отдельной ячейке, а не на всем столбце ячеек.

var columns = [
   { 
       id:'customer', 
       name:'Customer', 
       asyncPostRender: myObject.styleCustCell 
   }
];

myObject.styleCustCell = function(cellNode, row, rowData, columnsObject) {
    $(cellNode).addClass('myCustomerCssClass');
};

Ответ 9

Да, вы можете добавить класс в определенную ячейку, используя номер строки и столбца

$(getCellNode(RowNumber, ColumnNumber)).addClass("ClassName");

пример:

$(getCellNode(5, 3)).addClass("invalid");

Ответ 10

Из ссылки, размещенной Olleicua:

Предположим, что у вас есть сетка с столбцами:

[ "login", "name", "birthday", "age", "likes_icecream", "favorite_cake" ]

... и вы хотите выделить столбцы "день рождения" и "возраст" для людей, чей день рождения сегодня, в этом случае, строки с индексом 0 и 9. (Первая и десятая строки в сетке).

.highlight{ background: yellow } 

 grid.setCellCssStyles("birthday_highlight", {
 0: {
    birthday: "highlight", 
    age: "highlight" 
   },

  9: {
     birthday: "highlight",
     age: "highlight"
   }

})