json - jqgridがjsonデータの表示に失敗する

Question

これは本当に私を夢中にさせます、私はいくつかの質問を読みました：

それらのどれも私の場合には機能していません。http://jsonlint.com/でjsonを確認しましたが、有効なJSONと表示されています。jqgridに次のlocalhost/mine/jqgrid/json出力を行うテーブルを表示させたい：

[{"id":"1","invdate":"1","name":"1","note":"1","amount":"1"},
{"id":"2","invdate":"2","name":"2","note":"2","amount":"2"},
{"id":"3","invdate":"3","name":"3","note":"3","amount":"3"},
{"id":"4","invdate":"4","name":"4","note":"4","amount":"4"},
{"id":"5","invdate":"5","name":"5","note":"5","amount":"5"}]

これが私のスクリプトです：

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        {nocache}
        <title>{$title}</title>
        {/nocache}
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <!--jqGrid sangat tergantung kepada CSS jquery-ui-->
        <link rel="stylesheet" type="text/css" media="screen" href="{#base_url#}/mine/assets/default/styles/jqgrid/jquery-ui-custom.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="{#base_url#}/mine/assets/default/styles/jqgrid/ui.jqgrid.css" />  
        <style type="text/css">
        html, body {
            margin: 0;
            padding: 0;
            font-size: 1em;
        }
        </style> 
        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
        <script src="{#base_url#}/mine/assets/default/scripts/jqgrid/jquery.js" type="text/javascript"></script>
        <script src="{#base_url#}/mine/assets/default/scripts/jqgrid/jquery-ui-custom.min.js" type="text/javascript"></script>
        <script src="{#base_url#}/mine/assets/default/scripts/jqgrid/grid.locale-en.js" type="text/javascript"></script>
        <script src="{#base_url#}/mine/assets/default/scripts/jqgrid/jquery.jqGrid.min.js" type="text/javascript"></script>
        <!--prevent Smarty to parsing--> 
         {literal}
        <script type="text/javascript">
        $(function(){ 
          $("#list").jqGrid({
            //ini buat paging, value nya adalah ID dari HTML
            pager: '#pager',
            url:'localhost/mine/jqgrid/json',
            datatype: "json",
            height: 300,
            colNames:['ID','Inv Date','Name', 'Note','Amount','Tax','Total'],
            /**
             * to able to sort the right way, u must include sorttype:'int' for integer field
             */
            colModel :[ 
              {name:'id', index:'id',width:20, sorttype:'int'},
              {name:'invdate', index:'invdate', width:55}, 
              {name:'name', index:'name', width:90}, 
              {name:'note', index:'note', width:80, align:'right'}, 
              {name:'amount', index:'amount', width:80, align:'right'}, 
              {name:'tax', index:'tax', width:80, align:'right'}, 
              {name:'total', index:'total', width:150, sortable:true} 
            ],
            rowNum: 10,
            rowList:[10,20,30,40,50],
            recordpos: 'right',
            viewrecords: true,
            sortorder: "desc",
            sortname: "id",
            sorttype: "integer",
            viewrecords: true,
            multiselect: false,
            caption: "Manipulating JSON Data",
            recordtext: "Lihat {0} - {1} dari {2}",
            emptyrecords: "Tidak ada data",
            loadtext: "Loading...",
            pgtext : "Page {0} of {1}",
            jsonReader : { 
                repeatitems: false,
                id: "id",
                root: function (obj) {
                return obj;
            }},    
          });
        });
        </script>
        {/literal}
        <!--end of parsing-->
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
        <![endif]-->

        <!--this is it, jqGrid load in here-->
        <table id="list"><tr><td/></tr></table> 
        <div id="pager"></div> 
        <!--end of jqGrid-->
        <p>{#app_name#}</p>
    </body>
</html>

よろしくお願いします。

score 1 · Accepted Answer

あなたが投稿したコードはほぼ正しいと思います。デモでは、JSON データとほとんどのコードを使用します。表示します

ここに画像の説明を入力

viewrecordsオプションの重複のみを削除し、見栄えを良くするために変更height: 300しました。サーバーから一度に全データをロードする場合height: "auto"に使用することをお勧めします。サーバーからのデータの最初のロード後にが変更され、その後のすべてのデータの並べ替え、ページング、およびフィルタリングがローカルに実装されるloadonce: true場合datatype。"local"

あなたのコードのエラーが何であるかわかりません。考えられる理由の 1 つは、サーバー応答の HTTP ヘッダーが間違っている可能性があるため、JSON 応答は jQuery によって XML または HTML データとして解釈されます。loadErrorグリッドがまだ空のままである場合は、コールバックを追加してエラーに関する詳細情報を取得することをお勧めします。詳細については、回答をご覧ください。

ちなみに、入力 JSON 形式のさまざまなバリエーションの自動検出を可能にする提案( src-fileを参照) を投稿しました。この提案が trirand に受け入れられ、JSON データの読み取りに関する問題についての質問が少なくなることを願っています。

score 0 · Accepted Answer

あなたのjsonデータは次のようになります

{
"page":"1",
   "total":2,
   "records":"13", 
   "rows": [{"id":"1","invdate":"1","name":"1","note":"1","amount":"1"},
            {"id":"2","invdate":"2","name":"2","note":"2","amount":"2"},
            {"id":"3","invdate":"3","name":"3","note":"3","amount":"3"},
            {"id":"4","invdate":"4","name":"4","note":"4","amount":"4"},
            {"id":"5","invdate":"5","name":"5","note":"5","amount":"5"}] 
}

そして変更

jsonReader : { 
                repeatitems: false,
                id: "id",
                root: function (obj) {
                return obj;
            }},

に

jsonReader : { 
             repeatitems: false,
             id: "id"
             },

json - jqgridがjsonデータの表示に失敗する

2 に答える 2

Related

Reference