PivotTable.js ändert die Farbe von Text bedingt - Javascript, CSS, Farben, bedingte Formatierung, Pivotable.js

Also arbeite ich mit PivotTable.js, was eine große Hilfe bei der Arbeit war.

Im Moment versuche ich jedoch, einen Filter zu erstellen, der die Farbe von Zellen oder Schriftarten in der Zelle abhängig vom Wert ändert.

Zum Beispiel, wenn ich ein Array von Daten in meinem Datensatz habe

dates = ["N/A", "4/12/2016", "7/9/2024", "7/9/2024", "4/1/2013"]

Ich möchte es so machen, dass Termine vor dem 01.06.2016 die Farben ändern.

Ich habe meine Daten lokal als Variable "Daten" übergeben, wenn das einen Unterschied macht

   $(function(){
var derivers = $.pivotUtilities.derivers;
var renderes = $.extend($.pivoUtilities.renderers, $.pivotUtilities.export_renderers);

$("#pivot_table").pivotUI(data, {
derivedAttributes: function(data){
// not sure how to access the css of the element from here
}
rows: [],
cols: ["Name", "Date", "Organization", "Cost"],
renderers: renderers,
rendererName: "Table"
});
});

Ich habe versucht, derivativeAttributes zu verwenden, aber alles, was ich versuchte, funktionierte nicht.

Jede Hilfe oder Brainstorming wäre sehr dankbar

Antworten:

4 für die Antwort № 1

Also ... ich habe es tatsächlich alleine gelöst, haha ​​...

Eines der großartigen Dinge an PivotTable.js ist die Flexibilität bei Optionen und Sortierungen. Also habe ich das onRefresh-Attribut verwendet und es mit dieser Funktion gefüttert

onRefresh: function() {


var $labels = $(".pvtRowLabel")

var today = new Date();
var d = today.getDate();
var m = today.getMonth()+1;
var y = today.getFullYear();
var date;
var dateReg = /^d{1,2}[/]d{1,2}[/]d{4}$/;

// Goes through each cell with the class ".pvtRowLabel"
for (var i=0; i<$labels.length; i++) {
if ($labels[i].innerHTML.match(dateReg)) {
date = $labels[i].innerHTML.split("/");
if (Number(date[2]) == y) {
if (Number(date[0]) == m) {
if (Number(date[1]) <= d) {
$(".pvtRowLabel").eq(i).addClass("expired");
}
} else if (Number(date[0]) < m) {
$(".pvtRowLabel").eq(i).addClass("expired");
}
} else if (Number(date[2]) < y) {
$(".pvtRowLabel").eq(i).addClass("expired");
}
}
};
},

Danach verwenden Sie einfach einen CSS-Selektor, um die Farbe anzugeben, die Sie verwenden möchten

.expired { background-color: #F08080 !important; }

Das Problem mit meiner Lösung ist, dass es mehr hinzufügtIch bin mir nicht sicher, ob es eine Möglichkeit gibt, dies zu erreichen, wenn es zum ersten Mal gerendert wird, sodass diese Zellen immer beschriftet werden als abgelaufen bei der Generierung.

---

0 für die Antwort № 2

Hier ist eine Lösung, die ich gefunden habe, um die Schriftfarbe einer einzelnen Zeile in der Tabelle zu ändern, z. B. Zeile Nr. 5:

$("#pivot-table").pivotUI(data, {
...
onRefresh: function (config) {
// Show row no.5 as red
$("#pivot-table").find(".pvtVal.row5").css("color", "red");
},
...
});

---

-2 für die Antwort № 3

Ich habe benutzerdefinierte Farben durch Bearbeiten der Datei pivot.min.js. Möglicherweise müssen Sie die Schleife optimieren, um die Daten zu trennen und den gewünschten CSS-Stil in die js-Datei einzufügen.

---