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

问题描述

所以我正在使用PivotTable.js，这在工作中是一个很大的帮助。

So I'm working with PivotTable.js which has been a great help at work.

现在，我试图得到一个过滤器去

Right now though, I'm trying to get a filter going to change the color of cells or font within the cell depending on the value.

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

For example, if I have an array of dates in my dataset

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

我想让它在6/1 /

I want to make it so any dates before 6/1/2016 to change colors.

我有数据作为变量'data'在本地传递，如果这有什么区别

I have my data being passed in locally as a variable 'data' if that makes any difference

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

I've tried going into derivedAttributes, but everything I tried wasn't working.

任何帮助或头脑风暴会非常感谢这个

Any help or brainstorming would be much appreciated on this

推荐答案

我实际上解决了它在我自己的哈哈...

So...I actually solved it on my own haha...

PivotTable.js的一个伟大的事情是选项和排序的灵活性。所以我使用了onRefresh属性，并给它这个函数

One of the great things about PivotTable.js is the flexibility in options and sorting. So I used the onRefresh attribute and fed it this function

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选择器指定您想要的颜色使用

After that, just use a css selecter to specify the color you want to use

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

我的解决方案的问题是，它会增加浏览器的压力，因为它检查DOM和每次刷新表时添加类。我不知道是否有一个方法来完成这一点，当它第一次呈现，所以这些单元格总是被标记为过期时生成。

The problem with my solution is that it adds more strain on the browser since it's checking the DOM and adding classes every time the table is refreshed. I'm not sure if there's a way to accomplish this when it's first rendered, so those cells are always going to be labeled as expired when generated.

这篇关于PivotTable.js有条件地更改文本颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！