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

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

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

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

【広告】