Quelqu'un a-t-il une idée comment puis-je ajouter une classe "myClass" à une cellule (par exemple, la rangée 5, la colonne 3) dans un slickgrid?
10 Réponses :
.. .. note : les lignes et les colonnes sont indexés à zéro. ...
Pensez-vous que cela peut être fait d'une manière ou d'une autre avant que j'appelle à la grille = nouveau slick.grid ($ ("# table"), données, colonnes, options); ?
Cela ne fonctionnera pas car les lignes sont créées et supprimées de manière dynamique et le code ci-dessus n'affectera que les nœuds DOM actuellement affichés.
Pour ajouter une classe CSS spécifique à certaines 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, uniquement sur toutes les cellules d'une colonne donnée - utilisez la propriété "CSSClass" sur la définition de la colonne.
Peut-être que vous pouvez utiliser une combinaison de ces deux. Une autre solution consiste à placer une DIV intérieure dans une cellule à l'aide d'un formateur personnalisé et de définir la classe là-bas. Depuis que vous avez accès à la ligne / cellule dans le formateur, vous pouvez décider de la reproduire.
Oui, combinant les deux œuvres. J'ai utilisé ceci pour définir une couleur d'arrière-plan couverte davantage de la cellule qu'un formateur pourrait fournir.
Cela a disparu de 1.x et existe maintenant dans la succursale (Alpha) 2.x comme Rowcssclasses .
Essayez quelque chose comme ceci:
$(function(){
$('#element_id tr:eq(4)', '#element_id tr td:eq(2)').addClass('myClass');
});
La réponse de l'étain, mais elle s'appelle maintenant Rowcssclasses (et est appelée avec "indéfini" à quelques reprises en plus de toutes les lignes régulières pour une raison quelconque; j'ai fait un juste pour obtenir à travers cela.
Comme mentionné précédemment, vous pouvez utiliser une propriété CSSClass pour ajouter une classe CSS à toutes les cellules d'une colonne (hors-tête à l'exclusion). CSSClass est une propriété à cordes, mais vous pouvez modifier le code de grille SLICK pour le faire se comporter comme une fonction / une chaîne, puis vous pouvez ajouter des classes conditionnelles aux cellules individuelles. Voici un exemple (SlickGrid V2.1)
// modifier la fonction 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 : "");
Le meilleur moyen que j'ai trouvé est d'ajouter une propriété 'Asyncposteur' 'à la formule de colonne. Cela vous permet de spécifier une fonction qui sera appelée asynchrone après que la cellule soit rendue. Dans cette fonction, vous avez accès au nœud cellulaire et aux données de la ligne. Ceci fonctionne sur une cellule individuelle et non la colonne entière de cellules.
var columns = [
{
id:'customer',
name:'Customer',
asyncPostRender: myObject.styleCustCell
}
];
myObject.styleCustCell = function(cellNode, row, rowData, columnsObject) {
$(cellNode).addClass('myCustomerCssClass');
};
Il y a maintenant une meilleure façon de faire cela qui vous permet de traiter des cellules individuelles arbitraires:
https://github.com/mleibman/slickgrid/wiki/ Slick.grid # wiki-setcellcsstyles
Que la façon dont je le fais. Peu d'utiliser, j'utilise SyncGridCellcssstyles de cette Link
Oui, vous pouvez ajouter une classe à une cellule particulière à l'aide d'un numéro de rangée et de colonne exemple:
Je veux changer la couleur d'arrière-plan dans un grand nombre de cellules en fonction de la valeur de la cellule. Je veux calculer le style de la valeur lorsque la cellule est affichée, pas à l'avance. asyncpostrendrender est trop lent. Je ne veux pas changer le code slickgrid.
J'ai pu définir le style de cellule en fonction de la valeur à l'aide d'un formateur personnalisé, de Settimeout et du grid.getcellnode (ligne, cellule) fonction . Settimeout est nécessaire pour que nous puissions régler le style de cellule une fois que les cellules ont été ajoutées à la DOM. P>
Voici un exemple basé sur l'exemple Slickgrid # 1. Les cellules % complets em> sont rouges ombrées lorsque = 75% complète, 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 sous forme d'éléments div, pas d'éléments TD. L'exemple démontre é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! P>
GetCellnode l'a fait pour moi. Merci!
Supposons que vous ayez une grille avec des colonnes: ["Connexion", "Nom" "," " "," likes_icececream "," préféré_cake "] ... et vous souhaitez mettre en évidence les colonnes" Anniversaire "et" Âge "pour les personnes dont l'anniversaire est aujourd'hui, dans ce cas, des rangées à l'index 0 et 9. (la première et la dixième rangée de la grille). })
J'ai trouvé un moyen efficace de le faire, s'il vous plaît voir ma réponse ci-dessous: Stackoverflow.com/a/36562844/218294