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に関する情報を公開しています。ぜひお読みください。
あわせて読みたい
w2uiでGridを作ってみる
w2uiでグリッドを作るのはとても簡単。 まずはw2uiを使用する準備ですが、googleのCDNとw2uiサイトのsrcをheadタグ内に配置します。※環境によってはjQueryとw2uiのjs,cs…