w2uiのグリッドで表示できるデータ型
サンプルでHTMLを組みながら、どのようなデータ型なら表示できるのか確認しました。
表示に関わるデータ型は以下の通りになります。
| 型名 | 内容 |
|---|---|
| text | 文字列 |
| int | 数値 |
| money | 金額 |
| currency | 通貨 |
| percent | パーセント |
| date | 日付 |
| time | 時刻 |
| datetime | 日時 |
| list | ドロップダウンリスト |
| combo | ドロップダウンリスト |
| select | ドロップダウンリスト |
| check | チェックボックス |
「list」「combo」「select」については、インライン編集等行うと内部的に異なる変更情報を持つようになります。
※詳細な違いについては、時間があれば後日追記したいと思います。
w2uiグリッドのインライン編集で指定できるデータ型
インライン編集時に指定できるデータ型は、表示する場合に指定するデータ型にプラスして設定可能です。
「float」「hex」「alphanumeric」「color」が編集時に追加指定できるデータ型ですが、表示時には文字列としておいて、編集時にデータ型を指定すると良いようです。
| 型名 | 内容 |
|---|---|
| text | 文字列 |
| int | 数値 |
| float | 小数 |
| money | 金額 |
| currency | 通貨 |
| percent | パーセント |
| date | 日付 |
| time | 時刻 |
| datetime | 日時 |
| list | ドロップダウンリスト |
| combo | ドロップダウンリスト |
| select | ドロップダウンリスト |
| check | チェックボックス |
| hex | １６進数 |
| alphanumeric | 英数字 |
| color | 色 |
w2uiグリッドの確認用サンプル
確認用なので、１ファイルで動作するように書きのようなタグを作成して検証しました。
<!DOCTYPE html>
<html>
<head>
<title>W2UI Demo: grid-14</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css" />
</head>
<body>
<div id="grid" style="width: 100%; height: 400px;"></div>
<script type="text/javascript">
var people =[{id: 1, text: 'AAA'},{id: 2, text: 'BBB'}];
$(function () {
w2utils.locale('locale/ja-jp.json');
$('#grid').w2grid({
name: 'grid',
searches: [
{ field: 'lname', caption: 'Last Name', type: 'text' },
{ field: 'fname', caption: 'First Name', type: 'text' },
{ field: 'email', caption: 'Email', type: 'text' }
],
sortData: [ { field: 'recid', direction: 'asc' } ],
columns: [
{ field: 'text', caption: 'text', size: '90px', sortable: true ,editable: { type: 'text' }},
{ field: 'int', caption: 'int', size: '90px',render:'int', sortable: true ,editable: { type: 'int', min: 0, max: 32756 }},
{ field: 'float', caption: 'float', size: '90px', sortable: true,editable: { type: 'float' }},
{ field: 'money', caption: 'money', size: '90px',render:'money', sortable: true,editable: { type: 'money' } },
{ field: 'currency', caption: 'currency', size: '90px',render:'currency', sortable: true,editable: { type: 'currency' }},
{ field: 'percent', caption: 'percent', size: '90px',render:'percent', sortable: true,editable: { type: 'percent' , precision: 1}},
{ field: 'hex', caption: 'hex', size: '90px', sortable: true,editable: { type: 'hex' }},
{ field: 'alphanumeric', caption: 'alphanumeric', size: '90px', sortable: true,editable: { type: 'alphanumeric' }},
{ field: 'color', caption: 'color', size: '90px',editable: { type: 'color' }},
{ field: 'date', caption: 'date', size: '90px',render:'date', sortable: true,editable: { type: 'date' }},
{ field: 'time', caption: 'time', size: '90px',render:'time', sortable: true,editable: { type: 'time' } },
{ field: 'datetime', caption: 'datetime', size: '90px',render:'datetime', sortable: true,editable: { type: 'datetime' } },
{ field: 'list', caption: 'list', size: '90px',sortable: true,
editable: { type: 'list', items: people, showAll: true },
render: function (record, index, col_index) {
var html = this.getCellValue(index, col_index);
return html || '';
}},
{ field: 'combo', caption: 'combo', size: '90px', sortable: true,
editable: { type: 'combo', items:people, filter: false }
},
{ field: 'select', caption: 'select', size: '90px',sortable: true,
editable: { type: 'select', items: [{ id: '', text: '' }].concat(people) },
render: function (record, index, col_index) {
var html = '';
for (var p in people) {
if (people[p].id == this.getCellValue(index, col_index)) html = people[p].text;
}
return html;
}
},
{ field: 'check', caption: 'check', size: '60px', sortable: true, resizable: true, style: 'text-align: center',
editable: { type: 'checkbox', style: 'text-align: center' }
},
{ field: 'password', caption: 'password', size: '90px',render:'password', sortable: true,editable: { type: 'password' } },
{ field: 'toggle', caption: 'toggle', size: '90px',render:'toggle', sortable: true,editable: { type: 'toggle' } },
],
records: [
{ recid: 1, text: 'text', int:'1', float:'1.08', money:'1000000', currency:'50000',percent:'58.0',hex:'256',alphanumeric:'225asf',color:'9B24F4',date:'2020/07/07 12:54:06',time:'2020/07/07 12:54:06',datetime:'2020/07/07 12:54:06',list:{ id: 2, text: 'BBB' },combo:'AAA',select:'2',check: true,password:'29',toggle:''}
]
});
});
</script>
</body>
</html>
まとめ
小一時間確認しながらコーディングしていましたが、もしかしたら抜けているデータ型があるかもしれません。
気が付いたら追記していければと思います。