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:グリッド-ツールバーの設定」でした。
【広告】