ステキな一日

IT技術やトレンディな話題を中心に個人的なメモを書き綴っていきます。

w2ui:グリッド-ツールバーの設定

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

【広告】