Как вы модифицируете данные, возвращаемые вызовом AJAX, перед тем, как они будут отображены в jqGrid?

Question

Фон

Я получил несколько незавершенных работ от другого разработчика, связанных с отображением результатов поиска.Его подход состоял в том, чтобы отобразить результаты в таблице HTML, используя встроенные Javascript и jQuery, следующим образом.

Я пытаюсь закончить работу, но предпочел бы писать меньшекод и использовать jqGrid, потому что он включает в себя функции сортировки, а также получить код более аккуратным.Получить jqGrid для отображения результатов легко, но получить переключатели в пустом столбце сложнее, чем я думал.

Версия jqGrid в приложении - 3.7.2.Сетка должна иметь переключатели слева для выбора, чтобы поддерживать согласованность с остальной частью приложения.

Где я застрял

Там неткажется, способ иметь несвязанный столбец в jqGrid.То есть каждый столбец, кажется, нуждается в поле в базовых данных.Если у вас нет фиктивного поля, тогда данные строки и заголовки столбцов будут смещены.

Я обнаружил пример (см. Редактирование строк -> Пользовательское редактирование), который возвращает JSONс фиктивным полем в данных, а затем изменяет данные сетки для вставки кнопок.

Я предпочитаю, чтобы там не было фиктивных данных, потому что кажется грязным :) Я быкак мой JSON, чтобы включать только данные, необходимые для представления результатов поиска.Поэтому я подумал, что было бы лучше добавить вместо этого фиктивное поле в код скрипта, чтобы сохранить код на стороне сервера в чистоте.

Я пытаюсь изменить данные, возвращаемые вызовом AJAXдо того, как jqGrid сделает это.Я пытался подключиться к событию loadComplete, но когда я изменяю данные, они появляются после того, как они уже отрисованы.

Я также пытался подключиться к событию success на ajaxGridOptionsполе options, но это, кажется, полностью переопределяет событие, и jqGrid не отображает данные.

Как я могу изменить данные, возвращенные из вызова веб-службы, до того, как jqGrid отобразит их?*

Answer 1

Мне удалось выяснить, как это сделать.Вместо того, чтобы jqGrid автоматически загружать данные, нужно вручную выполнить запрос и затем загрузить его с помощью вызова addJSONData.

Мой jqGrid определен в разметке следующим образом:

<fieldset>            
    <div style="display:none" class="searchResults">
        <table id="eventSearchDialog-results">
        </table>
        <div id="eventSearchDialog-pager">
        </div>
    </div>
</fieldset>

Я инициализирую сетку следующим кодом:

// Initialize the grid
this._searchResults = this._dialog.find("#eventSearchDialog-results");
this._searchResults.jqGrid(
{
    datatype: "local",
    colNames: ['', 'Event Name', 'Event Type', 'Start Date', 'End Date', 'Location', 'Event Country', 'Sports'],
    colModel: [
                { name: 'selector', index: 'selector', width: 30 },
                    { name: 'EventName', index: 'EventName', formatter: jqgridCellFormatter, width: 150 },
                { name: 'EventType', index: 'EventType', formatter: jqgridCellFormatter, width: 120 },
                { name: 'StartDate', index: 'StartDate', formatter: jqgridCellFormatter, width: 100 },
                { name: 'EndDate', index: 'EndDate', formatter: jqgridCellFormatter, width: 100 },
                { name: 'Location', index: 'Location', formatter: jqgridCellFormatter, width: 100 },
                { name: 'EventCountry', index: 'EventCountry', formatter: jqgridCellFormatter, width: 100 },
                { name: 'Sports', index: 'Sports', formatter: jqgridCellFormatter }
                    ],
    rowNum: 10,
    rowList: [10, 20, 30],
    pager: this._dialog.find("#eventSearchDialog-pager"),
    pginput: true,
    sortname: 'EventName',
    viewrecords: true,
    sortorder: "asc",
    hidegrid: false,
    height: "auto",
    shrinkToFit: true,
    width: 630,
    jsonReader:
                    {
                        page: "pageIndex",
                        total: "pageCount",
                        records: "recordCount",
                        root: "rows",
                        repeatitems: true
                    },
    prmNames:
    {
        page: "pageIndex",
        rows: "pageSize",
        sort: "sortField",
        order: "sortOrder"
    }
}
);
// Set the data type to JSON, we don't do this in the options because it will cause a request to occur,
// but we do need it to be set to JSON so that the calls to addJSONData work later.
this._searchResults.jqGrid("setGridParam", { datatype: "json" });

Я загружаю сетку с данными из вызова jQuery $.ajax(), а в обработчике событий success я дополняюданные, а затем загрузить их в jqGrid, используя addJSONData.

Мой JSON выглядит так:

{
    "pageCount":1,
    "pageIndex":1,
    "recordCount":2,
    "rows":
    [
        {"id":3, "cell":["Stevens Event 2", "Commonwealth Games", "03/05/2011", "16/05/2011", "sersdfweqr", "New Zealand", ["Archery"]]},
        {"id":4, "cell":["Test - multiple sports", "Other", "01/05/2011", "30/06/2011", "Kobe", "Japan", ["Judo", "Karate", "Motor Sport", "Motorcycling", "Taekwondo"]]}
    ]
}

Это мой обработчик success:

success: function (data, textStatus, xhr) {
    // Pad data for our radio button column that has no corresponding field in the data
    for (var counter = 0; counter < data.rows.length; counter++) {
        data.rows[counter].cell.splice(0, 0, null);
    }

    thisEventSearchDialog._searchResults[0].addJSONData(data);
    thisEventSearchDialog._createRadioButtons();
},

JqGrid, содержащий столбец переключателей, для которых нужны фиктивные данные.Без фиктивных данных данные строки не соответствовали заголовкам.

Answer 2

Это старый вопрос, и он может быть неприменим к упомянутой версии jqGrid (3.7.2), но, похоже, это связано с этим: Как «предварительно обработать» ответ ajax перед отображением в jqGrid , и если я прав (насчет того, чтобы быть связанным), то правильный ответ - параметр / функция dataFilter параметра ajaxGridOption. У меня это сработало.

Answer 3

Решение в моем предыдущем ответе сломало сортировку, поэтому я нашел другое решение.

Поскольку jqGrid не предоставляет ловушки для удобного изменения данных, необходимо было откатиться на уровень и подключиться кJQuery.Я заменил метод $.ajax() своим собственным.Сначала он проверяет, была ли операция инициирована jqGrid, и, если это так, он дополняет данные, вызывает оригинальный обработчик jqGrid success, а затем добавляет переключатели в сетку.Сортировка по-прежнему работает, тип данных по-прежнему json, и нет никаких ручных вызовов для addJSONData, и я все еще могу достичь того, что мне было нужно из предыдущего решения.По сути, создание этого небольшого взлома jQuery позволяет мне обходиться без всяких взломов jqGrid, что намного сложнее.

// Set up $.ajax() hook for modifying the data before jqGrid receives it
if (!this._ajaxOverridden) {
    var oldAjax = $.ajax;
    $.ajax = function (options) {
        // Check whether this call is from jqGrid to our web service
        if (options.url == config.eventSearchUrl && options.success) {
            // Wrap the success event handler with our own handler that pads the data and creates the radio buttons
            var oldSuccess = options.success;
            options.success = function () {
                thisEventSearchDialog._padData(arguments[0]);
                oldSuccess.apply(this, arguments);
                thisEventSearchDialog._createRadioButtons();
            }
        }
        oldAjax(options);
    };
    this._ajaxOverridden = true;
}