ブログ

2020/03/16
【プリザンター】 第35回)スクリプトを使って一覧画面の数値項目を右寄せする

プリザンターでの数値項目

こんにちは、CCS田中です。

プリザンターで数値項目は頻繁に使われることがあると思います。ただ、プリザンターの一覧表示で数値項目を表示したときに左寄せになっていて見難いと思ったことはないでしょうか?Excelなどでは数値を自動で認識して右寄せにしてくれるため、それに慣れているせいもあるかもしれませんが、左寄せの数値は使いづらいと思います。そこで、一覧表示の時に数値項目だけを右寄せにするスクリプトを書くことで解消されます。

方法については次に説明します。

スクリプトでの数値項目の右寄せ設定方法

それではスクリプトを作成します。
以下の手順で設定を行ってください。

1.対象のテーブルを開きます。
2.上記メニューから、[管理]→[テーブルの管理]をクリックします。
3.[スクリプト]タブをクリックします。
4.[新規作成]ボタンをクリックします。
5.タイトルに「一覧画面で数値項目の右寄せ」等を入力します。
6.以下のスクリプトをスクリプト欄に入力します。
7.出力先の「全て」のチェックを外し、「一覧」にのみチェックを入れます。
8.[変更]ボタンをクリックします。
9.[スクリプト]タブに戻り、[更新]ボタンをクリックします。

ここまでで、設定は完了です。
対象テーブルの一覧画面を開いてみてください。数値項目が右寄せになっていることが確認できます。
今回スクリプトの詳細説明は割愛いたします。

記載するスクリプト


$p.events.after_set_GridRows = NumRight;
$p.events.on_grid_load = NumRight;

function NumRight() {
var collectNumIndex = [];
var $columnName_Num = $("[data-name^='Num']");

for(var i = 0; i < $columnName_Num.length; i++){
collectNumIndex.push($p.getGridColumnIndex($($columnName_Num[i]).data('name')));
}

var $row = $('.grid-row');
for(var b = 0; b < collectNumIndex.length; b++){
for(var i = 0; i < $row.length; i++){
$($($row[i]).children()[collectNumIndex[b]]).css('text-align', 'right');
}
}
}


まとめ

さて、いかがでしたか?

今回、一覧画面での数値項目の右寄せのスクリプトを紹介しました。今回のものを応用して種別(分類や説明など)ごとにスタイルを変えるということもできるかもしれません。今回のサンプルを参考に、ぜひ試してみてください。

導入の支援、スクリプト開発などでお困りの場合は、当社で支援もいたします。

☆☆ブログ内容への質問や追加説明をご希望の方は
【問い合わせフォーム】 こちら からお気軽にお問い合わせください☆☆

PAGE TOP