w2grid.records

レコードの配列。

Array, default = []

グリッドのオブジェクト生成時か、実行中に指定することができます。 ローカルとリモートの2種類のデータタイプがあります。.urlプロパティを指定していない場合はローカルになります。 ローカルの場合の指定方法は以下のとおりです。

$('#grid').w2grid({
    name    : 'grid',
    url     : 'server/side/path/to/records',
    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' }
    ]    
});

オブジェクト生成後にレコードを追加するには、 レコードを.recordsプロパティに追加するか (w2utils.refresh()メソッドを忘れないでください)、.add()メソッドを使って画面上で追加・更新する方法があります。

.urlプロパティを指定している場合、 指定したURLからデータをロードし、ローカルに定義されたレコードを上書きします。

$('#grid').w2grid({
    name    : 'grid',
    url     : 'server/side/path/to/records',
    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' }
    ]
});

レコードオブジェクト

レコードオブジェクトには各レコードを一意に決定するrecidプロパティが必要です。 その他にも、必要に応じてプロパティを指定します。

レコードオブジェクトの構造は以下のとおりです。

record = {
    recid      : null,      // 一意なid
    [field-1]  : '',        // field 1
    [field-2]  : '',        // field 2
    ...
    [field-N]  : '',        // field N
    style      : '',        // <tr ...>または、<td ...>に追加するCSS
    summary    : false,     // レコードのサマリー(サマリーはレコードの下に表示されます)
    editable   : true,      // レコードが編集可能かどうか(column.editableを設定する必要があります)
    expanded   : 'none',    // レコードの展開の可否。true | false | 'none' | 'spinner'
    changes    : undefined  // 読み込み専用。インライン編集されたかどうか。
}

"field-1"、...、"field-N"は表示する列に対応する必要があります。 render関数を使って複数フィールドの集計列を作成することができます。 詳しくは.columnsプロパティを参照してください。