今回は w2ui.grid のセルの書式設定の方法について説明します。
セルに対して書式を設定する場合は、グリッドのカラム宣言である columns プロパティの中の render プロパティで行います。
■render プロパティの定義済みの書式について
| render名 | 書式 | 説明 |
|---|---|---|
| int | 整数値 | |
| float | 浮動小数点数値 | float:NN (NNは小数点以下の桁数) |
| number | 浮動小数点数値 | number:NN (NNは小数点以下の桁数) |
| money | 金額 | $9,999,999 の様にカンマ編集 ($ はロケールにより変化する) |
| currency | 金額 | $9,999,999 の様にカンマ編集 ($ はロケールにより変化する) |
| percent | パーセント | 数値をそのままパーセント値として表示(最後に％を付加) |
| age | 年齢 | |
| date | 日付 | date:date_format (date_formatは日付書式、空の場合はd/m/yyyy) |
| time | 時刻 | time:time_format (time_formatは時刻書式、空の場合はd/m/yyyy) |
| datetime | 日付・時刻 | datetime:date_format|time_format (date_formatは日付書式、time_formatは時刻書式) |
| toggle | 使い方が不明 | |
| password | パスワード | 文字列の数だけ *(アスタリスク)の表示 |
| function | レンダリング関数 | レンダリング関数: render: function(record, [index], [column_index]) を宣言できる |
それでは、上記の書式で使えそうなものを簡単な例で以下に示します。
<!DOCTYPE html>
<html>
<head>
<title>w2ui Grid-1</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="./dist/w2ui.min.css" />
<script type="text/javascript" src="./libs/jquery/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="./dist/w2ui.js"></script>
</head>
<body>
<div id="grid" style="width: 800px; height: 250px;"></div>
<script>
$(function () {
// id="grid" へのグリッド設定
$('#grid').w2grid({
name: 'grid',
columns: [
{ field: 'recid', caption: 'ID' , size: '40px' , render: 'float:2' },
{ field: 'fname', caption: 'First Name', size: '80px' },
{ field: 'lname', caption: 'Last Name' , size: '80px' , render: 'password'},
{ field: 'fullname', caption: 'Full Name' , size: '100px',
render: function (record) {
return '<div>' + record.fname + ' ' + record.lname + '</div>';
}
},
{ field: 'email', caption: 'Email' , size: '20%' },
{ field: 'sdate', caption: 'Birthday' , size: '100px', render: 'date:yyyy.mm.dd' },
{ field: 'sdate', caption: 'age' , size: '80px' , render: 'age' },
{ field: 'money', caption: 'Money' , size: '80px' , render: 'money' },
{ field: 'money', caption: 'Money' , size: '80px' , render: 'percent' }
],
records: [
{ recid: 1, fname: "John" , lname: "Doe" , email: "jdoe@gmail.com", sdate: "1980/03/01", money: "1000" },
{ recid: 2, fname: "Stuart" , lname: "Motzart", email: "smot@gmail.com", sdate: "2000/03/12", money: "200" },
{ recid: 3, fname: "Jin" , lname: "Franson", email: "jgra@gmail.com", sdate: "2010/03/13", money: "30000" },
{ recid: 4, fname: "Susan" , lname: "Ottie" , email: "sott@gmail.com", sdate: "1980/03/24", money: "40000" },
{ recid: 5, fname: "Kelly" , lname: "Silver" , email: "ksil@gmail.com", sdate: "1970/03/25", money: "1000" },
{ recid: 6, fname: "Francis", lname: "Gatos" , email: "fgat@gmail.com", sdate: "1982/03/26", money: "1500" },
{ recid: 7, fname: "Mark" , lname: "Welldo" , email: "mwel@gmail.com", sdate: "2001/03/27", money: "10000" },
{ recid: 8, fname: "Thomas" , lname: "Bahh" , email: "tbah@gmail.com", sdate: "2000/03/28", money: "10000" }
]
});
});
</script>
</body>
</html>
これを実行させると以下の様な表示になります。
この例の中で興味深いのは、レンダリング関数を宣言できるところだと思います。
これを使えば各データの属性で色々な表示の変化を関数で処理できます。 例えば、データには区分データしか持っていないが、実際の場合にはそれに対応した文字列を表示したりできます。
レコードデータの中に男女区別のフラグを持ってそれで「男性」「女性」の違いを表示します。
<!DOCTYPE html>
<html>
<head>
<title>w2ui Grid-1</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="./dist/w2ui.min.css" />
<script type="text/javascript" src="./libs/jquery/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="./dist/w2ui.js"></script>
</head>
<body>
<div id="grid" style="width: 500px; height: 250px;"></div>
<script>
// 性別文字列の宣言
var arrSex = {"1": "Male" , "2": "Female"};
$(function () {
// id="grid" へのグリッド設定
$('#grid').w2grid({
name: 'grid',
columns: [
{ field: 'recid', caption: 'ID' , size: '60px' , render: 'float:2' },
{ field: 'fname', caption: 'First Name', size: '100px' },
{ field: 'lname', caption: 'Last Name' , size: '100px', render: 'password'},
{ field: 'fullname', caption: 'Full Name' , size: '100px',
render: function (record) {
return '<div>' + record.fname + ' ' + record.lname + '</div>';
}
},
{ field: 'sex' , caption: 'Sex' , size: '20%' ,
render: function (record) {
return '<div>' + arrSex[ record.sex ] + '</div>';
}
}
],
records: [
{ recid: 1, fname: "John" , lname: "Doe" , sex: "1" },
{ recid: 2, fname: "Stuart" , lname: "Motzart", sex: "1" },
{ recid: 3, fname: "Jin" , lname: "Franson", sex: "1" },
{ recid: 4, fname: "Susan" , lname: "Ottie" , sex: "2" },
{ recid: 5, fname: "Kelly" , lname: "Silver" , sex: "2" },
{ recid: 6, fname: "Francis", lname: "Gatos" , sex: "1" },
{ recid: 7, fname: "Mark" , lname: "Welldo" , sex: "1" },
{ recid: 8, fname: "Nuncy" , lname: "Bahh" , sex: "2" }
]
});
});
</script>
</body>
</html>
これを実行させると以下の様な表示になります。
PR
コメント