w2grid.toolbar

グリッドのツールバーを設定します。

Object, default = null

グリッドにはツールバーがあります。 .toolbarプロパティはオブジェクト生成後に初期化する必要があります。 同時にw2toolbarオブジェクトも生成されます。 オブジェクト作成時にツールバーにボタンを追加するには、以下のように指定します。

$('#grid').w2grid({
    name    : 'grid',
    header  : 'Grid Header',
    show : {
        toolbar : true
    },
    toolbar: {
        items: [
            { type: 'break' },
            { type: 'button', id: 'mybutton', caption: 'My other button', img: 'icon-folder' }
        ],
        onClick: function (target, data) {
            console.log(target);
        }
    },
    columns: [                
        { field: 'recid', caption: 'ID', size: '50px' },
        { field: 'lname', caption: 'Last Name', size: '30%' },
        { field: 'fname', caption: 'First Name', size: '30%' },
        { field: 'email', caption: 'Email', size: '40%' },
        { field: 'sdate', caption: 'Start Date', size: '120px' },
        { field: 'sdate', caption: 'End Date', size: '120px' }
    ]
});

ツールバーはデフォルトは非表示です。.show.toolbarにtrueを指定し、ツールバーを表示する必要があります。 いくつかのボタンはオブジェクト生成中に表示または非表示にすることができます。 それらは全て.showプロパティで指定します。 以下はツールバーに関する.showプロパティ項目のデフォルト値です。

show = {
    ...
    toolbar         : false,
    toolbarReload   : true,
    toolbarColumns  : true,
    toolbarSearch   : true,
    toolbarAdd      : false,
    toolbarDelete   : false,
    toolbarSave     : false
}

.showには、ツールバーに関連する項目以外の項目も含まれています。

グリッドオブジェクトが生成されると、.toolbarプロパティはw2toolbarオブジェクトになります。 このオブジェクトの名前は「グリッド名+'_toolbar'」です。 グリッドが生成済みの場合、下記の方法でw2toolbarにアクセスできます。

w2ui['grid'].toolbar.disable('mybutton');

w2ui['grid_toolbar'].disable('mybutton');

デモ

デフォルトのボタンを全て表示し、オリジナルの「My other button」ボタンを1つ追加しています。 「My other button」をクリックすると、console.logを出力します。

JavaScript

$('#grid').w2grid({
    name    : 'mygrid',
    show : {
        toolbar        : true,
        toolbarReload  : true,
        toolbarColumns : true,
        toolbarSearch  : true,
        toolbarAdd     : true,
        toolbarEdit    : true,
        toolbarDelete  : true,
        toolbarSave    : true,
    },
    toolbar: {
        items: [
            { type: 'break' },
            { type: 'button', id: 'mybutton', caption: 'My other button', img: 'icon-folder' }
        ],
        onClick: function (target, data) {
            console.log(target);
        }
    },
    columns: [
        { field: 'recid', caption: 'ID', size: '50px' },
        { field: 'lname', caption: 'Last Name', size: '30%' },
        { field: 'fname', caption: 'First Name', size: '30%' },
        { field: 'email', caption: 'Email', size: '40%' },
        { field: 'sdate', caption: 'End Date', size: '120px' }
    ],
    records: [
        { recid: 1, fname: 'John', lname: 'doe', email: 'vitali@gmail.com', sdate: '1/3/2012' },
        { recid: 2, fname: 'Stuart', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '2/4/2012' },
        { recid: 3, fname: 'Jin', lname: 'Franson', email: '--', sdate: '4/23/2012' },
        { recid: 4, fname: 'Susan', lname: 'Ottie', email: 'jdoe@gmail.com', sdate: '5/3/2012' },
        { recid: 5, fname: 'Kelly', lname: 'Silver', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 6, fname: 'Francis', lname: 'Gatos', email: 'vitali@gmail.com', sdate: '2/5/2012' }
    ],
});