PivotTable.js 有条件地更改文本的颜色答案

【问题标题】：PivotTable.js conditionally change color on textPivotTable.js 有条件地更改文本的颜色
【发布时间】：2016-01-05 17:49:06
【问题描述】：

所以我正在使用 PivotTable.js，这对工作很有帮助。

不过现在，我正在尝试获取一个过滤器来根据值更改单元格的颜色或单元格内的字体。

例如，如果我的数据集中有一组日期

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

我想在 2016 年 6 月 1 日之前的任何日期更改颜色。

如果这有什么不同，我会将我的数据作为变量“数据”在本地传递

   $(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，但我尝试的一切都不起作用。

任何帮助或头脑风暴将不胜感激

【问题讨论】：

标签： javascript css colors conditional-formatting pivottable.js

【解决方案1】：

所以……我居然自己解决了哈哈……

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 并添加类。我不确定是否有办法在第一次渲染时完成此操作，因此这些单元格在生成时总是会被标记为过期。

【讨论】：

【解决方案2】：

这是我发现的一种解决方案，可以更改表格中单行的字体颜色，比如没有行。 5：

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

【讨论】：

【解决方案3】：

我通过编辑 pivot.min.js 文件进行了自定义着色。您可能需要调整循环以分离数据并在 js 文件中添加所需的 css 样式。

【讨论】：

欢迎来到 Stack Overflow！这实际上是评论，而不是答案。多一点代表，you will be able to post comments。请添加更多描述以使其成为一个好的答案。