2

我是 jqgrid 的新手，最后我设置了一个网格。假设我需要设置 jsonReader 以便网格知道在 json 返回中从哪里获取我的网格数据。但是我尝试了几天后得到了空白单元格。

这是我的网格：

jQuery("#list48").jqGrid({
            url: 'dbtest.aspx/get_offsite_history2',
            datatype: "json",
            mtype: 'POST',
            ajaxGridOptions: { contentType: "application/json" },
            serializeGridData: function(postData) {
                return JSON.stringify(postData);
            },
            jsonReader: {
                root: function(obj) { alert(JSON.stringify(obj.d)); return obj.d; },
                repeatitems: false
            },
            height: 'auto',
            rowNum: 30,
            rowList: [10, 20, 30],
            colNames: ['name', 'start_date', 'duration', 'offsite_cat'],
            colModel: [
                          { name: 'name', index: 'name', width: 80, align: 'left', editable: true, edittype: 'text' },
                          { name: 'start_date', index: 'start_date', width: 120, align: 'left', editable: true, edittype: 'text' },
                          { name: 'duration', index: 'duration', width: 120, align: 'left', editable: true, edittype: 'text' },
                          { name: 'offsite_cat', index: 'offsite_cat', width: 120, align: 'left', editable: true, edittype: 'text'}],
            pager: "#plist48",
            viewrecords: true,
            sortname: 'name',
            caption: "Grouping Array Data",
            gridview: true
        });

这是从 url dbtest.aspx/get_offsite_history2 返回的服务器：

{"d":"[{\"name\":\"A\",\"start_date\":\"B\",\"duration\":\"C\",\"offsite_cat\":\"D\"}]"}

我想通过设置“root：'d'”来获得结果，但我得到了 64 个空白行......

寻找评论...非常感谢

4

2 回答 2

3

您的问题的原因是您的服务器代码中的错误。您对 JSON 进行了两次序列化。在d对服务器响应的属性进行反序列化后，您仍然会得到 JSON 字符串 (!!!) 而不是对象。典型的错误是JavaScriptSerializer.Serialize在 web 方法中手动使用。应该返回对象本身而不是作为序列化结果的字符串。

在不修改当前服务器代码的情况下，您可以通过使用

jsonReader: {
    root: function (obj) {
        alert(typeof obj.d === "string" ? obj.d : JSON.stringify(obj.d));
        return typeof obj.d === "string" ? $.parseJSON(obj.d) : obj.d;
    },
    repeatitems: false,
    page: function () { return 1; },
    total: function () { return 1; },
    records: function (obj) {
        return typeof obj.d === "string" ? $.parseJSON(obj.d).length : obj.length;
    }
}

或者（如果你使用loadonce: true）只是

jsonReader: {
    root: function (obj) {
        return typeof obj.d === "string" ? $.parseJSON(obj.d) : obj.d;
    },
    repeatitems: false
}

因为您当前的服务器代码似乎没有实现数据分页，所以您应该将其增加到rowNum足够大的值，例如rowNum: 10000或 使用loadonce: true.

更新：你可以在这里找到修改后的演示。它显示

在此处输入图像描述

消息后alert。

于 2013-02-07T10:49:52.443 回答
0

我认为问题在于您返回的 json 数据的结构。

下面是我使用的一个：

{   "page":1,
    "rows":[{"id":"1","cell":["1","1","Row 1","3","9",""]},
            {"id":"2","cell":["2","2","Row 2","2","1",""]},
            {"id":"3","cell":["3","4","Row 3","2","0",""]}],
    "records":3,
    "total":1
}

您可能需要为 id 添加 colModel 以唯一标识每一行。

例如

      colNames: ['id', 'name', 'start_date', 'duration', 'offsite_cat'],
        colModel: [
                      { name: 'id', index: 'id', hidden: true },
                      { name: 'name', index: 'name', width: 80, align: 'left', editable: true, edittype: 'text' },
                      { name: 'start_date', index: 'start_date', width: 120, align: 'left', editable: true, edittype: 'text' },
                      { name: 'duration', index: 'duration', width: 120, align: 'left', editable: true, edittype: 'text' },
                      { name: 'offsite_cat', index: 'offsite_cat', width: 120, align: 'left', editable: true, edittype: 'text'}],

希望有帮助。

于 2013-02-07T10:22:42.210 回答