How to populate list of list json in jqgrid? that

2019-08-29 07:38发布

问题:

How to populate list of list json in jqgrid? that is list for main grid under list is for subgrid,

Jqgrid code as below,

    jQuery("#sg1").jqGrid({
    url: 'server.php?q=1',
    datatype: "json",
    height: 190,
    colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],
    colModel: [{
        name: 'id',
        index: 'id',
        width: 55
    }, {
        name: 'invdate',
        index: 'invdate',
        width: 90
    }, {
        name: 'name',
        index: 'name',
        width: 100
    }, {
        name: 'amount',
        index: 'amount',
        width: 80,
        align: "right"
    }, {
        name: 'tax',
        index: 'tax',
        width: 80,
        align: "right"
    }, {
        name: 'total',
        index: 'total',
        width: 80,
        align: "right"
    }, {
        name: 'note',
        index: 'note',
        width: 150,
        sortable: false
    }],
    rowNum: 8,
    rowList: [8, 10, 20, 30],
    pager: '#psg1',
    sortname: 'id',
    viewrecords: true,
    sortorder: "desc",
    multiselect: false,
    subGrid: true,
    caption: "Custom Icons in Subgrid", // define the icons in subgrid 
    subGridOptions: {
        "plusicon": "ui-icon-triangle-1-e",
        "minusicon": "ui-icon-triangle-1-s",
        "openicon": "ui-icon-arrowreturn-1-e"
    },
    subGridRowExpanded: function(subgrid_id, row_id) {
        var subgrid_table_id, pager_id;
        subgrid_table_id = subgrid_id + "_t";
        pager_id = "p_" + subgrid_table_id;
        $("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table><div id='" + pager_id + "' class='scroll'></div>");
        jQuery("#" + subgrid_table_id).jqGrid({
            url: "subgrid.php?q=2&id=" + row_id,
            datatype: "json",
            colNames: ['No', 'Item', 'Qty', 'Unit', 'Line Total'],
            colModel: [{
                name: "num",
                index: "num",
                width: 80,
                key: true
            }, {
                name: "item",
                index: "item",
                width: 130
            }, {
                name: "qty",
                index: "qty",
                width: 70,
                align: "right"
            }, {
                name: "unit",
                index: "unit",
                width: 70,
                align: "right"
            }, {
                name: "total",
                index: "total",
                width: 70,
                align: "right",
                sortable: false
            }],
            rowNum: 20,
            pager: pager_id,
            sortname: 'num',
            sortorder: "asc",
            height: '100%'
        });
        jQuery("#" + subgrid_table_id).jqGrid('navGrid', "#" + pager_id, {
            edit: false,
            add: false,
            del: false
        })
    }
});
jQuery("#sg1").jqGrid('navGrid', '#psg1', {
    add: false,
    edit: false,
    del: false
});

Sample list of list json as below

[{
    "id": "01",
    "name": "AA",
    "age": "29",
    "subData": [{
        "id": "01",
        "name": "AA",
        "age": "29"
    }, {
        "id": "02",
        "name": "BB",
        "age": "30"
    }, {
        "id": "03",
        "name": "CC",
        "age": "31"
    }, {
        "id": "04",
        "name": "DD",
        "age": "32"
    }]
}, {
    "id": "02",
    "name": "BB",
    "age": "30",
    "subData": [{
        "id": "01",
        "name": "AA",
        "age": "29"
    }, {
        "id": "02",
        "name": "BB",
        "age": "30"
    }, {
        "id": "03",
        "name": "CC",
        "age": "31"
    }, {
        "id": "04",
        "name": "DD",
        "age": "32"
    }]
}, {
    "id": "03",
    "name": "CC",
    "age": "31",
    "subData": [{
        "id": "01",
        "name": "AA",
        "age": "29"
    }, {
        "id": "02",
        "name": "BB",
        "age": "30"
    }, {
        "id": "03",
        "name": "CC",
        "age": "31"
    }, {
        "id": "04",
        "name": "DD",
        "age": "32"
    }]
}, {
    "id": "04",
    "name": "DD",
    "age": "32",
    "subData": [{
        "id": "01",
        "name": "AA",
        "age": "29"
    }, {
        "id": "02",
        "name": "BB",
        "age": "30"
    }, {
        "id": "03",
        "name": "CC",
        "age": "31"
    }, {
        "id": "04",
        "name": "DD",
        "age": "32"
    }]
}]

Jqgrid gave as url based fetch the data then how to put list of list to subgrid? please help me.....

回答1:

There are different ways to implement your requirements. The answer for example describes how one can fill userdata inside of beforeProcessing based on subData part of every item. I would recommend you additionally to read the answer which seems could makes visualization of your data more comfortable for the user.