简体   繁体   English

如何在轮询ajax时填充子网格,然后在jqgrid中添加现有网格?

[英]How to populate subgrid while polling ajax then apppend existing grid in jqgrid?

I have list of list json using the code and got a proper answer also after i want polling every 6 sec append data from db with same list of list json format its also working fine without subgrid system but am integrating both after i got a parent polling data correct but I am not getting the subgrid data its empty(fetch the data backend for subgrid fine). 我有使用该代码的列表json列表,并且在我想轮询每6秒从db中添加具有列表json格式的相同列表的数据后,也得到了正确的答案,它也可以在没有子网格系统的情况下正常工作,但是在我得到父级轮询之后都将两者集成数据正确,但我没有将子网格数据清空(获取数据后端以获取子网格罚款)。

Second time UPDATED CODE after Oleg comments I have attached the code please find it Oleg评论后第二次更新代码我已附上代码,请找到它

    var $grid = $("#list11"),
    mainGridPrefix = "s_";

jQuery("#list11").jqGrid({
    url: 'server.php?getList',
    datatype: "json",
    data: firstListJson,
    height: 200,
    colNames: ['Inv No', 'Date', 'Client'],
    colModel: [{
        name: 'id',
        index: 'id',
        width: 55
    }, {
        name: 'invdate',
        index: 'invdate',
        width: 90
    }, {
        name: 'name',
        index: 'name',
        width: 100
    }],
    rowNum: 10,
    gridview: true,
    rowList: [10, 20, 30],
    pager: '#pager11',
    loadonce: false,
    sortname: 'id',
    viewrecords: true,
    idPrefix: mainGridPrefix,
    sortorder: "desc",
    multiselect: false,
    caption: "Subgrid With polling",
    jsonReader: {
        repeatitems: false,
        id: 'id'
    },
    beforeProcessing: function(data) {

        var rows = data,
            l = data.length,
            i, item, subgrids = {};

        for (i = 0; i < l; i++) {
            item = rows[i];
            if (item.subGridData) {
                subgrids[item.id] = item.subGridData;
            }
        }
        //alert(subgrids);
        data.userdata = subgrids;
    },
    subGrid: true,
    subGridRowExpanded: function(subgridDivId, rowId) {


        var subGridID = $("#" + subgridDivId + "_t");
        var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"),
            pureRowId = $.jgrid.stripPref(mainGridPrefix, rowId),
            subgrids = $(this).jqGrid("getGridParam", "userData");

        $subgrid.appendTo("#" + $.jgrid.jqID(subgridDivId));
        $subgrid.jqGrid({
            datatype: "local",
            data: subgrids[pureRowId],
            colNames: ['Emp ID', 'Name', 'Age'],
            colModel: [{
                name: 'id',
                index: 'id',
                width: 55
            }, {
                name: 'name',
                index: 'name',
                width: 90
            }, {
                name: 'age',
                index: 'age',
                width: 100
            }],
            rowNum: 10,
            rowList: [10, 20, 30],
            sortname: 'id',
            viewrecords: true,
            sortorder: "desc",
            multiselect: false

        });
    }
});
jQuery("#list11").jqGrid('navGrid', '#pager11', {
    add: false,
    edit: false,
    del: false
});





Below code
for json list of list



var firstListJson = [{
    "id": "01",
    "invdate": "2014-07-24",
    "name": "John",
    "subGridData": [{
        "id": "01",
        "name": "Krishna",
        "age": "28"
    }, {
        "id": "01",
        "name": "Jai",
        "age": "28"
    }, {
        "id": "01",
        "name": "Suresh",
        "age": "28"
    }]
}, {
    "id": "02",
    "invdate": "2014-07-24",
    "name": "Hill",
    "subGridData": [{
        "id": "01",
        "name": "Mani",
        "age": "28"
    }, {
        "id": "01",
        "name": "Raj",
        "age": "28"
    }, {
        "id": "01",
        "name": "Main",
        "age": "28"
    }]
}];

Below code
for polling code

function pollData() {
    var pollingListUrl = 'server.php?getPollList';
    $.ajax({
        type: "POST",
        url: pollingListUrl,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        async: true,
        cache: false,
        success: function(data) {
            var $mygrid = $("#list11");
            $mygrid.jqGrid("addRowData", "id", data);
            $mygrid.trigger("reloadGrid", [{
                current: true
            }]);
        },
        error: function(x, e) {
            alert("error occur");
        }
    });
}

I see 3 errors in your code: 我在您的代码中看到3个错误:

  1. you use datatype: "xml" , but the code of beforeProcessing are oriented on the code where data is object instead of XML-Document. 您使用datatype: "xml" ,但是beforeProcessing的代码基于data对象而不是XML-Document的代码。

    By the way I strictly recommend you to add gridview: true in both grid and subgrid to improve the performance. 顺便说一句,我严格建议您在grid和subgrid中添加gridview: true来提高性能。

  2. You use $mygrid.jqGrid("addRowData", "ID", data); 您使用$mygrid.jqGrid("addRowData", "ID", data); but the grid don't contain the column "ID" . 但网格不包含"ID"列。 You should use "id" instead. 您应该改用"id"

  3. You use unneeded " in subGridData part of your data. Even colors in the code (I mean prettify highlighting) which you posted shows you the same. 您可以在数据的subGridData部分中使用不需要的" 。即使发布的代码中的颜色(我的意思是美化突出显示)也可以显示相同的颜色。

Instead of 代替

var firstListJson=[
    {"id":"01","invdate":"2014-07-24","name":"John",
        "subGridData":"[{
                "id":"01","name":"Krishna","age":"28"},
                {"id":"01","name":"Jai","age":"28"},
                {"id":"01","name":"Suresh","age":"28"}
            ]"},
    {"id":"02","invdate":"2014-07-24","name":"Hill",
        "subGridData":"[{
                "id":"01","name":"Mani","age":"28"},
                {"id":"01","name":"Raj","age":"28"},
                {"id":"01","name":"Main","age":"28"}
            ]"}
];

one should use 一个应该使用

var firstListJson=[
    {"id":"01","invdate":"2014-07-24","name":"John",
        "subGridData": [{
               "id":"01","name":"Krishna","age":"28"},
               {"id":"01","name":"Jai","age":"28"},
               {"id":"01","name":"Suresh","age":"28"}
            ]},
    {"id":"02","invdate":"2014-07-24","name":"Hill",
        "subGridData": [{
                "id":"01","name":"Mani","age":"28"},
               {"id":"01","name":"Raj","age":"28"},
               {"id":"01","name":"Main","age":"28"}
            ]}
];

In the case the value of subGridData will be object (array of items) instead of string. 在这种情况下, subGridData的值将是对象(项目数组)而不是字符串。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM