w2grid.addColumn
更新日: 2018-09-06
addColumn([before], column)
カラムを追加します。 戻り値はinteger
です。
- before: string, integer
- 指定したカラムの前に新しくカラム挿入します。オプションです。
- column: object, array
- 追加するカラム。
説明
.columns
配列に新しいカラムを追加し、w2utils.refresh()
メソッドを実行します。 第1引数のbefore
はオプションです。 カラム名か.columns
のインデックスを指定することができます。 指定したカラムの前に新しくカラム挿入します。 before
が指定されていない場合、一番右に追加されます。 第2引数のcolumn
はカラムオブジェクトです。
戻り値は追加したカラム数を返します。
グリッドを以下のように定義すると
$('#grid').w2grid({
name : 'grid',
columns: [
{ field: 'recid', caption: 'ID', size: '50px' },
{ field: 'email', caption: 'Email', size: '40%' }
],
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' }
]
});
以下のようにしてレコードを追加することができます。
w2ui['grid'].addColumn({ field: 'sdate', caption: 'End Date2', size: '120px' });
一度に複数追加する場合
w2ui['grid'].addColumn('email', [
{ field: 'lname', caption: 'Last Name', size: '30%' },
{ field: 'fname', caption: 'First Name', size: '30%' }
]);
column
の構造は.columns
プロパティを参照してください。
デモ
グリッドをクリックする度に、"Last Name"の左に新しいカラムが追加されます。
JavaScript
$('#grid').w2grid({
name : 'mygrid',
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' }
],
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' }
],
});
w2ui['mygrid'].on('click', function(){
w2ui['mygrid'].addColumn('lname', { field: 'sdate', caption: 'End Date2', size: '120px' });
});
© 2017. .
Code licensed under theMIT License. Documentation licensed underCC BY 3.0.
このコンテンツはvitmalinaによるw2ui.gridドキュメントを翻訳/改変したものです。