如何在jqgrid中填充列表json列表?列表下的主网格列表是针对子网格的

时间:2014-08-13 11:02:28

标签: jquery jqgrid jqgrid-php

如何在jqgrid中填充列表json列表?列表下的主网格列表是针对子网格的,

Jqgrid代码如下,

    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
});

列表json的示例列表如下

[{
    "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给出了基于url的抓取数据然后如何将列表列表放到子网格中?请帮帮我.....

1 个答案:

答案 0 :(得分:1)

有多种方法可以实现您的要求。例如,The answer描述了如何根据每个项目的userdata部分填充beforeProcessing subData内部{{1}}。我建议您另外阅读the answer,这似乎可以使您的数据可视化对用户来说更加舒适。