注目キーワード
  1. DFD
  2. DB設計
  3. w2ui

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

  • 2017年9月20日
  • 2019年6月25日
  • w2ui
  • 2146回
  • 0件

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ドロップダウン
htmlhtmlアイテム htmlをツールバーアイテムの代わりに表示します。
colorカラーピッカーがドロップダウンするボタン。
text-colorテキストカラーピッカーのドロップダウン。
break縦棒のセパレータ
spacerこれ以降を右寄せします。

以上、「w2ui:グリッド-ツールバーの設定」でした。

【広告】