JqPivot и загрузка данных по ajax

Может ли кто-нибудь опубликовать демонстрацию или фрагмент кода, чтобы показать, как использовать jqpivot и загружать данные с помощью ajax. Спасибо.


person David O.    schedule 12.06.2015    source источник


Ответы (1)


Я бы порекомендовал вам изучить исходный код бесплатного jqGrid. Посмотрите на часть кода. Это выглядит как

jqPivot: function (data, pivotOpt, gridOpt, ajaxOpt) {
    return this.each(function () {
        var $t = this, $self = $($t), $j = $.fn.jqGrid;

        function pivot(data) {
            ...
        }

        if (typeof data === "string") {
            $.ajax($.extend({
                url: data,
                dataType: "json",
                success: function (data) {
                    pivot(jgrid.getAccessor(data, ajaxOpt && ajaxOpt.reader ? ajaxOpt.reader : "rows"));
                }
            }, ajaxOpt || {}));
        } else {
            pivot(data);
        }
    });
}

Вы получите практически сразу ответ на свой вопрос. Вам необходимо указать URL-адрес сервера, который предоставляет входные данные в формате JSON. Никакой другой формат данных ("xml", "jsonp" и т. д.) напрямую не поддерживается, но вы можете использовать параметр ajaxOpt для перезаписи параметров вызова Ajax. Важно дополнительно понимать, что jqGrid использует метод $.jgrid.getAccessor для чтения данных из ответа сервера. Формат данных по умолчанию должен быть следующим:

{
    "rows": ...
}

где значение "rows" должно иметь тот же формат, что и параметр data для jqPivot, если вы используете if без Ajax. Если у вас есть, например

{
    {
        "myRoot": {
            "myData": ...
        }
    }
}

то вы можете использовать 4-й параметр jqPivot (ajaxOpt) как

{ reader: "myRoot.myData" }

Если ответ сервера представляет собой массив данных:

[
    ...
]

или он имеет нестандартную форму, чем вы можете использовать функциональную форму reader. Например

$("#grid").jqGrid("jqPivot", "/myUrl", {
    xDimension: [{...}],
    yDimension: [{...}, ...],
    aggregates: [{...}],
},
{
    iconSet: "fontAwesome",
    cmTemplate: { autoResizable: true, width: 80 },
    shrinkToFit: false,
    autoResizing: { compact: true },
    pager: true,
    rowNum: 20,
    rowList: [5, 10, 20, 100, "10000:All"]
},
{
    reader: function (obj) { return obj; },
    contentType: "application/json; charset=utf-8",
    type: "POST",
    error: function (jqXHR, textStatus, errorThrown) {
        alert('HTTP status code: ' + jqXHR.status + '\n' +
              'textStatus: ' + textStatus + '\n' +
              'errorThrown: ' + errorThrown);
        alert('HTTP message body (jqXHR.responseText): ' + '\n' + jqXHR.responseText);
    }
});

Приведенный выше код указывает читателю функцию, которая напрямую использует все данные ответа (без объекта со свойством rows). Он определяет параметры contentType и type файла jQuery.ajax и функцию обратного вызова error.

Если все параметры кажутся вам слишком сложными, вы можете загрузить данные прямо в свой код, например, с помощью прямого вызова jQuery.ajax и вызова jqPivot после загрузки данных (внутри обратного вызова success или done).

person Oleg    schedule 12.06.2015