Кто-нибудь знает, как добавить класс «myClass» в какую-либо ячейку (например, строку 5, столбец 3) в SlickGrid?
Как добавить класс в ячейку в SlickGrid
Ответы (10)
Чтобы добавить определенный класс CSS в некоторые строки, используйте параметр rowClasses, недавно добавленный в http://github.com/mleibman/SlickGrid/commit/26d525a136e74e0fd36f6d45f0d53d1ce2df40ed
Вы не можете добавить класс CSS в определенную ячейку, только во все ячейки в данном столбце — используйте свойство «cssClass» в определении столбца.
Возможно, вы можете использовать комбинацию этих двух. Другой способ — поместить внутренний DIV в ячейку с помощью специального средства форматирования и установить там класс. Поскольку у вас есть доступ к строке/ячейке в средстве форматирования, вы можете решить, как ее отобразить.
rowCssClasses
.
- person Beau; 14.09.2011
Теперь есть лучший способ сделать это, который позволяет обращаться к произвольным отдельным ячейкам:
https://github.com/mleibman/SlickGrid/wiki/Slick.Grid#wiki-setCellCssStyles
..
$('.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...
примечание: строки и столбцы индексируются с нуля...
Ответ Tin, но теперь он называется rowCssClasses (и по какой-то причине вызывается с «undefined» несколько раз в дополнение ко всем обычным строкам; я сделал
if(row == undefined){ return '' }
просто пройти через это.
Да, вы можете добавить класс к определенной ячейке, используя номер строки и столбца
$(getCellNode(RowNumber, ColumnNumber)).addClass("ClassName");
пример:
$(getCellNode(5, 3)).addClass("invalid");
Я хочу изменить цвет фона в большом количестве ячеек в зависимости от значения в ячейке. Я хочу рассчитать стиль по значению при отображении ячейки, а не заранее. asyncPostRender работает слишком медленно. Я не хочу менять код SlickGrid.
Мне удалось установить стиль ячейки на основе значения с помощью пользовательского средства форматирования, setTimeout и Функция grid.getCellNode(строка, ячейка). setTimeout нужен для того, чтобы мы могли установить стиль ячейки после того, как ячейки были добавлены в DOM.
Вот пример, основанный на примере SlickGrid #1. Ячейки % завершения окрашиваются в красный цвет, если выполнено ‹= 25%, и в зеленый, если выполнено >= 75%, в противном случае – желтый. В этом примере используются пользовательские стили CSS, но также можно добавить класс CSS в каждую ячейку. SlickGrid реализует свои ячейки как элементы div, а не элементы td. В примере также демонстрируется передача «сетки» средству форматирования с использованием замыкания и явной инициализации. Это необходимо, если у вас есть несколько сеток на одной странице. Извините, пример не очень короткий!
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>
Попробуйте что-то вроде этого:
$(function(){
$('#element_id tr:eq(4)', '#element_id tr td:eq(2)').addClass('myClass');
});
Как упоминалось ранее, вы можете использовать свойство cssClass для добавления класса CSS ко всем ячейкам столбца (за исключением заголовка). cssClass — это строковое свойство, но вы можете немного изменить гладкий код сетки, чтобы вместо этого он вел себя как функция/строка, а затем вы можете добавить условные классы к отдельным ячейкам. Вот пример (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 точно так же, как средство форматирования.
Лучший способ, который я нашел, - это добавить свойство asyncPostRender в средство форматирования столбцов. Это позволяет указать функцию, которая будет вызываться асинхронно после рендеринга ячейки. В этой функции у вас есть доступ к узлу ячейки и данным строки. Это работает с отдельной ячейкой, а не со всем столбцом ячеек.
var columns = [
{
id:'customer',
name:'Customer',
asyncPostRender: myObject.styleCustCell
}
];
myObject.styleCustCell = function(cellNode, row, rowData, columnsObject) {
$(cellNode).addClass('myCustomerCssClass');
};
По ссылке, опубликованной Olleicua:
Предположим, у вас есть сетка со столбцами:
["логин", "имя", "день рождения", "возраст", "нравится_мороженое", "любимый_торт"]
... и вы хотите выделить столбцы "день рождения" и "возраст" для людей, чей день рождения сегодня, в данном случае строки с индексами 0 и 9 (первая и десятая строки в сетке).
.highlight{ background: yellow }
grid.setCellCssStyles("birthday_highlight", {
0: {
birthday: "highlight",
age: "highlight"
},
9: {
birthday: "highlight",
age: "highlight"
}
})