0

私は試してみましたが、最終的に jqGrid がデータを表示しない理由を突き止めようとしました。

ステップバイステップで試してみましょう: 以下は、スクリプトに含まれるものです...

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<link href="../../Content/themes/redmond/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" />
<link href="../../Content/themes/redmond/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link href="../../Content/themes/base/jquery.ui.button.css" rel="stylesheet" type="text/css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>

<script src="../../Scripts/grid.locale-en.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>

JSON は以下を返しました。

{
"total": 1,
"page": 1,
"records": 1,
"rows": [
    {
        "id": "0001",
        "cell": [
            "0001",
            "XXXXX",
            "XXXX",
            "XXX",
            "XXX",
            "XXXXX",
            "XXXX",
            "7/27/2012 1:46:22 PM",
            "XXXXX",
            "7/30/2012 3:48:25 PM"
        ]
    }
]

}

jqGrid コードは次のとおりです。

jQuery(function ($) {
    jQuery('#tblManageApplication').jqGrid({
        url: '/AdminView/ManageApplicationsJQGridData',
        datatype: 'json',
        loadError: function (xhr, status, error) { alert(status + " " + error); }, 
        mtype: 'GET', 
        colNames: ['Application ID', 'Application Name', 'Application Description', 'Country Code', 'Country Name', 'Source Indicator Code', 'Insert User ID', 'Insert User Timestamp', 'Update User ID', 'Update User Timestamp'],
        colModel: [
                    { name: 'ApplicationID', jsonmap: 'cell.ApplicationID', width: 150 },
                    { name: 'ApplicationName', jsonmap: 'cell.ApplicationName', width: 200 },
                    { name: 'ApplicationDescription', jsonmap: 'cell.ApplicationDescription', width: 250 },
                    { name: 'CountryCode', jsonmap: 'cell.CountryCode', width: 100 },
                    { name: 'CountryName', jsonmap: 'cell.CountryName', width: 100 },
                    { name: 'SourceIndicatorCode', jsonmap: 'cell.SourceIndicatorCode', width: 100 },
                    { name: 'InsertUserID', jsonmap: 'cell.InsertUserID', width: 100 },
                    { name: 'InsertUserTimestamp', jsonmap: 'cell.InsertUserTimestamp', width: 100, formatter: 'date', formatoptions: { newformat: 'd-m-Y' }, datefmt: 'd-m-Y' },
                    { name: 'UpdateUserID', jsonmap: 'cell.UpdateUserID', width: 100 },
                    { name: 'UpdateUserTimestamp', jsonmap: 'cell.UpdateUserTimestamp', width: 175, formatter: 'date', formatoptions: {newformat: 'd-m-Y'}, datefmt: 'd-m-Y' }
                  ],
        pager: jQuery('#pager'),
        sortName: 'ApplicationID',
        rowNum: 10,
        jsonReader: { repeatitems: false },
        rowList: [10, 20, 50],
        sortorder: 'desc',
        height: 300,
        width: 1200,
        caption: 'Manage Applications',
        onCellSelect: function (rowid, index, contents, event) {
            alert('onCellSelect: ' + index + ' : ' + contents);
        },
        success: function (data, textStatus) {
            if (textStatus == 'success') {
                alert('Successful');
            }
        },
        error: function (data, textStatus) {
            alert('An error has occurred');
        }
    });
});

参照用に対応する HTML を追加したい:

<table id="tblManageApplication"></table>
<div id="pager"></div>

どんな助けでも大歓迎です。

4

2 に答える 2

2

まず、コントローラーから送信しているデータと colModal の名前がアルファベット順に同じであることを確認できますか?

2番目にjsonリーダーを確認してください

このリンクを確認してください

http://www.ok-soft-gmbh.com/jqGrid/ipInfo.htm ID やレコードなど、ここでいくつか指定する必要があると思います。

于 2012-07-31T02:32:57.083 に答える
0

コードの主なエラーは、オプションの使用と、jsonReader: { repeatitems: false }オプションjsonmapがまったく必要ない場合です。標準フォーマットでデータを生成します。したがって、グリッドを埋めるためにオプションを削除する必要があります。

さらに、データ形式をISO 8601形式に変更するか (サーバー コードで「o」形式を使用できDateTimeます)、少なくとも正しい を定義することをお勧めしますsrcformat。

formatoptions: {srcformat: 'm/d/Y g:i:s A', newformat: 'd-m-Y'}

デモは、上で説明した変更が機能することを示しています。

于 2012-07-31T10:20:04.243 に答える