Cómo agregar una clase a una celda en SlickGrid

Question

¿Alguien tiene una idea de cómo podría agregar la clase "myClass" a alguna celda (por ejemplo, fila 5, columna 3) en un SlickGrid?

Answer 1

Para añadir una clase CSS específica a algunos de las filas, use la opción "rowClasses" agregada recientemente en http://github.com/mleibman/SlickGrid/commit/26d525a136e74e0fd36f6d45f0d53d1ce2df40ed

No puede agregar una clase de CSS a una celda específica, solo a todas las celdas de una columna determinada: use la propiedad "cssClass" en la definición de la columna.

Quizás pueda usar una combinación de esos dos. Otra forma es poner un DIV interno dentro de una celda usando un formateador personalizado y establecer la clase allí. Como tiene acceso a la fila/celda dentro del formateador, puede decidir cómo renderizarlo.

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

nota: índice de filas y columnas están basados ​​en cero ...

Answer 3

intentar algo como esto:

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

Answer 4

la respuesta de la lata, pero ahora se denomina rowCssClasses (y se llama con un par de veces "indefinido", además de todas las filas regulares, por alguna razón, hice un

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

sólo para obtener a través de eso.

Answer 5

Como se mencionó anteriormente puede utilizar la propiedad CssClass añadir una clase CSS a todas las células de un (cabecera) con exclusión de la columna. CssClass es una propiedad de cadena pero puede modificar un poco el código de la grilla resbaladiza para hacer que se comporte como una función/cadena en su lugar y luego puede agregar clases condicionales a celdas individuales. He aquí un ejemplo (SlickGrid v2.1)

// modificar la función appendCellHtml y reemplace

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

con

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 : ""); 

y luego utilice CssClass exactamente igual que un formateador.

Answer 6

La mejor manera que he encontrado es agregar una propiedad 'asyncPostRender' al formateador de columnas. Esto le permite especificar una función que se llamará asincrónicamente después de que se represente la celda. En esa función, tiene acceso al nodo de la celda y los datos de la fila. Esto opera en una celda individual, y no en toda la columna de celdas.

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

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

Answer 7

Ahora hay una forma mejor de hacer esto que le permita abordar las células individuales arbitrarias:

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

Answer 8

Sí se puede agregar clase a una celda en particular mediante el uso de la fila y la columna número

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

ejemplo:

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

Answer 9

Quiero cambiar el color de fondo en una gran cantidad de celdas según el valor de la celda. Quiero calcular el estilo del valor, cuando se muestra la celda, no de antemano. asyncPostRender es demasiado lento. No quiero cambiar el código de SlickGrid.

Pude establecer el estilo de celda basado en el valor utilizando un formateador personalizado, setTimeout y grid.getCellNode(row, cell) function. setTimeout es necesario para que podamos configurar el estilo de celda una vez que las celdas se hayan agregado al DOM.

Aquí hay un ejemplo basado en el ejemplo # 1 de SlickGrid. Las celdas % Complete se sombrean en rojo cuando < = 25% completado y verde cuando> = 75% completo, de lo contrario, son amarillas. Este ejemplo usa estilos CSS personalizados, pero también es posible agregar una clase CSS a cada celda. SlickGrid implementa sus celdas como elementos div, no como elementos td. El ejemplo también demuestra pasar "cuadrícula" a un formateador, usando un cierre e inicialización explícita. Esto es necesario si tiene múltiples cuadrículas en una página. Lo siento, el ejemplo no es muy corto.

Aquí está 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

Desde el enlace publicado por Olleicua:

Suponga que tiene una cuadrícula con columnas:

[ "login", "nombre", "cumpleaños" , "edad", "likes_icecream", "favorite_cake"]

... y te gustaría destacar ht las columnas "cumpleaños" y "edad" para las personas cuyo cumpleaños es hoy, en este caso, filas en el índice 0 y 9. (La primera y la décima fila en la cuadrícula).

.highlight{ background: yellow } 

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

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

})