0

stackoverflowに関するさまざまな質問/回答を調べましたが、解決策が見つかりませんでした。

jqgridコードの最初のブロック（データはローカル）を使用すると、テーブルとデータが表示されます。

2番目のブロック（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を使用すると使用されなくjsonReaderなります。その代わりにlocalReaderが使用されます。idさらに、入力データにネイティブ値がある場合は、常にネイティブ値を使用することをお勧めします。したがって、コードを次のように修正します。

$(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 からの) 1 つの変更です。私にとっての鍵は、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 に答える