J'ai du code ici où j'essaie de définir une couleur de fond d'une cellule basée sur la valeur de l'élément de données: http:/dojo.telerik.com/@solidus-flux/ehamu Je me rends compte que je pourrais faire cela avec un modèle, Mais cela nécessiterait un élément HTML supplémentaire, car vous ne pouvez pas modifier le marquage de la TD elle-même. J'aimerais utiliser une fonction pour renvoyer les attributs si cela est pris en charge.
5 Réponses :
Veuillez essayer avec l'extrait de code ci-dessous.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.min.js"></script>
<style>
.greenBG {
background-color:green;
}
.redBG {
background-color:red;
}
</style>
</head>
<body>
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [{
field: "name",
title: "Name",
attributes: function (e) {
return {
"class": "table-cell",
style: e.name == "Jane Doe" ? "background-color: red" : "background-color: green"
};
}
}],
dataSource: [{ name: "Jane Doe" }, { name: "John Doe" }],
dataBound: function () {
dataView = this.dataSource.view();
for (var i = 0; i < dataView.length; i++) {
if (dataView[i].name === "Jane Doe") {
var uid = dataView[i].uid;
$("#grid tbody").find("tr[data-uid=" + uid + "]").addClass("greenBG");
}
else {
var uid = dataView[i].uid;
$("#grid tbody").find("tr[data-uid=" + uid + "]").addClass("redBG");
}
}
}
});
</script>
</body>
</html>
Je le faisais travailler avec quelque chose de similaire: $ ("td"). Chacun (fonction () {if ($ ($ (ceci) .text () === "Jane DOE") {$ (this) .Addclass ( "bon");}}); mais j'espérais ne pas avoir de boucle. Juste un attribut par fonction.
Vous avez dit que vous ne voulez pas utiliser de modèles, mais je pense que vous parlez de modèles de colonne.
Vous pouvez modifier le balisage de la TD elle-même à l'aide d'un modèle de ligne: P>
{
field: "name",
title: "Name",
attributes: {
"class": "# if(data.name === 'Jane Doe') { # red # } else { # green # } #"
}
},
Si la propriété Attributes ne prend pas en charge les fonctions, cela me rend aussi proche que je vais obtenir.
Maintenant que vous le dites, vous pouvez utiliser des fonctions dans les attributs tant que cela ne vous dérange pas des délimiteurs de modèle (et de l'écrire comme une chaîne)
dans le rappel kendo angulaire e ne fonctionne pas
Utilisez ce P>
attributes: {
"ng-confirm-message": "{{this.dataItem.is_active ? \'Are you sure deactive ?\' : \'Are you sure active ?\'}}",
"confirmed-click": "vm.inlineSubmit(this.dataItem.toJSON() ,true)"
}
pour kendo-jQuery. et ce kendo-mvc
quelques années plus tard, mais ... La fonction Attributs ne fonctionne pas du tout pour moi strong>, n'est même pas touchée, semble pas jolie mais ne fonctionne pas (pourquoi est nécessaire une claque de classe manuelle si une fonction de classe manuelle si une fonction est fourni pour faire le travail? Quelque chose semble bizarre). Je fais des cellules modifiables basées sur d'autres champs de champs, mais aussi, je devais modifier les styles p> 1) Ajoutez la validation sur le champ que vous souhaitez injecter la classe CSS, p> 2) lie l'événement de changement de grille et vérifiez si un champ important a des modifications, si le champ qui contrôle le style d'autres cellules vient d'appeler l'actualisation Méthode P> var _kendoGrid = $('#myGrid').data("kendoGrid");
_kendoGrid.dataSource.bind("change", function (e) {
if (e.action === "itemchange") {
if (e.field === "ImportantField") {
_kendoGrid.refresh();
}
}
});