RadPHP XEでListViewやDBGridの行に色やフォントを設定する方法を紹介します。

ListViewやDBGridの行に色やフォントを設定するには、qx.ui.table.DefaultDataRowRendererを使用します。

var renderer = new qx.ui.table.DefaultDataRowRenderer();

行の色情報を設定するには、setRowColors()メソッドを使用します。

var rowColors1 = {  //行の色設定
  colNormal:'blue',  //標準の文字色
  colSelected: 'red', //選択行の文字色
  bgcolEven: '#FFC6E2', //奇数行の背景色
  bgcolOdd: '#E2FFc6',  //偶数行の背景色
  bgcolFocusedSelected: '#000000',     //行にフォーカスあり グリッドにフォーカスあり 行選択
  bgcolFocusedSelectedBlur: '#555555', //行にフォーカスあり グリッドにフォーカスなし 行選択
  bgcolFocused: '#FFFFFF',             //行にフォーカスあり グリッドにフォーカスあり 行未選択
  bgcolFocusedBlur: '#000000',         //行にフォーカスあり グリッドにフォーカスなし 行未選択
  bgcolSelected: '#00FF00',            //行にフォーカスなし グリッドにフォーカスあり 行選択
  bgcolSelectedBlur: '#009900',        //行にフォーカスなし グリッドにフォーカスなし 行選択
};
renderer.setRowColors(rowColors1);

フォント名を設定するには、setFontFamilyメソッドを使用します。

renderer.setFontFamily("'ＭＳ 明朝', 'sans-serif'");  //フォント名

フォントサイズを設定するには、setFontSize()メソッドを使用します。

renderer.setFontSize('14px'); //フォントサイズ

DefaultDataRowRendererの設定ができたら、ListViewのsetDataRowRendererメソッドで登録します。

ListView1.setDataRowRenderer(renderer);

次のコードはListView(ListView1)の行に色を設定するコードです。

フォームにListViewを配置します。

フォームのEncodingを「Unicode (UTF-8)」にします。

ListViewのColumnsプロパティを設定します。

製品名
配布形態
金額

フォームのJavaScriptのOnLoadイベントに以下のコードを記述します。

function Unit1JSLoad($sender, $params)
{
    ?>
    //begin js
//行データの登録
var rowData = [['RAD Studio XE Professional （ライセンス+メディア）', 'DVD', 168000],
               ['RAD Studio XE Professional ESD バージョンアップ （ライセンスのみ）', 'ESD（ライセンスのみ）', 84000],
               ['Delphi XE Professional （ライセンス+メディア）', 'DVD', 98000],
               ['Delphi XE Professional ESD バージョンアップ （ライセンスのみ）', 'ESD（ライセンスのみ）', 52000],
               ['Delphi XE Starter ESD（ライセンスのみ） アップグレード版', 'ESD（ライセンスのみ', 14000],
               ['C++Builder XE Professional （ライセンス+メディア）', 'DVD', 98000],
               ['C++Builder XE Professional ESD バージョンアップ （ライセンスのみ）', 'ESD（ライセンスのみ）', 52000],
               ['C++Builder XE Starter ESD（ライセンスのみ） アップグレード版', 'ESD（ライセンスのみ）', 14000],
               ['RadPHP XE （ライセンス＋メディア）', 'DVD', 36000],
               ['RadPHP XE ESD （ライセンスのみ） バージョンアップ', 'ESD（ライセンスのみ）', 20000]];
ListView1.getTableModel().addRows(rowData);

//列幅の調整
var tcm = ListView1.getTableColumnModel();
tcm.setColumnWidth(0, 300);
tcm.setColumnWidth(1, 140);
tcm.setColumnWidth(2, 100);

//行の色の設定
var renderer = new qx.ui.table.DefaultDataRowRenderer();
var rowColors1 = {  //行の色設定
  colNormal:'blue',  //標準の文字色
  colSelected: 'red', //選択行の文字色
  bgcolEven: '#FFC6E2', //奇数行の背景色
  bgcolOdd: '#E2FFc6',  //偶数行の背景色
  bgcolFocusedSelected: '#000000',     //行にフォーカスあり グリッドにフォーカスあり 行選択
  bgcolFocusedSelectedBlur: '#555555', //行にフォーカスあり グリッドにフォーカスなし 行選択
  bgcolFocused: '#FFFFFF',             //行にフォーカスあり グリッドにフォーカスあり 行未選択
  bgcolFocusedBlur: '#000000',         //行にフォーカスあり グリッドにフォーカスなし 行未選択
  bgcolSelected: '#00FF00',            //行にフォーカスなし グリッドにフォーカスあり 行選択
  bgcolSelectedBlur: '#009900',        //行にフォーカスなし グリッドにフォーカスなし 行選択
};
renderer.setRowColors(rowColors1);
renderer.setFontFamily("'ＭＳ 明朝', 'sans-serif'");  //フォント名
renderer.setFontSize('14px'); //フォントサイズ
ListView1.setRowHeight(20);  //行の高さ
ListView1.setDataRowRenderer(renderer);
    //end
    <?php
}

【送料無料】PHPで初めてドラッグ＆ドロップ開発を実現した革新的なWeb開発環境RadPHP XE ESD … 価格：32,000円（税込、送料込）