w2utils.formatters

書式設定機能を持ったオブジェクトです。

Object

このオブジェクトは書式設定を利用するためのオブジェクトです。(特にGridでは有用です) カスタムフォーマットを指定することで、書式をカスタマイズすることができます。

w2utils.formatters['myFormatter'] = function (val, params) {
    return 'format: ' + val;
}

利用可能なフォーマットは以下の通りです。

• number
• float
• int
• money
• currency
• percent
• size
• date
• datetime
• time
• timestamp
• gmt
• age
• toggleoggle

Gridで使う場合、以下のように定義します。

$('#grid').w2grid({
    name           : 'grid',
    columns: [
        { field: 'recid', caption: 'ID', size: '50px' },
        { field: 'name', caption: 'Name', size: '30%' },
        { field: 'email', caption: 'Email', size: '40%', render: 'myformatter'},
        { field: 'sdate', caption: 'Start Date', size: '120px', render:'date' },
        { field: 'sdate', caption: 'End Date', size: '120px', render:'date:dd/mm/yyyy' }
    ],
    records: [
        { recid: 1, name: 'John', email: 'vitali@gmail.com', sdate: '1/3/2012' },
        { recid: 2, name: 'Stuart', email: 'jdoe@gmail.com', sdate: '2/4/2012' },
    ],
});

コロン(:)^*1の後にパラメータを渡すことができます。

*1 公式ではパイプ(|)という記載がありますが、ソースを見たところコロン(:)で処理していました。

デモ

"Email"はw2utils.formattersを利用し、"format:"という文字を先頭に付与します。
"EndDate"はdate:dd/mm/yyyyと指定しています。日付の月、日を2桁で表示する指定です。

JavaScript

$('#grid').w2grid({
    name           : 'grid',
    columns: [
        { field: 'recid', caption: 'ID', size: '50px' },
        { field: 'name', caption: 'Name', size: '30%' },
        { field: 'email', caption: 'Email', size: '40%', render: 'myformatter'},
        { field: 'sdate', caption: 'Start Date', size: '120px', render:'date' },
        { field: 'sdate', caption: 'End Date', size: '120px', render:'date:dd/mm/yyyy' }
    ],
    records: [
        { recid: 1, name: 'John', email: 'vitali@gmail.com', sdate: '1/3/2012' },
        { recid: 2, name: 'Stuart', email: 'jdoe@gmail.com', sdate: '2/4/2012' },
    ],
});
w2utils.formatters['myformatter'] = function (val, params) {
    return 'format: ' + val;
}