handsontable 行ごとの書式設定について（数値とパーセンテージの切り替え）

kintone カスタマイズ
1

HandsonTableを使って、上記のような表を作成したいと考えています。

予算と実績を管理する別々のアプリから、SQLで集計データを取得して

達成率を計算した上、UNIONで結合して、一覧の表にまとめたいと考えています。

予算、実績、達成率それぞれを一つのテーブル・別の行で出すことは出来るのですが、

予算実績は数値、達成率をパーセンテージで表示するにあたり、

列ごとの書式設定は出来ても、行で書式を変える方法が分かりませんでした。

※r_resultが、SQL（UNION結合したもの）

var r_table = new Handsontable(grid, {
data: r_result,
colWidths: [100,120,80,80,80,80,80,80,80,80,80,80,80,80,120],
colHeaders: [‘支社名’ ,‘項目’,‘4月’,‘5月’,‘6月’,‘7月’, ‘8月’,‘9月’,‘10月’,‘11月’,“12月”,“1月”,“2月”,“3月”,“合計”],
columns: [
{ data: ‘支社名’ },
{ data: ‘項目’ },
{ data: ‘4月’, type: ‘numeric’, format: ‘0,0’ },
{ data: ‘5月’, type: ‘numeric’, format: ‘0,0’ },
{ data: ‘6月’, type: ‘numeric’, format: ‘0,0’ },
{ data: ‘7月’, type: ‘numeric’, format: ‘0,0’ },
{ data: ‘8月’, type: ‘numeric’, format: ‘0,0’ },
{ data: ‘9月’, type: ‘numeric’, format: ‘0,0’ },
{ data: ‘10月’, type: ‘numeric’, format: ‘0,0’ },
{ data: ‘11月’, type: ‘numeric’, format: ‘0,0’ },
{ data: ‘12月’, type: ‘numeric’, format: ‘0,0’ },
{ data: ‘1月’, type: ‘numeric’, format: ‘0,0’ },
{ data: ‘2月’, type: ‘numeric’, format: ‘0,0’ },
{ data: ‘3月’, type: ‘numeric’, format: ‘0,0’ },
{ data: ‘合計’, type: ‘numeric’, format: ‘0,0’ },
],
cells: function (row, col, prop) {
var cellProperties = {};

if(this.instance.getData()[row][1] === “合計”){
     cellProperties.className = ‘Green’;
}

  return cellProperties;
},
  readOnly: true
});

 

対処方法をご存じの方がいらっしゃいましたら、ご教示いただけると

幸いです。

 

何卒よろしくお願いいたします。

2

遠藤さん

私も Handsontable は詳しくないのですが、説明をざっと見たところ、renderer 処理内で cell 単位の書式設定で行うくらいしかなさそうです。

各カラムの renderer 処理内で row データを取得して、達成率の行なら背景色を設定になると思います。

参考 Conditional formatting
https://docs.handsontable.com/0.34.5/demo-conditional-formatting.html

 

Handsontable に、こだわりが無ければ、他の行書式設定が出来るグリッドライブラリでも試してみてはいかがですか？

参考 Tabulator
http://tabulator.info/docs/3.3?#row-formatter

3

遠藤 大輔さま

 

私もいろいろ試行錯誤をしたことがありますが、私の経験上、フィールドの内容を参照しながら表示を変えるのは cells だとうまくいかないようです。

おそらく、データが読み込まれるタイミングより、cells による書式設定のタイミングのほうが早いのかも知れません。

ただ、 afterInit を使って、イニシャライズ後に必要なフィールドを走査すれば、書式を設定することはできます。

下の例では col 番号をフィールドから特定の col だけ取り出すようにしていますが、colが決まっているのであれば、 for文でループをかけてsetCellMetaで設定すればできると思います。

afterInit: function(){
var CurrentRow;
var vlCountRows = this.countRows();
var vlCountCols = this.countCols();
for (var row=0;row<vlCountRows;row++){
CurrentRow=this.getSourceDataAtRow(row);
if (CurrentRow['項目'].value === '達成率') {
this.setCellMeta(row, this.propToCol('フィールド.value'), 'className', '何らかのクラス名');
} else {
this.setCellMeta(row, this.propToCol('フィールド.value'), 'className', '何らかのクラス名');
}
}
this.render();
}, //afterInit:
4

rex0220様

ありがとうございます。今回はHansonTableで対応しますが、Tabulatorも試してみたいと思います。

milkyway0307様

afterInit で対応できました。誠にありがとうございます。

 

afterInit: function(){
  var CurrentRow; 
  var vlCountRows = this.countRows();
  var vlCountCols = this.countCols();

  var koumoku;
  for (var CurrentRow=0;CurrentRow<vlCountRows;CurrentRow++){
     koumoku = this.getDataAtCell(CurrentRow,1);
     if (koumoku === ‘達成率’ ) {
         for (var CurrentCol = this.propToCol(‘4月’);CurrentCol<=this.propToCol(‘合計’);CurrentCol++){
         this.setCellMeta(CurrentRow, CurrentCol, ‘format’, ‘0,0.0%’);
         }
     }
  }
  this.render();
}, //afterInit:

5

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。