所以我正在使用PivotTable.js,这对工作起到了很大帮助。
现在,我正在尝试使用过滤器根据值更改单元格中单元格或字体的颜色。
例如,如果我的数据集中有一个日期数组
dates = ["N/A", "4/12/2016", "7/9/2024", "7/9/2024", "4/1/2013"]
我想在2016年6月1日之前的任何日期改变颜色。
我将我的数据作为变量'data'在本地传递,如果这有任何区别
$(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"
});
});
我已尝试进入derivedAttributes,但我尝试的所有内容都无效。
任何帮助或头脑风暴都会非常感激
答案 0 :(得分:4)
所以......我实际上已经解决了哈哈......
PivotTable.js的一大优点是选项和排序的灵活性。所以我使用onRefresh属性并将其输入此函数
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');
}
}
};
},
之后,只需使用css选择器指定要使用的颜色
.expired { background-color: #F08080 !important; }
我的解决方案的问题在于它增加了浏览器的压力,因为它每次刷新表时都会检查DOM并添加类。我不确定在首次渲染时是否有办法实现此目的,因此这些单元格在生成时始终会被标记为已过期。
答案 1 :(得分:0)
这是我找到的一个解决方案,可以更改表格中单行的字体颜色,比如行号。 5:
$("#pivot-table").pivotUI(data, {
...
onRefresh: function (config) {
// Show row no.5 as red
$("#pivot-table").find('.pvtVal.row5').css('color', 'red');
},
...
});
答案 2 :(得分:-2)
我通过编辑pivot.min.js文件进行自定义着色。 您可能必须调整循环以隔离数据并在js文件中添加所需的css样式。