新規投稿
フォローする

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

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
});

 

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

幸いです。

 

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

0

3件のコメント

Avatar
rex0220

遠藤さん

私も 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

1
Avatar
milkyway0307

私もいろいろ試行錯誤をしたことがありますが、私の経験上、フィールドの内容を参照しながら表示を変えるのは 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:
1
Avatar
遠藤 大輔

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:

0
サインインしてコメントを残してください。