w2uiのグリッドにはツールバーを表示することができます。
ツールバーには標準で用意されているボタンと、自分で設定するアイテムを表示することができます。
【広告】
グリッドにツールバーを表示する
グリッドにツールバーを表示するには、showオプションでtrueにします。
$('#grid').w2grid({name : 'grid',header : 'Grid Header',show : {toolbar : true},標準ボタン
いくつかの標準ボタンが準備されており、標準のボタンはshowオプションに記述することで表示されます。
show = {toolbar : true,toolbarReload : true,toolbarColumns : true,toolbarSearch : true,toolbarAdd : true,toolbarDelete : true,toolbarSave : true}- toolbarReload : グリッドをリロードするボタン。
- toolbarColumns : グリッドのカラムを表示、非表示するコントロールを表示するボタン。
- toolbarSearch : 拡張検索ウィンドウを表示するボタン。
- toolbarAdd : グリッドに行を追加するボタン。
- toolbarDelete : グリッドの行を削除するボタン。
- toolbarSave : グリッドを保存するボタン。(厳密にいうと変更を確定させるボタン)
オプション
オプションとしてitems以下に指定します。
toolbar: {items: [{ type: 'break' },{ type: 'button', id: 'mybutton', caption: 'My other button', img: 'icon-folder' }],typeは以下の種類があるようです。
| button | 通常のボタン |
| check | チェックボタン。 |
| radio | ラジオボタン。 |
| menu | ドロップダウンメニュー。 |
| menu-check | チェックボックスのドロップダウンメニュー。 |
| menu-radio | ラジオボタンのドロップダウンメニュー。 |
| drop | ドロップダウン |
| html | htmlアイテム htmlをツールバーアイテムの代わりに表示します。 |
| color | カラーピッカーがドロップダウンするボタン。 |
| text-color | テキストカラーピッカーのドロップダウン。 |
| break | 縦棒のセパレータ |
| spacer | これ以降を右寄せします。 |
以上、「w2ui：グリッド-ツールバーの設定」でした。
【広告】
