w2grid.onRequest

onReload = function(event)

サーバにリクエストを送信した時に呼び出されます。

オブジェクト作成時にイベントリスナーとして指定します。

$('#grid').w2grid({
    name    : 'grid',
    url        : 'some/url/to/data',
    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' }
    ],
    onRequest: function(event) {
        console.log('-- server call --');
        console.log(event);
    }        
});

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

w2ui['grid'].on('request', function(event) {
    console.log('-- server call --');
    console.log(event);
});

このイベントの重要な点は、サーバに送信するデータを変更することが出来る点です。 イベントが発生すると、イベントオブジェクト内のpostDataにはサーバへ送信する全てのデータが含まれます。 postDataを変更すると、変更された内容がサーバへ送信されます。 urlプロパティも変更可能で、その場合も新しいURLに対してリクエストします。

このイベントハンドラはデフォルトのアクションの前に呼び出されます。 デフォルトアクションを取り消すにはevent.preventDefault()を使います。 このイベントが完全に終わった後にデフォルトアクションを走らせるには、event.onCompleteを使います。 より詳しく知りたい場合はw2utils:eventsを参照して下さい。

デモ

外部JSONを読み込んでデータの取得が完了するとconsole.logが出力されます。

* 体感的にはほとんど分かりません。グリッドが表示されるとconsole.logが表示されます。

JavaScript

$('#grid').w2grid({
    name    : 'mygrid',
    url        : '../json/data.json',
    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' }
    ],
    onRequest: function(event) {
        console.log('-- server call --');
        console.log(event);
    }
});