はじめに

w2uiのgridはスクロールに伴いオンデマンドでサーバーからデータを取得することで無限スクロールを可能とするグリッドライブラリです。
ここでは、w2ui(grid)のデータソースとしてSeaside(Pharo)を使うサンプルを紹介します。

動作した環境

項目	内容
サーバー	Pharo8.0.0＋seaside3
クライアント	Google Chrome
javascriptライブラリ	w2ui 1.5

ソースコード

※稼働中のプログラムの一部をコピペしただけで、このサンプルが動作するかの検証は行っていません。

javascript

javascriptサンプル

$(function() {
    $("#grid").w2grid({
        name: "grid",
        limit:  50,
        url: "dummy",
        recid: "id",
        columns: [
            { field: "id", text: "id", size: "40px", hidden: true },
            { field: "お名前", text: "お名前", size: "100px", sortable: true }
        ],
        onRequest: function(event) {
            const data = eval('(' + document.getElementById("data").innerHTML + ')');
            event.url = document.getElementById("url").innerHTML + '?' + data.replace(/&amp;/g, "&");
        }
    });
});

limitプロパティで１回あたりにサーバーから取得するレコード数を指定しています
w2gridがサーバーにデータをリクエストする直前にonRequestイベントが発火するので、そこでリクエスト先のURLを上書きしています。
リクエスト先URLはPharo側でspan要素にセットされた情報を元に生成します

Pharo

htmlレンダリング

renderContentOnメソッド

renderContentOn: html
    | req |
    html div style:'display:none;'; with:[
        req := html jQuery ajax callback:[
            | param |
            param := NeoJSONReader fromString: (self requestContext request fields at: 'request').
            self createResponse: (
                self getList: param
            ) contentType: 'application/xml'.
        ].
        html span id:'url'; with: (req options at:'url').
        html span id:'data'; with: (req options at:'data').
    ].
    html div id:'grid'; style:'width: 1200px; height: 500px; margin-top: -1px;'.

jQuery ajax callback:[]でリクエスト先のコールバックを定義しています
コールバックオブジェクトからリクエスト先URLの情報を取得して、idがdataとurlというspan要素にその情報をセットしています
requestContextからリクエストパラメータを抽出して変数parmにセットしています
createResponseがクライアントに検索結果を返します（getListメソッドが検索を実行）

検索実行

getList: param
    | total records |
    "ここにSQLサーバーからレコードを取得するコードを書きます"
    "変数paramにはw2gridから送られてきた検索条件が入っています"
    "（SQL文の例）'SELECT id,お名前 FROM hoge LIMIT ', (param at: 'limit') asString , ' OFFSET ',(param at: 'offset') asString"
    ^ NeoJSONWriter toString: 
        (Dictionary new
            at: 'status' put: 'success';
            at: 'total' put: total;
            at: 'records' put: records;
            yourself
        )

変数totalには検索にヒットしたレコード数をセットします
変数recordsには今回クライアントに返すレコードの配列をセットします
レコード取得部分は省略します

ライブラリの読み込み

updateRoot: anHtmlRoot
    super updateRoot: anHtmlRoot.   
    anHtmlRoot beHtml5.
    anHtmlRoot stylesheet url: 'path/to/css/w2ui-1.5.min.css'.
    anHtmlRoot javascript url: 'path/to/libs/jquery3.5.1.min.js'.
    anHtmlRoot javascript url: 'path/to/libs/w2ui-1.5.min.js'.

まとめ

w2uiを使えば、たったこれだけの少ないコード記述でグリッドを使ったWEBアプリの作成が可能であることがわかっていただけると思います。