w2grid.buttons

ツールバーの項目(操作)をまとめたオブジェクト

Object, デフォルト値は以下を参照

デフォルトのボタンの変更は、グリッドのプロトタイプを上書きします。 その為、全てのグリッドで同じボタンが表示されます。

var btn = w2obj.grid.prototype.buttons;
btn['reload'].icon     = 'icon-repeat';
btn['columns'].icon = 'icon-layers';

デフォルト値は以下の通りです。

buttons: {
    'reload' : { 
        type  : 'button', 
        id    : 'reload', 
        img   : 'icon-reload', 
        hint  : w2utils.lang('Reload data in the list') 
    },
    'columns' : { 
        type  : 'drop', 
        id    : 'column-on-off', 
        img   : 'icon-columns', 
        hint  : w2utils.lang('Show/hide columns'), 
        arrow : false, 
        html  : '' 
    },
    'search' : { 
        type  : 'html',   
        id    : 'search', 
        html  : '<div class="w2ui-icon icon-search-down w2ui-search-down" '+
                '    title="'+ w2utils.lang('Select Search Field') +'" '+ 
                '    onclick="var obj = w2ui[$(this).parents(\'div.w2ui-grid\').attr(\'name\')]; '+
                '    obj.searchShowFields(this);"></div>' 
    },
    'search-go' : { 
        type    : 'check',  
        id      : 'search-advanced', 
        caption : w2utils.lang('Search...'), 
        hint    : w2utils.lang('Open Search Fields') 
    },
    'add' : { 
        type    : 'button', 
        id      : 'add', 
        caption : w2utils.lang('Add New'), 
        hint    : w2utils.lang('Add new record'), 
        img     : 'icon-add' 
    },
    'edit' : { 
        type     : 'button', 
        id       : 'edit', 
        caption  : w2utils.lang('Edit'), 
        hint     : w2utils.lang('Edit selected record'), 
        img      : 'icon-edit', 
        disabled : true 
    },
    'delete' : { 
        type     : 'button', 
        id       : 'delete', 
        caption  : w2utils.lang('Delete'), 
        hint     : w2utils.lang('Delete selected records'), 
        img      : 'icon-delete', 
        disabled : true 
    },
    'save' : { 
        type    : 'button', 
        id      : 'save', 
        caption : w2utils.lang('Save'), 
        hint    : w2utils.lang('Save changed records'), 
        img     : 'icon-save' 
    }
}

デモ

ツールバーの左端アイコン(reload)を「search」アイコンに変更しています。

JavaScript

$('#grid').w2grid({
    name : 'mygrid',
    show : {
        toolbar : true,
    },
    buttons: {
        'reload' : { 
            type : 'html', 
            id   : 'reload', 
            html : '<div class="w2ui-icon icon-search-down w2ui-search-down" '+
                   '    title="リストを更新します。"></div>' 
        },
    },
    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' }
    ],
    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' }
    ],
});