简单的json读入jqgrid

时间:2013-12-26 04:10:22

标签: json jqgrid

我正在尝试将以下json数据读入jqgrid。

var myStr =  {  "version" : 2,
        "query" : "java",
        "location" : "suwanee, ga",
        "dupefilter" : true,
        "highlight" : true,
        "radius" : 25,
        "start" : 1,
        "end" : 10,
        "totalResults" : 826,
        "pageNumber" : 0,
        "results" : [

                       {
                        "jobtitle" : "Software Development Team Lead Job",
                        "company" : "GM",
                        "city" : "Roswell",
                        "state" : "GA",
                        "country" : "US",
                        "formattedLocation" : "Roswell, GA",
                        "source" : "General Motors",
                        "date" : "Tue, 24 Dec 2013 08:21:00 GMT",
                        "snippet" : "principles, techniques and best practices. - Demonstrated expert knowledge in <b>Java<\/b> and\/or .NET. - Demonstrated expert knowledge in building, debugging and... ",
                        "url" : "http:\/\/www.indeed.com\/viewjob?jk=778874434418454d&qd=TOIxqcl1xBNMbg2vKTNLcp5QUXHMUbDABF-wK7BxUqwiE8mPbZ2XU9t5kjdQrB6FlsFPgK13DhJYpBc84nTJQYrzCHZtERhjBNeGyZxL6jI&indpubnum=4675158811138546&atk=18cme6tj519rh3c6",
                        "onmousedown" : "indeed_clk(this, '1050');",
                        "latitude" : 34.021976,
                        "longitude" : -84.35714,
                        "jobkey" : "778874434418454d",
                        "sponsored" : false,
                        "expired" : false,
                        "formattedLocationFull" : "Roswell, GA",
                        "formattedRelativeTime" : "1 day ago"                
    }

                ,


                    {
                        "jobtitle" : "Software Systems Engineer (Java\/J2EE)",
                        "company" : "Universal Business Solutions",
                        "city" : "Alpharetta",
                        "state" : "GA",
                        "country" : "US",
                        "formattedLocation" : "Alpharetta, GA",
                        "source" : "Universal Business Solutions",
                        "date" : "Tue, 17 Dec 2013 18:37:25 GMT",
                        "snippet" : "years experience with <b>Java<\/b> &amp; J2EE Must be motivated... environment. Experienced with <b>Java<\/b>, J2EE, Oracle, UNIX, SQL, Unix Shell script, <b>Java<\/b> Script, MVC Desired... ",
                        "url" : "http:\/\/www.indeed.com\/viewjob?jk=7066b95f71004292&qd=TOIxqcl1xBNMbg2vKTNLcp5QUXHMUbDABF-wK7BxUqwiE8mPbZ2XU9t5kjdQrB6FlsFPgK13DhJYpBc84nTJQYrzCHZtERhjBNeGyZxL6jI&indpubnum=4675158811138546&atk=18cme6tj519rh3c6",
                        "onmousedown" : "indeed_clk(this, '1050');",
                        "latitude" : 34.074177,
                        "longitude" : -84.29121,
                        "jobkey" : "7066b95f71004292",
                        "sponsored" : false,
                        "expired" : false,
                        "formattedLocationFull" : "Alpharetta, GA",
                        "formattedRelativeTime" : "8 days ago"                
    }

                ,


                    {
                        "jobtitle" : "Software Engineer",
                        "company" : "ACI Worldwide",
                        "city" : "Norcross",
                        "state" : "GA",
                        "country" : "US",
                        "formattedLocation" : "Norcross, GA",
                        "source" : "ACI Worldwide",
                        "date" : "Thu, 19 Dec 2013 11:51:00 GMT",
                        "snippet" : "\u2022 Experienced <b>Java<\/b> engineer for developing commercial... development experience \u2022 2 years of professional <b>Java<\/b> development with 2+ years of J2EE. \u2022 2 years of... ",
                        "url" : "http:\/\/www.indeed.com\/viewjob?jk=7ac5988d9e5f0990&qd=TOIxqcl1xBNMbg2vKTNLcp5QUXHMUbDABF-wK7BxUqwiE8mPbZ2XU9t5kjdQrB6FlsFPgK13DhJYpBc84nTJQYrzCHZtERhjBNeGyZxL6jI&indpubnum=4675158811138546&atk=18cme6tj519rh3c6",
                        "onmousedown" : "indeed_clk(this, '1050');",
                        "latitude" : 33.93956,
                        "longitude" : -84.20879,
                        "jobkey" : "7ac5988d9e5f0990",
                        "sponsored" : false,
                        "expired" : false,
                        "formattedLocationFull" : "Norcross, GA",
                        "formattedRelativeTime" : "6 days ago"                
    }

        ]
    };


