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

Question

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

Answer 1

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

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

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

Answer 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... 

примечание: индекс строки и столбцы с нуля ...

Answer 3

попробовать что-то вроде этого:

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

Answer 4

ответ Тин, но это теперь называется rowCssClasses (и называется с «неопределенными» несколько раз в дополнение ко всем правильными рядами по какой-то причине, я сделал

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

просто пройти через это.

Answer 5

Как уже упоминалось ранее, вы можете использовать свойство CssClass добавить класс CSS для всех ячеек столбца (без заголовка). CssClass является свойство string, но вы можете немного изменить код 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 так же, как форматировщику.

Answer 6

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

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

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

Answer 7

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

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

Answer 8

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

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

пример:

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

Answer 9

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

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

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

Адрес the same example in a 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>

Answer 10

Из ссылки разместил Olleicua:

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

[ "Вход", "имя", "день рождения" , "age", "likes_icecream", "favorite_cake"]

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

.highlight{ background: yellow } 

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

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

})