0

我在stackoverflow上查看了各种问题/答案，但没有找到解决方案。

当我使用 jqgrid 代码的第一块（数据是本地的）时，会显示表格和数据。

当我使用第二个块（从 url 加载的数据）时，会显示一个空表。

奇怪的是，本地数据是 url 文件的实际内容。所以我假设行为是相同的。

为什么显示相同的数据，如果复制到代码中，不能使用url显示数据？

HTML（调用包含 jqgrid 代码的 mytest.js）：

<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" href="jquery-ui-1.8.23.custom.css" />
   <link rel="stylesheet" href="ui.jqgrid.css" />
   <script src="jquery-1.8.0.min.js"></script>
   <script src="jquery-ui-1.8.23.custom.min.js"></script>
   <script src="grid.locale-en.js"></script>    
   <script src="jquery.jqGrid.min.js"></script>
   <script src="mytest.js" type="text/javascript"></script>
</head>
<body>
<h1>hey</h1>
  <table id="jqgrid"></table>
</body>
</html>

JSON 作为本地数据（数据显示，[此处，为简洁而编辑]）：

var mydata = [
         {"_id": {"$oid": "50a3f962b7718da1a3090fa9"}, 
         "config": {"titlepage": 
                      {"title": "My First Title",
                       "color": true,
                       "fontsize": "42/44",
                      }
                   }
         },
         {"_id": {"$oid": "50a3f962b7718da1a3090faa"}, 
         "config": {"titlepage": 
                      {"title": "My Second Title",
                       "color": true,
                       "fontsize": "42/44",
                      }
                   }
         }
         ];
jQuery(document).ready(function(){
    $('#jqgrid').jqGrid({
        datatype: 'local',
        data: mydata,
        jsonReader: {
            repeatitems : false,
        },
        caption: 'Titlepage Parameters',
        colNames: ['title', 'color','fontsize'],
        colModel: [
            {name: 'config.titlepage.title'},
            {name: 'config.titlepage.color'},
            {name: 'config.titlepage.fontsize'},
        ],
    });
});

通过 URL 的 JSON（不显示数据）。文件 mydata.json 包含与上面使用的相同的数据，但在本地文件中而不是在实际的 js 代码中：

jQuery(document).ready(function(){
    $('#jqgrid').jqGrid({
        url:'mydata.json',
        datatype:"json",
    jsonReader: {
        repeatitems : false,
    },
    caption: 'Titlepage Parameters',
    colNames: ['title', 'color','fontsize'],
    colModel: [
        {name: 'config.titlepage.title'},
        {name: 'config.titlepage.color'},
        {name: 'config.titlepage.fontsize'},
    ],
    });
});
4

2 回答 2

2

首先，我会修复一些您的第一个版本的工作代码。如果jsonReader您使用. 相反，它将被使用localReader。此外，如果输入数据有这样的值，我建议您始终使用本机值。所以我会将代码修复为以下内容：jsonReaderid

$(function () {
    "use strict";
    var mydata = [
            {
                "_id": {"$oid": "50a3f962b7718da1a3090fa9"},
                "config": {
                    "titlepage": {
                        "title": "My First Title",
                        "color": true,
                        "fontsize": "42/44"
                    }
                }
            },
            {
                "_id": {"$oid": "50a3f962b7718da1a3090faa"},
                "config": {
                    "titlepage": {
                        "title": "My Second Title",
                        "color": true,
                        "fontsize": "42/44"
                    }
                }
            }
        ];
    $('#jqgrid').jqGrid({
        datatype: 'local',
        data: mydata,
        caption: 'Titlepage Parameters',
        gridview: true,
        height: 'auto',
        colNames: ['title', 'color', 'fontsize'],
        colModel: [
            {name: 'config.titlepage.title' },
            {name: 'config.titlepage.color' },
            {name: 'config.titlepage.fontsize' },
        ],
        localReader: {
            id: "_id.$oid"
        }
    });
});

请参阅第一个演示。

如果使用datatype: "json"，您需要修复jsonReader：

$(function () {
    "use strict";
    $('#jqgrid').jqGrid({
        datatype: 'json',
        url: 'Tim2.json',
        caption: 'Titlepage Parameters',
        gridview: true,
        height: "auto",
        //colNames: ['title', 'color', 'fontsize'],
        colModel: [
            {name: 'title', jsonmap: 'config.titlepage.title' },
            {name: 'color', jsonmap: 'config.titlepage.color' },
            {name: 'fontsize', jsonmap: 'config.titlepage.fontsize' },
        ],
        jsonReader: {
            repeatitems: false,
            id: "_id.$oid",
            root: function (obj) {
                return obj;
            }
        }
    });
});

查看另一个演示。

于 2012-11-15T18:27:29.910 回答
0

奥列格的答案是完整的解决方案。

这是修改后的代码。也就是说，我最初编写的代码加上成功将数据加载到网格中的一个更改（来自 Oleg）。对我来说关键是在 jsonReader 中添加根函数：

jQuery(document).ready(function(){
    $('#jqgrid').jqGrid({
        url:'mydata.json',
        datatype:"json",
        jsonReader: {
            root: function (obj) { return obj; },
            repeatitems : false,
        },
        caption: 'Titlepage Parameters',
        colNames: ['title', 'color','fontsize'],
        colModel: [
            {name: 'config.titlepage.title'},
            {name: 'config.titlepage.color'},
            {name: 'config.titlepage.fontsize'},
        ],
    });
});
于 2012-11-15T19:01:01.683 回答