如何使用Ajax返回类型动态添加行，首行位置为json？ 在JQgrid中

Question

步骤1：在表格中填充默认数据列表。

第2步：每隔30分钟之后，我将使用轮询ajax方法DB进行检查并将新列表附加到旧列表中。

无法先添加，排序也不起作用。

Ajax轮询绑定数据正常工作，但追加到最后一行。

请帮我。

表格代码如下

$(document).ready(function () {
    jQuery("#list5").jqGrid({
        url: 'server.php?q=2',
        datatype: "json",
        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: 10,
        rowList: [10, 20, 30],
        pager: '#pager5',
        sortname: 'name',
        autoencode: true,
        loadonce: true,
        sortable: true,
        viewrecords: true,
        sortorder: "desc",
        jsonReader: {
            repeatitems: false,
            id: "ID"
        },
        multiselect: false,
        subGrid: false,

        caption: "Simple data manipulation",
        editurl: "someurl.php"
    }).navGrid("#pager5", {
        edit: false,
        add: false,
        del: false
    });
});

投票ajax方法如下

function poll() {

    var pollOutputJson;
    $.ajax({

        type: "POST",
        url: server.php ? q = 5,
        contentType : "application/json; charset=utf-8",
        dataType: "json",
        async: true,
        cache: false,
        success: function (data) {
            pollOutputJson = data;
            var samGrid = jQuery("#list5");
            var su = samGrid.jqGrid('addRowData', 0, pollOutputJson);
            samGrid.setGridParam({
                rowNum: 15
            }).trigger("reloadGrid");
        },
        error: function (x, e) {
            alert("error occur");
        }
    });
    setTimeout((function (param) {
        return function () {
            poll();
        };
    })(), 180000);
}   

Answer 1

首先，您需要定义输入数据的rowid。 网格具有选项jsonReader: {repeatitems: false, id: "ID"}和name: 'id'的列。 这意味着输入数据的每一项都必须具有唯一的"ID"属性，并且应该具有其他"id"属性。 好像很奇怪

秒，如果您使用addRowData方法添加新行，则应使用rowid作为第一个参数。 在您的情况下，rowid将由输入数据的"ID"属性指定。 因此，您应该使用诸如data.ID之类的data.ID作为addRowData方法的第一个参数。 您发布的代码未包含对来自URL "server.php?q=5"的响应的任何清晰描述。 如果输入数据是数据的一项 ，则代码应为samGrid.jqGrid("addRowData", data.ID, data) 。 另一方面，如果data是具有"ID"作为指定行"ID"的属性的项的数组，则应使用samGrid.jqGrid("addRowData", "ID", data)添加多行。

您必须解决的下一个问题是验证rowid重复项。 让我们"server.php?q=5"返回一项以简化开头的情况。 网格中是否已经存在具有相同ID属性的项目？ 在这种情况下，您必须使用setRowData而不是addRowData来修改/替换现有行，而不是添加行并获取HTML不允许的ID重复。

您的问题中还有一个问题。 您写道，您不想将数据追加到最后一行。 另一方面，您写道要对数据进行排序 。 因此，添加数据的位置应取决于name列的包含（您使用sortname: 'name'选项）。

通过替换网格中的所有数据 ，可能是实现数据自动刷新的最简单方法。 这样，将在服务器上完成可能的合并（修改现有数据），并且服务器可以只返回完整的当前数据集。 因为您使用loadonce: true ，所以在第一次从服务器加载后，网格的datatype将更改为"local" ，因此您可以像处理具有本地数据的网格一样使用网格。 这意味着网格中存在带有项目数组的data参数。 通过使用

var intData = $("#list5").jqGrid("getGridParam", "data");

您将获得对内部数组与数据的引用 。 运用

success: function (data) {
    var $mygrid = $("#list5"),
        allGridParams = $mygrid.jqGrid("getGridParam");
    allGridParams.data = data;
    $mygrid.trigger("reloadGrid", [{current: true}]);
}

因为$("#list5").jqGrid("getGridParam")表示对jqGrid的所有内部参数的引用，所以allGridParams.data = data;行allGridParams.data = data; 将旧的内部数据替换为另一个项目数组。 下一行重新加载本地网格。 这意味着数据将被排序sortname并指定大小的第一页rowNum将被显示。 reloadGrid的选项{current: true}将在重新加载后尝试选择同一行。

原因是您必须修复代码中的语法错误（ url: server.php ? q = 5,所在行url: server.php ? q = 5,应替换为url: "server.php?q=5", ），并且您必须移动这些行

setTimeout((function (param) {
    return function () {
        poll();
    };
})(), 180000);

超出 poll功能的主体。