在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可以定位这两个字段.同时其他两个列的值(即日期"和数字"位于"sub"下)，即使是那些列，我也无法使用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(请参阅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:[{"":"", ...}]更改为sub:{"":"", ...}?您想用作行标识符吗? student_name?然后将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屋！