在 JQGrid 中映射 JSON 数据 [英] Mapping JSON data in JQGrid

问题描述

我正在使用 jqGrid 3.6.4 和 jquery 1.4.2 .在我的示例中，我得到以下 json 数据格式 &我想将这些 json 数据映射到 jqgrid 的行中

I am using jqGrid 3.6.4 and a jquery 1.4.2 . in my sample i am getting following json data format & i want to map these json data into rows of a jqgrid

{
"page": "1",
"total": 1,
"records": "6",
"rows": [
    {
        "head": {
            "student_name": "Mr S. Jack ",
            "year": 2007

        },
        "sub": [
            {
                "course_description": "Math ",
                "date": "22-04-2010",
                "number": 1,
                "time_of_add": "2:00",
                "day": "today"
            }
        ]

      }
]
}

我的jqgrid代码如下

my jqgrid code is as follows

jQuery("#"+subgrid_table_id).jqGrid({
url:"http://localhost/stud/beta/web/GetStud.php?sid="+sid,
dtatype: "json",
colNames: ['Stud Name','Year','Date'.'Number'],
colModel: [ {name:'Stud Name',index:'student_name', width:100, jsonmap:"student_name"},
{name:'Year',index:'year', width:100, jsonmap:"year"},
{name:'Date',index:'date', width:100, jsonmap:"date"},
{name:'Number',index:'number', width:100, jsonmap:"number"}
],
height:'100%',
jsonReader: { repeatitems : false, root:"head" },
});

所以现在问题在于我的数据，即 student_name 和 year 在 "head" 下，jqgrid 可以定位这两个字段.同时其他两列值，即日期和数字位于子"下，即使是那些列我也无法用 jqgrid 映射它

So now the problem is as my data i.e. student_name and year is under "head" , the jqgrid is enable to locate these two fields. at the same time other two column values i.e. Date and Number lies under "sub" and even those columns i am not be able to map it with jqgrid

请帮助我如何在 JQGrid 中定位这些属性.

so kindly help me how to located these attributes in JQGrid.

谢谢

推荐答案

首先发布的代码有一些错误，例如 dtatype: "json" 而不是 datatype: "json"."},});" 而不是 "}});" 在代码的末尾和 colNames: ['Stud Name','Year','Date'.'Number'] 而不是 colNames: ['Stud Name','Year','Date','Number'].修复这个明显的错误后，您需要更改 jsonmap 值.这是你的主要问题.固定代码如下所示:

First of all the code posted has some errors like dtatype: "json" instead of datatype: "json". "},});" instead of "}});" at the end of code and colNames: ['Stud Name','Year','Date'.'Number'] instead of colNames: ['Stud Name','Year','Date','Number']. After fixing this clear bugs you need change jsonmap values. This was your main question. The fixed code will be look like following:

jQuery("#"+subgrid_table_id).jqGrid({
    ...
    datatype: 'json',
    colNames: ['Stud Name','Year','Date'.'Number'],
    colModel: [
        {name:'student_name', width:100, jsonmap:"head.student_name"},
        {name:'year', width:100, jsonmap:"head.year"},
        {name:'date', width:100, jsonmap:"sub.0.date"},
        {name:'number', width:100, jsonmap:"sub.0.number"}
    ],
    jsonReader: { repeatitems:false, root:"rows" }
});

您必须将 root 修复为 "rows" 并在 JSON 点表示法 中使用 jsonmap(参见 http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#json_dot_notation).我使用了一些奇怪的符号，例如sub.0.number"，因为 JavaScript 中的 sub.0.number 与 sub[0].number<相同/代码>.现在可以了.

You have to fix root to "rows" and use jsonmap in JSON dot notation (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#json_dot_notation). I use a little strange notation like "sub.0.number" because sub.0.number in JavaScript is the same as sub[0].number. It works now.

我建议您再考虑一下您收到的 JSON 数据的结构.(请参阅我之前对您的问题的评论):子"元素真的是一个始终只有一个元素的数组，还是您想使用子网格?可能数据应该从 sub:[{"":"", ...}] 更改为 sub:{"":"", ...}?你想用什么作为rowid?学生姓名?然后将 id: "head.student_name" 添加到 jsonReader 定义或添加 key: true 属性到列 student_name 的定义.或者您忘记将其包含在 JSON 数据中?

I recommend you think one more about the structure of JSON data which you receive. (see my previous comments to you question): Is "sub" element is really an array with always one element or you want to use subgrids? Probably the data should be changed from sub:[{"":"", ...}] to sub:{"":"", ...}? What do you want to use as a rowid? student_name? Then add id: "head.student_name" to the jsonReader definition or add key: true property to the definition of the column student_name. Or you forget to include it in the JSON data?

最后一个建议.如果你打开 http://trirand.com/blog/jqgrid/jqgrid.html并在树的左侧打开分支数据映射"数据优化"，您将看到一个示例，其中仅使用数组而不是 JSON 中的命名元素.此类数据将具有最小大小，并且可以更快地从服务器传输到客户端.相反，您的数据有一些您根本不使用的字段(例如course_description").所以如果您可以对服务器进行任何更改，请尝试优化数据传输速率.

And the last suggestion. If you open http://trirand.com/blog/jqgrid/jqgrid.html and opens on the left side of tree the branch "Data Mapping" "Data optimization" you will see an example where on use only array instead of named elements in JSON. Such data will be have minimum size and can be transferred more quickly from server to client. You data instead have some fields (like "course_description") which you don't use at all. So if you can make any changes in the server code try to optimize the data transfer rate.

这篇关于在 JQGrid 中映射 JSON 数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！