Come aggiungere una classe a una cella in SlickGrid

Question

Qualcuno ha un'idea di come aggiungere la classe "myClass" a una cella (ad esempio, riga 5, colonna 3) in una SlickGrid?

Answer 1

Per aggiungere una classe CSS specifica ad alcune delle le righe, utilizzare l'opzione "rowClasses" aggiunta di recente in http://github.com/mleibman/SlickGrid/commit/26d525a136e74e0fd36f6d45f0d53d1ce2df40ed

Non è possibile aggiungere una classe CSS a una cella specifica, solo a tutte le celle in una determinata colonna: utilizzare la proprietà "cssClass" nella definizione della colonna.

Forse è possibile utilizzare una combinazione di questi due. Un altro modo è mettere un DIV interno in una cella usando un formattatore personalizzato e impostare la classe lì. Dato che hai accesso a una riga/cella all'interno del formattatore, puoi decidere come renderlo.

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: indice righe e colonne sono a base zero ...

Answer 3

provare qualcosa di simile:

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

Answer 4

risposta di Tin, ma è ora chiamato rowCssClasses (e viene chiamato con "indefinito" un paio di volte in aggiunta a tutte le righe regolari per qualche ragione, ho fatto un

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

solo per ottenere attraverso questo.

Answer 5

Come accennato in precedenza è possibile utilizzare la proprietà CssClass per aggiungere una classe CSS a tutte le cellule di un (intestazione di colonna) escluso. CssClass è una proprietà stringa, ma è possibile modificare un po 'il codice della griglia slick per farlo funzionare come una funzione/stringa e quindi è possibile aggiungere classi condizionali a singole celle. Ecco un esempio (SlickGrid v2.1)

// Modificare l'appendCellHtml funzione e sostituire

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

e quindi utilizzare CssClass esattamente come un formattatore.

Answer 6

Il modo migliore che ho trovato è aggiungere una proprietà 'asyncPostRender' al formattatore di colonne. Ciò consente di specificare una funzione che verrà chiamata in modo asincrono dopo il rendering della cella. In quella funzione hai accesso al nodo della cella e ai dati della riga. Funziona su una singola cella e non sull'intera colonna di celle.

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

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

Answer 7

ora c'è un modo migliore di fare questo che permette di affrontare arbitrari singole celle:

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

Answer 8

Sì è possibile aggiungere classe a una particolare cella utilizzando riga e colonna numero

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

esempio:

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

Answer 9

Desidero modificare il colore di sfondo in un numero elevato di celle in base al valore nella cella. Voglio calcolare lo stile dal valore, quando la cella è visualizzata, non in anticipo. asyncPostRender è troppo lento. Non voglio modificare il codice SlickGrid.

Sono stato in grado di impostare lo stile della cella in base al valore utilizzando un formattatore personalizzato, setTimeout e lo grid.getCellNode(row, cell) function. setTimeout è necessario in modo che possiamo impostare lo stile della cella dopo che le celle sono state aggiunte al DOM.

Ecco un esempio basato sull'esempio 1 di SlickGrid. Le celle % complete di sono ombreggiate in rosso quando < = 25% complete e verdi quando> = 75% complete, altrimenti giallo. Questo esempio utilizza stili CSS personalizzati, ma è anche possibile aggiungere una classe CSS a ogni cella. SlickGrid implementa le sue celle come elementi div, non come elementi td. L'esempio mostra anche il passaggio di "griglia" a un formattatore, utilizzando una chiusura e l'inizializzazione esplicita. Questo è necessario se hai più griglie su una pagina. Siamo spiacenti, l'esempio non è molto breve!

Qui è 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

Dal link inviato da Olleicua:

Supponiamo di avere una griglia con colonne:

[ "login", "Nome", "compleanno" , "age", "likes_icecream", "favorite_cake"]

... e vorresti fare un highlig ht le colonne "compleanno" e "età" per le persone il cui compleanno è oggi, in questo caso, le righe agli indici 0 e 9. (La prima e la decima riga nella griglia).

.highlight{ background: yellow } 

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

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

})