Comment ajouter une classe à une cellule dans SlickGrid

Question

Quelqu'un a-t-il une idée de comment ajouter une classe "myClass" à une cellule (par exemple, ligne 5, colonne 3) dans un SlickGrid?

Answer 1

Pour ajouter une classe CSS spécifique à certains les lignes, utilisez l'option "rowClasses" ajoutée récemment dans http://github.com/mleibman/SlickGrid/commit/26d525a136e74e0fd36f6d45f0d53d1ce2df40ed

Vous ne pouvez pas ajouter une classe CSS à une cellule spécifique, mais uniquement à toutes les cellules d'une colonne donnée. Utilisez la propriété "cssClass" dans la définition de colonne.

Peut-être que vous pouvez utiliser une combinaison de ces deux. Une autre méthode consiste à placer une DIV interne dans une cellule à l'aide d'un formateur personnalisé et à y définir la classe. Puisque vous avez accès à row/cell dans le formateur, vous pouvez décider comment le rendre.

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

Note: les lignes et les colonnes sont index de base zéro ...

Answer 3

Essayez quelque chose comme ceci:

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

Answer 4

réponse de Tin, mais il est maintenant appelé rowCssClasses (et est appelé quelques fois « non défini », en plus de toutes les lignes régulières pour une raison quelconque, je l'ai fait une

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

juste pour passer à travers cela.

Answer 5

Comme mentionné précédemment, vous pouvez utiliser la propriété CssClass ajouter une classe CSS à toutes les cellules d'une colonne (en-tête non comprise). CssClass est Une propriété de chaîne, mais vous pouvez modifier le code de grille un peu pour le faire se comporter comme une fonction/chaîne à la place, puis vous pouvez ajouter des classes conditionnelles à des cellules individuelles. Voici un exemple (SlickGrid v2.1)

// Modifier la fonction appendCellHtml et remplacer

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

avec

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

puis utiliser CssClass exactement comme un formatter.

Answer 6

La meilleure façon que j'ai trouvée est d'ajouter une propriété 'asyncPostRender' au formatter de colonne. Cela vous permet de spécifier une fonction qui sera appelée de manière asynchrone après le rendu de la cellule. Dans cette fonction, vous avez accès au noeud de la cellule et aux données de la ligne. Cela fonctionne sur une cellule individuelle, et non sur l'ensemble de la colonne de cellules.

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

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

Answer 7

Il y a maintenant une meilleure façon de le faire qui vous permet d'adresser des cellules individuelles arbitraires:

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

Answer 8

Oui, vous pouvez ajouter la classe à une cellule particulière en utilisant le numéro de ligne et de la colonne

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

exemple:

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

Answer 9

Je veux changer la couleur de fond dans un grand nombre de cellules en fonction de la valeur dans la cellule. Je veux calculer le style à partir de la valeur, lorsque la cellule est affichée, pas à l'avance. asyncPostRender est trop lent. Je ne veux pas changer le code SlickGrid.

J'ai été en mesure de définir le style de cellule en fonction de la valeur en utilisant un formateur personnalisé, setTimeout, et le grid.getCellNode(row, cell) function. setTimeout est nécessaire pour pouvoir définir le style de cellule après l'ajout des cellules au DOM.

Voici un exemple basé sur l'exemple SlickGrid # 1. Les cellules % terminées sont ombrées en rouge lorsque < = 25% sont terminées, et vertes si> = 75%, sinon jaune. Cet exemple utilise des styles CSS personnalisés, mais il est également possible d'ajouter une classe CSS à chaque cellule. SlickGrid implémente ses cellules en tant qu'éléments div, et non en éléments td. L'exemple illustre également le passage de "grille" à un formateur, en utilisant une fermeture et une initialisation explicite. Ceci est nécessaire si vous avez plusieurs grilles sur une page. Désolé, l'exemple n'est pas très court!

Voici 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

À partir du lien posté par Olleicua:

Supposons que vous avez une grille avec des colonnes:

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

... et vous souhaitez en savoir plus ht les colonnes "anniversaire" et "âge" pour les personnes dont l'anniversaire est aujourd'hui, dans ce cas, des lignes à l'index 0 et 9. (La première et la dixième ligne de la grille).

.highlight{ background: yellow } 

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

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

})