w2uiグリッドの数値を右寄せで表示

w2uiのグリッドを表示した場合、デフォルトでは表示されるデータは左寄せで表示されます。

数値については、右寄せで表示したいと思いますので設定を行います。

ベースにしているのは、前回記事「w2uiグリッドに画像を表示」になります。

w2uiグリッドのcolumnsプロパティ変更

まず前回設定したグリッドのプロパティが下記になります。

マークしてある２２行、２５行、２６行の設定を変更していきます。

var grid = { 
	name: 'grid', 
	url: 'data/grid/getRank.php',
	method: 'POST', 
	limit:150,
	recid:'rank',
	recordHeight : 80,
	postData:	{BaseGenreId:0},
	columns: [            		    
		{ field: 'rank', caption: '順位', size: '40px' },
		{ field: 'ImageUrls1', caption: '商品画像', size: '80px',
			render: function (record, index, col_index) {
				var html = '';
				 if(record.ImageUrls1.length>0) {
					html = '<img src="' + record.ImageUrls1 + '" style="width:100%" />';
				}
				return html;
			}    
		 },
		{ field: 'catchcopy', caption: 'キャッチコピー', size: '120px' },
		{ field: 'itemName', caption: '商品名', size: '100%'},
		{ field: 'itemPrice', caption: '価格', size: '80px'},
		{ field: 'itemUrl', caption: '商品URL', size: '120px' },
		{ field: 'shopName', caption: '店舗名', size: '120px' },
		{ field: 'reviewCount', caption: 'レビュー数', size: '80px'},
		{ field: 'reviewAverage', caption: 'レビュー平均', size: '80px'}
        ],
	sortData: [
		{ field: 'rank', direction: 'asc' }
	]
};

右寄せにするには、styleを挿入してあげるだけになります。

下記のようにstyle:’text-align: right’を追加しました。

var grid = { 
	name: 'grid', 
	url: 'data/grid/getRank.php',
	method: 'POST', 
	limit:150,
	recid:'rank',
	recordHeight : 80,
	postData:	{BaseGenreId:0},
	columns: [            		    
		{ field: 'rank', caption: '順位', size: '40px' },
		{ field: 'ImageUrls1', caption: '商品画像', size: '80px',
			render: function (record, index, col_index) {
				var html = '';
				 if(record.ImageUrls1.length>0) {
					html = '<img src="' + record.ImageUrls1 + '" style="width:100%" />';
				}
				return html;
			}    
		 },
		{ field: 'catchcopy', caption: 'キャッチコピー', size: '120px' },
		{ field: 'itemName', caption: '商品名', size: '100%'},
		{ field: 'itemPrice', caption: '価格', size: '80px' ,style:'text-align: right' },
		{ field: 'itemUrl', caption: '商品URL', size: '120px' },
		{ field: 'shopName', caption: '店舗名', size: '120px' },
		{ field: 'reviewCount', caption: 'レビュー数', size: '80px' ,style:'text-align: right' },
		{ field: 'reviewAverage', caption: 'レビュー平均', size: '80px' ,style:'text-align: right' }
        ],
	sortData: [
		{ field: 'rank', direction: 'asc' }
	]
};

実際に表示すると下記のように表示されます。

w2uiグリッドの通貨を３桁区切り表示

２２行名が価格が表示されているcolumnsの設定になりますので、ここを修正します。

また表示上の変化は無いですが、２５行と２６行も数値ですので、表示するデータ型を指定しておきます。

var grid = { 
	name: 'grid', 
	url: 'data/grid/getRank.php',
	method: 'POST', 
	limit:150,
	recid:'rank',
	recordHeight : 80,
	postData:	{BaseGenreId:0},
	columns: [            		    
		{ field: 'rank', caption: '順位', size: '40px' },
		{ field: 'ImageUrls1', caption: '商品画像', size: '80px',
			render: function (record, index, col_index) {
				var html = '';
				 if(record.ImageUrls1.length>0) {
					html = '<img src="' + record.ImageUrls1 + '" style="width:100%" />';
				}
				return html;
			}    
		 },
		{ field: 'catchcopy', caption: 'キャッチコピー', size: '120px' },
		{ field: 'itemName', caption: '商品名', size: '100%'},
		{ field: 'itemPrice', caption: '価格', size: '80px' ,render: 'money',style:'text-align: right' },
		{ field: 'itemUrl', caption: '商品URL', size: '120px' },
		{ field: 'shopName', caption: '店舗名', size: '120px' },
		{ field: 'reviewCount', caption: 'レビュー数', size: '80px' ,render: 'int',style:'text-align: right' },
		{ field: 'reviewAverage', caption: 'レビュー平均', size: '80px' ,render: 'int',style:'text-align: right' }
        ],
	sortData: [
		{ field: 'rank', direction: 'asc' }
	]
};

２２行目の通貨型の指定は、render: ‘money’の部分になります。

２５～２６行の数値型の指定は、render: ‘int’の部分になります。

実際に表示すると下記のようになると思います。

その他のデータ型については、w2ui公式サイトのw2grid.columnsを参考にしてください。