Ajax的JqPivot和数据加载 [英] JqPivot and data load by ajax

问题描述

有人可以发布演示或一段代码来举例说明如何使用jqpivot以及如何使用ajax加载数据. 谢谢.

Can someone post a demo or a piece of code, to exemplify how to use jqpivot and loading data using ajax. Thank you.

推荐答案

我建议您检查免费jqGrid的源代码.查看该部分的代码.看起来像

I would recommend you to examine the source code of free jqGrid. Look at the part of the code. It looks like

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方法从服务器响应中读取数据.默认数据格式应为以下格式:

You will get practically directly the answer on your question. You need specify the URL to the server which provides the input data in JSON form. No other data format is supported ("xml", "jsonp" and so on) directly, but you can use ajaxOpt parameter to overwrite the parameters of the Ajax call. It's important to understand additionally, that jqGrid uses $.jgrid.getAccessor method to read the data from the server response. The default data format should be the following:

{
    "rows": ...
}

如果使用if without Ajax，则"rows"的值应与jqPivot的data参数具有相同的格式.例如，如果有

where the value of "rows" should have the same format as the data parameter of jqPivot if you use if without Ajax. If you have for example

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

然后可以将jqPivot(ajaxOpt)的第4个参数用作

then you can use 4-th parameter of jqPivot (ajaxOpt) as

{ reader: "myRoot.myData" }

如果来自服务器的响应是数据数组:

If the response from the server is array of data:

[
    ...
]

或它具有某些非标准形式，而不是您可以使用reader的功能形式.例如

or it have some non-standard form than you can use function form of reader. For example

$("#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属性的对象).它指定 jQuery.ajax 的contentType和type参数以及回调函数error.

The above code specify the reader at the function which use all the response data directly (without object with rows property). It specifies contentType and type parameter of the jQuery.ajax and the callback function error.

如果所有选项似乎都太难了，您可以直接调用jQuery.ajax来直接在代码中加载数据，例如，在数据加载后调用jqPivot (在success回调或done).

If all the options seems you too difficult you can load the data directy in your code with direct call of jQuery.ajax for example and the call jqPivot after the data are loaded (inside of success callback or done).

这篇关于Ajax的JqPivot和数据加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！