HARD DAY'S NIGHT別館

当サイトへお越しいただきありがとうございます。 実務に生かせるような技術・ライブラリを使った簡単なサンプルを公開してゆきます。

jqGrid マスターグリッドと詳細グリッドの連携サンプル

データベースでマスターテーブルと詳細テーブルのように親レコードと子レコードの関係 を持つテーブルを2つの jqGrid グリッドで表示させ、マスター グリッドの行を選択したときに、 その関連するレコードを詳細グリッドへ表示します。

ポイントとしては、マスター グリッドの選択イベントでレコードIDを取得し、 そのレコードIDをキーとするクエリを実行する url を詳細グリッドへセットし、再読み込みさせます。

このサンプルでは、会社一覧(マスターグリッド)から選択した会社に属すグループ一覧(詳細グリッド)を表示しました。

コード


// グループ設定 - 上位グループの一覧取得
function reloadGroupParent(orgid) {
    var result = true;

    if (orgid && orgid != '') {
        $.ajax({
            type: "GET",
            url: "jqgrid_getgroups_json.php?org_id=" + orgid,
            async: false,
            success: function(response, textStatus, xhr) {
                var grps = new Array();
                grps[''] = '';  // 空き要素の追加
                var items = eval(response);
                $.each(items, function(i, item) {
                    grps[item.group_id] = item.group_name;
                });
                $('#groups').setColProp('group_parent_id', { editoptions: { value: grps } });
            },
            error: function(res, textStatus, xhr) {
                result = false;
            }
        });
    } else {
        result = false;
    }
    return result;
}

jQuery(document).ready(function() {
    $("input:submit, a, button", ".toolbar").button();
    // 会社一覧(マスターグリッド)
    jQuery("#orgs").jqGrid({
        url:'jqgrid_getorgs.php',
        datatype: "xml",
        colNames:['ID', '会社名', '作成日', '更新日'],
        colModel:[ {index:'org_id', name:'org_id', width: '40', align: 'center', editable:false, editoptions:{size:10, readonly:'readonly'}, hidden:true },
                   {index:'org_name', name:'org_name', width: '160', editable:false, editoptions:{size:20} },
                   {index:'created', name:'created', width: '140', align: 'center', editable:false },
                   {index:'modified', name:'modified', width: '140', align: 'center', editable:false },
                 ],
        onSelectRow: function(id) {
            if (id) {
                var row = jQuery("#orgs").jqGrid('getRowData', id);
                if (row) {
                    // グループ一覧の取得URLのセット
                    jQuery("#groups").jqGrid('setGridParam', {url:"jqgrid_getgroups.php?org_id="+row.org_id,page:1});
                    // 上位グループ名一覧の取得
                    reloadGroupParent(row.org_id);
                    // グループ一覧グリッド読み込み
                    jQuery("#groups").trigger('reloadGrid');
                }
            }
        },
        width: 'auto',
        height: 'auto',
        sortname: 'org_id',
        sortorder: "ASC",
        multiselect: false,
        rowNum:10,
        rowList:[10,20,30],
        pager: '#orgspg',
        viewrecords: true,
        caption: '会社一覧',
    });

    // グループ一覧(詳細グリッド)
    jQuery("#groups").jqGrid({
        url:'',
        datatype: "xml",
        colNames:['ID', 'グループ名', '上位グループ名', '会社名', '作成日', '更新日'],
        colModel:[ {index:'group_id', name:'group_id', width: '40', align: 'center', editable:false,
                    editoptions:{size:10, readonly:'readonly'}, hidden:true },
                   {index:'group_name', name:'group_name', width: '160', editable:false,
                    editrules:{ required:true },
                    editoptions:{size:20} },
                   {index:'group_parent_id', name:'group_parent_id', width: '160', editable:false,
                    edittype:"select", editrules:{ required:false, edithidden:false },
                    editoptions:{ value:"" },
                    formatter:'select' },
                   {index:'org_id', name:'org_id', width: '40', align: 'center', hidden: true, editable:false,
                    edittype:"select", editrules:{ required:true, edithidden:true },
                    editoptions:{ value:"" },
                    formatter:'select' },
                   {index:'created', name:'created', width: '140', align: 'center', editable:false },
                   {index:'modified', name:'modified', width: '140', align: 'center', editable:false },
                 ],
        width: 'auto',
        height: 'auto',
        sortname: 'group_id',
        sortorder: "ASC",
        multiselect: false,
        rowNum:10,
        rowList:[10,20,30],
        pager: '#grpspg',
        viewrecords: true,
        caption: 'グループ一覧',
    });
});
        

HTMLコード


<table id="orgs">
</table>
<div id="orgspg">
</div>

<div style="margin:5px;"/>

<table id="groups">
</table>
<div id="grpspg">
</div>