$("#myGrid").jqGrid({
    //url: "testData.xml",
    dataType:"json",
    data : myStr,
    jsonReader: {
        repeatitems: false,
        root: "results"
    },
    colNames: ["Trending Jobs"],
    colModel: [
        { name: "url" }
    ],
    rowNum: 5,
    rowList: [5, 10, 20, 100, 10000],
    pager: "#pager",
    gridview: true,
    rownumbers: true,
    viewrecords: true,
    height: "auto",
    loadonce: true
});

我尝试使用jsonreader读取数据,将数据类型设置为“json”,将root设置为“results”。

jqgrid中没有填充数据,有人教育我,我在这里缺少什么?

1 个答案:

答案 0 :(得分:1)

您的代码中存在错误,因为对jqGrid选项的含义存在很小的误解。如果您在代码中定义了myStr之类的变量

var myStr = {
        "version" : 2,
        ...
        "results" : [
            {
                ...
            }
        ]
    };

不使用JSON 。它只是使用对象文字来创建新对象。这种语法是在JavaScript中创建和初始化对象的最简单有效的方法。只有属性具有特殊字符时,才需要在"'中包含属性名称。所以相同的代码可以重写为

var myStr = {
        version : 2,
        ...
        results : [
            {
                ...
            }
        ]
    };

所以我想强调一下,上面根本不使用JSON。 datatype参数(不是dataType)的正确值应为"local"而不是"json"。在这种情况下,将忽略选项jsonReaderloadonce。输入数据应该是由jqGrid的data选项指定的项目数组。

因此固定代码应如下所示

$("#myGrid").jqGrid({
    datatype: "local",
    data: myStr.results,
    colNames: ["Trending Jobs"],
    colModel: [
        { name: "url" }
    ],
    rowNum: 5,
    rowList: [5, 10, 20, 100, 10000],
    pager: "#pager",
    gridview: true,
    rownumbers: true,
    viewrecords: true,
    height: "auto"
});

(见the demo)。

如果您的实际代码确实从服务器加载数据,则应使用url参数。如果可以使用选项jsonReaderloadonce,代码如下所示

$("#myGrid").jqGrid({
    url: "Sri2.json",
    datatype: "json",
    jsonReader: {
        repeatitems: false,
        root: "results"
    },
    loadonce: true,
    colNames: ["Trending Jobs"],
    colModel: [
        { name: "url" }
    ],
    rowNum: 5,
    rowList: [5, 10, 20, 100, 10000],
    pager: "#pager",
    gridview: true,
    rownumbers: true,
    viewrecords: true,
    height: "auto"
});

(见another demo)。

您的代码具有奇怪的属性,例如onmousedown。如果您需要在某个单元格上设置onmousedown属性,则可以在cellattr中使用colModel属性。它允许您将任何附加属性设置为<td>元素,该元素代表网格的单元格。例如,one more demo使用以下代码

function indeed_clk (obj, id) {
    alert("onmousedown with id=" + id);
}
$(function () {
    var myStr = {
            ...
            "results" : [
                {
                    ...
                    "onmousedown" : "indeed_clk(this, '1050');",
                    ...
                }
            ]
        };
    $("#myGrid").jqGrid({
        datatype: "local",
        data: myStr.results,
        colNames: ["Trending Jobs"],
        colModel: [
            {
                name: "url",
                title: false,
                cellattr: function (rowId, cellValue, rawObject) {
                    if (rawObject.onmousedown) {
                        return 'onmousedown="' + rawObject.onmousedown + '"';
                    }
                }
            }
        ],
        rowNum: 5,
        rowList: [5, 10, 20, 100, 10000],
        pager: "#pager",
        gridview: true,
        rownumbers: true,
        viewrecords: true,
        height: "auto"
    });
});

设置onmousedown属性,该属性调用全局函数indeed_clk。将使用onmousedown属性在url列中的单元格上设置cellattr