Question

这真的让我发疯，我读了一些问题：

how to display jqgrid from url (local data works, url data does not)
jqGrid not displaying JSON data
jqGrid not displaying JSON data
jgGrid not displaying json data

他们都没有为我的案子工作。我已经在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>

请提前帮助我解决这个问题。

Answer 1

我认为您发布的代码几乎是正确的。 The demo使用您的JSON数据和几乎您的代码。它显示

enter image description here

我仅移除了viewrecords选项的重复项，并将height: 300更改为height: "auto"以便更好地查看。如果您从服务器一次加载所有数据，我建议您使用loadonce: true。如果在第一次从服务器加载数据后将datatype更改为"local"，并且稍后将进行排序，则将在本地实施数据的分页和过滤。

我不知道代码中的错误是什么。一个可能的原因可能是服务器响应中的HTTP标头错误，因此JSON将jQuery响应解释为XML或HTML数据。如果网格仍然为空，我建议您另外包含loadError回调以获取有关错误的更多信息。请查看the answer了解更多详情。

顺便说一下，我发布了the suggestion（参见the src-file），它可以自动检测输入JSON格式的不同变体。我希望这个建议能被trirand接受，而且人们对于阅读JSON数据的问题会少得多。

Answer 2

你的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"
             },

jqgrid无法显示json数据

2 个答案: