jqGrid応用テクニック集：セレクト化・一括削除・年度切替の実装例

はじめに

jqGridを業務システムで使うときに役立つ「ピンポイントな操作コード」を紹介します。
今回は、Ajaxで取得したマスタデータをセレクト化する方法や、複数行削除、年度切替の処理など jqGridらしい応用機能 をピックアップしました。

javascript

### 1. Ajaxで取得したマスタをセレクト化する
// 勘定科目マスタを colModel に反映
var grid = $('#list');
var colModel = grid.jqGrid('getGridParam', 'colModel');

// 借方・貸方科目の列をセレクトボックスに変更
colModel[4].editoptions = { value: obj };
colModel[6].editoptions = { value: obj };

grid.jqGrid('setGridParam', { colModel: colModel, datatype: "json" });
grid.trigger('reloadGrid');

ポイント：

• colModel[n].editoptions = { value: obj } でセレクト化

• formatter: "select" を組み合わせれば表示もセレクト化される

2. 税区分・税率のセレクト化

javascript

const grid = $('#list');
const colModel = grid.jqGrid('getGridParam', 'colModel');

// 税区分と税率を動的セレクトに
colModel[9].editoptions = { value: taxCategoryOptions };
colModel[9].formatter = "select";

colModel[10].editoptions = { value: taxRateOptions };
colModel[10].formatter = "select";

grid.jqGrid('setGridParam', { colModel: colModel }).trigger('reloadGrid');

ポイント：

• Ajaxで取得したデータを value にそのまま渡せる

• formatter: "select" を必ずセットしないと表示されないことがある

3. 選択行の一括削除

javascript

var selarrow = $('#list').getGridParam('selarrrow');  // 選択行のID配列

for (var i = 0; i < selarrow.length; i++) {
    $('#list').delRowData(selarrow[i]);  // グリッドから削除
}

ポイント：

• selarrrow で複数行IDが取れる

• 削除後にサーバー側と同期するのを忘れないこと

4. 年度切替でデータ再読込

javascript

$("#list").jqGrid("setGridParam", {
    datatype: "json",
    serializeGridData: function(postData) {
        postData['year'] = year;  // 年度を追加
        return postData;
    },
}).trigger("reloadGrid");

ポイント：

• serializeGridData を使えばリクエストに任意のパラメータを追加できる

• trigger("reloadGrid") で即時反映

まとめ

jqGridはちょっとした工夫で、

• 外部マスタ連動セレクト

• 複数行削除

• 条件付きデータ再読込

といった 実務レベルの便利機能 を実現できます。

👉 さらに実際の会計システム（仕訳帳）の形に落とし込んだ例は、こちらで解説しています：
『弥生やfreeeはもういらない？誰でもできるjqGrid を使った仕訳帳システムの作り方』（有料記事）