1

jQgrid を使用しようとしていますが、テーブルはデータをロードできません。バックグラウンドには、透明な黒いブロック UI のようなものがあります。私が受け取ったJson応答は次のとおりです。

          {"total":"1","page":"1","records ":"10",
        "rows":[
        {"id":"26010","cell":[26010,303,100,""]},
        {"id":"26009","cell":[26009,303,100,""]},
        {"id":"26008","cell":[26008,303,100,""]},
        {"id":"26007","cell":[26007,303,100,""]},
        {"id":"26006","cell":[26006,303,100,""]},
        {"id":"26005","cell":[26005,303,100,""]},
        {"id":"26004","cell":[26004,303,100,""]},
        {"id":"26003","cell":[26003,303,100,""]},
        {"id":"26002","cell":[26002,303,100,""]},
        {"id":"26001","cell":[26001,303,100,""]}]}

ページ：

<table id="list3"></table>
<div id="pager3"></div>
<table id="navgrid"></table>
<div id="pagernav"></div>
<script>
$(document).ready(function(){
$("#list3").jqGrid({
        url:'<%=getForecastedTransactionURL%>',
        mtype:'POST',
        datatype : 'json',
        colNames : [ 'Txn Id', 'Transaction Type', 'Amount', 'Description'],
        colModel : [ {
            name : 'id',
            index : 'id',
            sorttype : "int",
            hidden:true
        }, {
            name : 'transactionType',
            index : 'transactionType',
            width : 100
        }, {
            name : 'amount',
            index : 'amount',
            width : 80,
            align : "right",
            sorttype : "number"
        }, {
            name : 'description',
            index : 'description',
            width : 80,
            align : "right",
            sorttype : "text"
        }],
        multiselect : true,
        rowNum : 20,
        rowList : [ 10, 20, 30 ],
        pager : '#pager3',
        sortname : 'transactionType',
        viewrecords : true,
        sortorder : "desc",
        loadonce : true,
        caption : "Load Once Example"
    });
});
</script>

不足しているものはありますか?

4

1 に答える 1

0

使用する JavaScript コードは正しく、サーバーから返された JSON データに対応しています。デモは、コードが機能することを示しています。デモでは、マイナーな変更のみを行いました (オプションを追加し、ページャーで結果をより明確に表示するために列height: "auto", gridview: trueの幅を広げました。削除したのは、デモが HTTP GET ごとにファイルから直接データをロードするためだけです)。あなたのデモと私のデモを比較することをお勧めします。さらに、グリッドの読み込み中にエラーを診断するのに役立つコールバック (回答を参照)を使用することをお勧めします。エラーの説明が、コード内のエラーを見つけるのに役立つことを願っています。典型的なエラーは、HTTP 応答の誤りである可能性があります。descriptionmtype:'POST'loadErrorContent-Type

私がお勧めする追加の小さな最適化は次のとおりです。現在サーバー上で生成している JSON 形式には、多くの不要な情報や情報の重複が含まれていますid。実際には必要のない現在非表示idの列を含めました。jqGrid のすべての行にはid属性があります。不要な隠し列を使用する代わりに、値を使用できます。たとえば、コードを変更してデータを生成できます

[
    [303,100,"",26010],
    [303,100,"",26009],
    [303,100,"",26008],
    [303,100,"",26007],
    [303,100,"",26006],
    [303,100,"",26005],
    [303,100,"",26004],
    [303,100,"",26003],
    [303,100,"",26002],
    [303,100,"",26001]
]

jsonReaderオプションを追加してcolModel変更

colModel : [{
    name : 'transactionType',
    width : 100
}, {
    name : 'amount',
    width : 80,
    align : "right",
    sorttype : "number"
}, {
    name : 'description',
    width : 280,
    align : "right"
}],
jsonReader: {id: 3}

itemjsonReader配列の 3 番目の要素がid値であることを指定します。その結果、以前のデモとまったく同じように見えるグリッドが作成されます (新しいデモはこちらをご覧ください)。下の図は、ROWID がまだ正しく設定されていることを示しています。

ここに画像の説明を入力

于 2013-06-03T11:06:39.387 に答える