w2grid.show

グリッドの要素を表示するかどうかを指定します。

Object, default - 後述

カラムヘッダー等、一部の要素はデフォルトで表示されますが、 基本的にほとんど要素は非表示です。

オブジェクト作成時に指定する場合

$('#grid').w2grid({
    name    : 'grid',
    show : {
        header : true,
        footer : true,
        toolbar: true        
    },
    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: 'jdoe@gmail.com', 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' }
    ]
});

または、w2gridオブジェクト生成後に指定します。 表示を更新するにはw2utils.refresh()メソッドを呼び出します。

w2ui['grid'].show.header = false;
w2ui['grid'].refresh();

オブジェクトの構造は下記の通りです。

show = {
    header         : false,  // ヘッダーを表示するかどうか
    toolbar        : false,  // ツールバーを表示するかどうか
    footer         : false,  // フッターを表示するかどうか
    columnHeaders  : true,   // カラムを表示している時に、カラムヘッダーを表示するかどうか
    lineNumbers    : false,  // レコード番号を表示するかどうか
    expandColumn   : false,  // 列展開を表示するかどうか
    selectColumn   : false,  // 列の選択状態を表示するかどうか
    emptyRecords   : true,   // 空のレコードを表示するかどうか
    toolbarReload  : true,   // ツールバーに「reload」ボタンを表示するかどうか
    toolbarColumns : true,   // ツールバーに「columns(|||)」ボタンを表示するかどうか
    toolbarSearch  : true,   // ツールバーに検索ボックスを表示するかどうか
    toolbarAdd     : true,   // ツールバーに「Add New」ボタンを表示するかどうか
    toolbarEdit    : true,   // ツールバーに「Edit」ボタンを表示するかどうか
    toolbarDelete  : true,   // ツールバーに「Delete」ボタンを表示するかどうか
    toolbarSave    : true,   // ツールバーに「Save」ボタンを表示するかどうか
    selectionBorder: true,   // 選択セルの周りに線を表示するかどうか。(selectType = 'cell'の時)
    recordTitles   : true,   // レコードタイトルを定義するかどうか
    skipRecords    : true    // スキップしたレコードを表示するかどうか
}

デモ

全てのオプションをtrueにしてあります。

JavaScript

$('#grid').w2grid({
    name    : 'mygrid',
    selectType : 'cell',
    header  : 'Grid Header',
    show : {
        header         : true,
        toolbar        : true,
        footer         : true,
        columnHeaders  : true,
        lineNumbers    : true,
        expandColumn   : true,
        selectColumn   : true,
        emptyRecords   : true,
        toolbarReload  : true,
        toolbarColumns : true,
        toolbarSearch  : true,
        toolbarAdd     : true,
        toolbarEdit    : true,
        toolbarDelete  : true,
        toolbarSave    : true,
        selectionBorder: true,
        recordTitles   : true,
        skipRecords    : true,
    },
    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' }
    ],
});