w2grid.columns
カラムの配列を定義します。
Array, default = []このプロパティはオブジェクト生成時に定義する必要がありますが、 オブジェクト生成以降はいつでも変更することができます。 .columnsプロパティを変更した場合、w2utils.refresh()メソッドを使ってグリッドを更新する必要があります。
オブジェクト作成時に指定する場合
$('#grid').w2grid({
name : 'grid',
columns: [
{ field: 'recid', caption: 'ID', size: '50px' },
{ field: 'lname', caption: 'Last Name', size: '30%' },
{ field: 'fname', caption: 'First Name', size: '30%' },
{ field: 'email', caption: 'Email', size: '40%' },
{ field: 'sdate', caption: 'Start Date', size: '120px' },
{ field: 'sdate', caption: 'End Date', size: '120px' }
]
});各カラムには以下のプロパティを指定することができます。
column = {
caption : '', // カラムのキャプション
field : '', // レコードをマップする際のフィールド名
size : null, // カラムの幅 px or %
min : 15, // カラムの最小幅 px
max : null, // カラムの最大幅 px
gridMinWidth : null, // カラムが見えている時の最小幅
sizeCorrected : null, // 修正サイズ(読み込み専用) ※下記「size」を参照
sizeCalculated : null, // 再計算サイズpx(読み込み専用) ※下記「size」を参照
hidden : false, // 非表示カラムかどうか
sortable : false, // ソートの可否
searchable : false, // 検索対象カラムかどうか bool/string: int,float,date,...
resizable : true, // リサイズの可否
hideable : true, // 非表示にすることができるかどうか
attr : '', // <td ... attr>に含める文字列
style : '', // <td>タグに追加するstyle
render : null, // 表示文字列 or レンダリング関数 ※下記「render」を参照
title : null, // 表示文字列 or カラムセルのタイトル関数
editable : {}, // 編集可能なフィールドの場合、editableオブジェクト ※下記「editable」を参照
frozen : false, // 左固定列かどうか
info : null // レコード情報バブルの表示。bool or object
}size
カラムのサイズ(幅)はpxまたは%を指定することができます。 サイズに10を指定した場合と10pxを指定した場合、どちらも10pxのカラム幅になります。 10%はそのまま10%の幅を意味します。 一つのグリッド内で、カラムごとにpxと%を混在させることもできます。w2utils.refresh()メソッドを呼び出すとpxで指定されたカラム幅が再計算され、.sizeCalculatedに格納されます。 カラム幅の計算は、まずpxで定義されたカラム幅を割り当てて、残りを%で定義された幅に割り振ります。 %で定義された幅の合計が100%を超える場合、値を修正して.sizeCorrectedに格納します。
render
render(function(record, [index], [column_index]))はカラムデータの書式を指定することができます。 functionが指定されている場合、カラム内の各セルに対して処理され、その結果が表示されます。 この機能を使うと、複数のフィールドのデータから計算し、結果を出力することができます。
$('#grid').w2grid({
name : 'grid',
columns: [
{ field: 'recid', caption: 'ID', size: '50px' },
{ field: 'full-name', caption: 'Full Name', size: '60%',
render: function (record) {
return '<div>' + record.fname + ' ' + record.lname + '</div>';
}
},
{ field: 'email', caption: 'Email', size: '40%' },
{ field: 'sdate', caption: 'Start Date', size: '120px' },
{ field: 'sdate', caption: 'End Date', size: '120px' }
]
});定義済みのフォーマットは以下のとおりです。 (numberとfloatのXXは、小数点以下の桁数を指定します)
- int
- float:XX (XXは小数点以下の桁数)
- number:XX (XXは小数点以下の桁数)
- money
- currency
- percent
- age
- date:date_format (date_formatは日付フォーマット。空の場合はd/m/yyyy)
- time:time_format (time_formatは時間フォーマット。空の場合はd/m/yyyy)
- datetime:date_format|time_format
- toggle
- password
例えばfloat、date、ageは以下のように指定します。
$('#grid').w2grid({
name : 'grid',
columns: [
{ field: 'recid', caption: 'ID', size: '50px', render: 'float:2' },
{ field: 'full-name', caption: 'Last Name', size: '60%' },
{ field: 'email', caption: 'Email', size: '40%' },
{ field: 'sdate', caption: 'Start Date', size: '120px', render: 'date:dd.mm.yyyy' },
{ field: 'sdate', caption: 'End Date', size: '120px', render: 'age' }
]
});editable
editableは編集可能なカラムかどうかを表しています。 このプロパティがオブジェクトの場合は、編集可能なカラムです。
editable = {
type : 'text', // フィールドのタイプ ※下記参照
inTag : '', // 表示文字 例：input ...
style : '',
... // 追加プロパティをw2fieldに渡すことが可能 (date, enum等)
}このオブジェクトでは$('input').w2field(column.editable)に渡される他のプロパティを指定することで、 w2fieldでサポートされている「型」を使うことができます。 フィールドの型は以下の通りです。
- int
- float
- hex
- money
- currency
- percent
- alphanumeric
- date
- time
- datetime
- color
- list
- combo
- check
- checkbox
- selectelect
型ごとにオプションに違いがあります。 オプションについてはw2fieldを参照してください。
.getChanges()メソッドを使って変更済みのレコードを探します。 続いて.save()メソッドで変更した全てのレコードを.urlプロパティに送信します。 グリッド生成時に.show.toolbarSaveを使って「save」ボタンを追加することもできます。
デモ1
ID、Start Date、End Dateに書式を指定しています。
$('#grid').w2grid({
name : 'mygrid',
columns: [
{ field: 'recid', caption: 'ID', size: '50px', render: 'float:2' },
{ field: 'full-name', caption: 'Last Name', size: '60%' },
{ field: 'email', caption: 'Email', size: '40%' },
{ field: 'sdate', caption: 'Start Date', size: '120px', render: 'date:dd.mm.yyyy' },
{ field: 'sdate', caption: 'End Date', size: '120px', render: 'age' }
],
records: [
{ recid: 1, fname: 'John', lname: 'doe', email: 'vitali@gmail.com', sdate: '1/3/2012' },
{ recid: 2, fname: 'Stuart', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '2/4/2012' },
{ recid: 3, fname: 'Jin', lname: 'Franson', email: '--', sdate: '4/23/2012' },
{ recid: 4, fname: 'Susan', lname: 'Ottie', email: 'jdoe@gmail.com', sdate: '5/3/2012' },
{ recid: 5, fname: 'Kelly', lname: 'Silver', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
{ recid: 6, fname: 'Francis', lname: 'Gatos', email: 'vitali@gmail.com', sdate: '2/5/2012' }
],
});
デモ2
renderにfunctionを指定してfnameとlnameを連結し、「Full Name」を表示します。
JavaScript
$('#grid').w2grid({
name : 'mygrid',
columns: [
{ field: 'recid', caption: 'ID', size: '50px' },
{ field: 'full-name', caption: 'Full Name', size: '60%',
render: function (record) {
return '<div>' + record.fname + ' ' + record.lname + '</div>';
}
},
{ field: 'email', caption: 'Email', size: '40%' },
{ field: 'sdate', caption: 'Start Date', size: '120px' },
{ field: 'sdate', caption: 'End Date', size: '120px' }
],
records: [
{ recid: 1, fname: 'John', lname: 'doe', email: 'vitali@gmail.com', sdate: '1/3/2012' },
{ recid: 2, fname: 'Stuart', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '2/4/2012' },
{ recid: 3, fname: 'Jin', lname: 'Franson', email: '--', sdate: '4/23/2012' },
{ recid: 4, fname: 'Susan', lname: 'Ottie', email: 'jdoe@gmail.com', sdate: '5/3/2012' },
{ recid: 5, fname: 'Kelly', lname: 'Silver', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
{ recid: 6, fname: 'Francis', lname: 'Gatos', email: 'vitali@gmail.com', sdate: '2/5/2012' }
],
}
デモ3
infoにrenderを指定して「i」アイコンクリック時に情報バブルを表示します。
* columns.renderと同時指定はできないようです。
editableにlistを指定し、listのオプションであるitemsでリストボックスを指定しています。 editable.typeによって追加オプションが変わります。
JavaScript
var people = ['George Washington', 'John Adams', 'Thomas Jefferson', 'James Buchanan'];
$('#grid3').w2grid({
name : 'mygrid',
columns: [
{ field: 'recid', caption: 'ID', size: '50px' },
{ field: 'fname', caption: 'First Name', size: '60%',
info: {
render : function (rec) {
var name = rec.fname + ' ' + rec.lname;
return '<table>'+
' <tr><td>Name</td><td>'+ name +'</td></tr>'+
' <tr><td>Field1</td><td>Value1</td></tr>'+
' <tr><td>Field2</td><td>Some value</td></tr>'+
'</table>';
}
},
},
{ field: 'email', caption: 'Email', size: '40%',
editable: {
type: 'list',
inTag: '',
items: people,
},
},
{ field: 'sdate', caption: 'Start Date', size: '120px' },
{ field: 'sdate', caption: 'End Date', size: '120px' }
],
records: [
{ recid: 1, fname: 'John', lname: 'doe', email: 'vitali@gmail.com', sdate: '1/3/2012' },
{ recid: 2, fname: 'Stuart', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '2/4/2012' },
{ recid: 3, fname: 'Jin', lname: 'Franson', email: '--', sdate: '4/23/2012' },
{ recid: 4, fname: 'Susan', lname: 'Ottie', email: 'jdoe@gmail.com', sdate: '5/3/2012' },
{ recid: 5, fname: 'Kelly', lname: 'Silver', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
{ recid: 6, fname: 'Francis', lname: 'Gatos', email: 'vitali@gmail.com', sdate: '2/5/2012' }
],
});
© 2017. 
.
Code licensed under theMIT License. Documentation licensed underCC BY 3.0.
このコンテンツはvitmalinaによるw2ui.gridドキュメントを翻訳/改変したものです。