Как динамически добавлять строки, используя возвращаемый тип 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 в качестве первого параметра addRowData метод. Код, который вы разместили, не содержит четкого описания ответа от URL "server.php?q=5", Если входные данные представляют собой один элемент данных, то код должен быть samGrid.jqGrid("addRowData", data.ID, data), С другой стороны, если data массив элементов, имеющих "ID" в качестве свойства, которое определяет rowid, то вы должны использовать samGrid.jqGrid("addRowData", "ID", data) добавить несколько строк.

Следующая проблема, которую вам нужно решить, это проверка дубликатов строк. Позволь нам "server.php?q=5" возвращает один элемент, чтобы упростить ситуацию в начале. Возможно ли, что элемент с таким же свойством ID уже существует в сетке? В случае, если вы должны использовать setRowData вместо addRowData изменить / заменить существующую строку вместо добавления строки и получения дубликатов идентификаторов, что недопустимо в HTML.

Еще одна проблема в вашем вопросе. Вы написали, что не хотите добавлять данные в последнюю строку. С другой стороны, вы написали, что хотите отсортировать данные. Таким образом, положение добавленных данных должно зависеть от содержания 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; заменить старые внутренние данные на другой массив элементов. Следующая строка перезагрузит локальную сетку. Это означает, что данные будут отсортированы по sortname и первая страница размером, указанным rowNum будет отображаться. Опция {current: true} из reloadGrid постарается выбрать ту же строку после перезагрузки, которая была выбрана.

Конечно, вы должны исправить синтаксическую ошибку в вашем коде (строка url: server.php ? q = 5, следует заменить на url: "server.php?q=5",) и вы должны переместить линии

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

вне тела poll функция.