ajax - jqgrid は jQuery モバイルで使用できますか?

Question

ajax、jQuery mobile、spring mvc を使用してデータベースのデータを表示したいと考えています。

例：コース名の一覧を表に表示。

現在、jqgrid を使用してデータを表示していますが、データを使用しない他の方法はありますか? フォーラムにはたくさんありますが、ほとんどが php を使用していますが、私は spring mvc コントローラーを使用しています。

誰か助けてください..

Answer 1

jqgrid が jquery モバイルで動作するかどうかはわかりませんが、通常の Web アプリでは、関数に設定されたaddJSONDataメソッドjsonReaderとdatatypeプロパティを使用できます。以下にサンプルを示します。

function cfgWixGenApplicationsGrid() {
    var cond = null;
    $("#tblWixGenApplications").jqGrid({
        datatype: function (postdata) {
            var orderByExpr = "";
            if (postdata.sidx != "") {
                orderByExpr = postdata.sidx + " " + postdata.sord;
            }
            getPageList(cond, postdata.page, postdata.rows, orderByExpr, hSuccPageWixGenApplications, hError);
        },
        colNames: ["Id", "Title", "Name", "Version", "MainAssemblyName"
        ],
        colModel: [
            { name: "Id", index: "Id", width: 50, sorttype: "String", editable: false },

            { name: "Title", index: "Title", width: 50, sorttype: "String", editable: true },

            { name: "Name", index: "Name", width: 50, sorttype: "String", editable: true },

            {name: "Version", index: "Version", width: 50, sorttype: "String", editable: true },

            {name: "MainAssemblyName", index: "MainAssemblyName", width: 50, sorttype: "String", editable: true }
        ],
        multiselect: false,
        pager: "#divPagerWixGenApplications",
        viewrecords: true,
        jsonReader: { repeatitems: false, root: "rows", page: "page", records: "records", total: "total" },
        rowNum: 10,
        rowList: [10, 20, 30]
    });
}

私のgetPageList場合はWCFサービスへのajax呼び出しを行います。ここで MVC の URL を呼び出すことができると思います。

hSuccPageWixGenApplications関数は次のaddJSONDataように呼び出します。

function hSuccPageWixGenApplications(pageData) {
    var list = [];
    $.each(pageData.List, function (index, value) {
        if (!value.IsDeleted) {
            list.push(value);
        }
    });
    var grid = $("#tblWixGenApplications")[0];
    var pData = new Object();
    var recCount = pageData.RecordCount == null ? 1000 : pageData.RecordCount;
    pData.page = pageData.PageNo;
    pData.records = recCount;
    pData.rows = list;
    pData.total = recCount / pageData.PageSize;
    grid.addJSONData(pData);
};