w2grid.url

リモートデータソースのURLを指定します。

String or Object, default = ''

.urlプロパティが指定されている場合、 グリッドの更新、検索、レコードのソートが必要になる度に、 .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: 'Start Date', size: '120px' },
        { field: 'sdate', caption: 'End Date', size: '120px' }
    ]
});

操作によって別のURLを指定することができます。 (get, delete, save)

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

または、w2gridオブジェクト生成後に指定します。

w2ui['layout'].url = 'server/side/path/to/records';
w2ui['layout'].reload();

.urlを指定しない場合、データソースはローカルになります。 レコードの削除/追加、検索、ソート等、全ての操作がローカルで実行されます。.load()メソッドを利用すると、データソースを切り替えることなく、サーバからレコードを取得することができます。

データ構造については、overviewを参照してください。

デモ

ツールバーの「Save」ボタンと「Delete」ボタンを押した時に、 それぞれ別のJSONファイルを取得します。
(グリッド内容は更新されません。)

JavaScript

$('#grid').w2grid({
  name    : 'mygrid',
    url : {
        get    : '../json/data.json',
        remove : '../json/data_remove.json',
        save   : '../json/data_save.json'
    },
    show : {
        toolbar: true,
        toolbarDelete  : true,
        toolbarSave    : 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' }
    ],
});