如何在jqgrid中填充列表json的列表?这是列表下主网格的列表是子网格的 [英] How to populate list of list json in jqgrid? that is list for main grid under list is for subgrid

问题描述

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

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

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的获取数据，然后如何将列表列表放入子网格?请帮助我.....

推荐答案

有多种方法可以实现您的需求. 答案例如，描述了如何根据每个项目的subData部分填充beforeProcessing内部的userdata .我建议您另外阅读答案，这似乎可以使用户可视化数据.

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.

这篇关于如何在jqgrid中填充列表json的列表?这是列表下主网格的列表是子网格的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！