3

だから私は 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"
        });
   });

派生属性にアクセスしようとしましたが、試したすべてが機能しませんでした。

これについての助けやブレインストーミングは大歓迎です

4

3 に答える 3

5

だから...私は実際に自分でそれを解決しました笑...

PivotTable.js の優れた点の 1 つは、オプションと並べ替えの柔軟性です。だから私は 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をチェックしてクラスを追加するため、ブラウザに負担がかかることです。最初にレンダリングするときにこれを達成する方法があるかどうかはわかりません。そのため、これらのセルは生成時に常に期限切れとしてラベル付けされます。

于 2016-01-07T15:35:01.073 に答える
1

これは、テーブル内の単一の行のフォントの色を変更するために見つけた1つの解決策です。たとえば、行番号です。5:

$("#pivot-table").pivotUI(data, {
...
            onRefresh: function (config) {
                // Show row no.5 as red
                $("#pivot-table").find('.pvtVal.row5').css('color', 'red');
            },
...
});
于 2018-02-09T16:18:30.140 に答える
-2

pivot.min.js ファイルを編集してカスタム カラーリングを行いました。ループを微調整してデータを分離し、必要な css スタイルを js ファイルに追加する必要がある場合があります。

于 2016-07-19T00:37:24.253 に答える