代码之家 › 专栏 › 技术社区 › Chris McCall

jqgrid没有填充数据

jqgrid json jquery

Chris McCall · 技术社区 · 14 年前

我包含了所有必需的javascript,以及适当的区域设置(至少我认为):

 <script type="text/javascript" src="http://localhost/Web/Scripts/jqgrid/js/jquery.jqGrid.min.js"></script>
 <script type="text/javascript" src="http://localhost/Web/Scripts/jqgrid/js/i18n/grid.locale-en.js"></script>

这是javascript:

<script type="text/javascript">
    jQuery(document).ready(function() {
        //var url = 'http://' + window.location.hostname + '/Web/Service/Kpi/MonthlyGrid?orgName=' + orgName + '&month=3';
        var url = 'http://' + window.location.hostname + '/Web/Service/Kpi/MonthlyGrid';
        console.log(url);
        $.getJSON(url,
                    function(data) { console.log(data); });
        jQuery("#list").jqGrid({
            url: url,
            datatype: 'json',
            mtype: 'GET',
            colNames: ['ID','SITE_TYPE_ID', 'ORG_UNIT_ID', 'SITE_ID', 'AREA_ID', 'MONTH', 'YEAR', 'VALUE', 'IS_UNRELIABLE', 'CALCULATED_ON'],
            colModel: [
            { name: 'ID', index: 'ID', width: 40, align: 'left' },
          { name: 'SITE_TYPE_ID', index: 'SITE_TYPE_ID', width: 40, align: 'left' },
          { name: 'ORG_UNIT_ID', index: 'ORG_UNIT_ID', width: 40, align: 'left' },
          { name: 'SITE_ID', index: 'SITE_ID', width: 40, align: 'left' },
          { name: 'AREA_ID', index: 'AREA_ID', width: 40, align: 'left' },
          { name: 'MONTH', index: 'MONTH', width: 40, align: 'left' },
          { name: 'YEAR', index: 'YEAR', width: 40, align: 'left' },
          { name: 'VALUE', index: 'VALUE', width: 40, align: 'left' },
          { name: 'IS_UNRELIABLE', index: 'IS_UNRELIABLE', width: 40, align: 'left' },
          { name: 'CALCULATED_ON', index: 'CALCULATED_ON', width: 40, align: 'left'}],
            pager: jQuery('#pager'),
            rowNum: 10,
            rowList: [5, 10, 20, 50],
            sortname: 'ID',
            sortorder: "desc",
            viewrecords: true,
            imgpath: '/scripts/themes/coffee/images',
            caption: 'My first grid'
        });
    }); 
</script>

最后,从URL返回的数据:

{"page":1,"total":1,"records":6,"rows":
[{"id":"8F4CEED3-628E-9EE7-E040-000A3E0034B3","cell":["8F4CEED3-628E-9EE7-E040-000A3E0034B3","111","","","","3","2010","0.001597","1","9/16/2010 11:29:13 AM"]},
{"id":"8F4CEED3-628F-9EE7-E040-000A3E0034B3","cell":["8F4CEED3-628F-9EE7-E040-000A3E0034B3","","","","","3","2010","0.001597","1","9/16/2010 11:29:13 AM"]},
{"id":"8F4CEED3-6337-9EE7-E040-000A3E0034B3","cell":["8F4CEED3-6337-9EE7-E040-000A3E0034B3","111","","","","3","2010","0.013223","1","9/16/2010 11:29:07 AM"]},
{"id":"8F4CEED3-6338-9EE7-E040-000A3E0034B3","cell":["8F4CEED3-6338-9EE7-E040-000A3E0034B3","","","","","3","2010","0.013223","1","9/16/2010 11:29:08 AM"]},
{"id":"8F4CEED3-63E0-9EE7-E040-000A3E0034B3","cell":["8F4CEED3-63E0-9EE7-E040-000A3E0034B3","111","","","","3","2010","0.008352","1","9/16/2010 11:29:17 AM"]},
{"id":"8F4CEED3-63E1-9EE7-E040-000A3E0034B3","cell":["8F4CEED3-63E1-9EE7-E040-000A3E0034B3","","","","","3","2010","0.008352","1","9/16/2010 11:29:17 AM"]}]}

我哪里做错了?

1 回复 | 直到 14 年前

Oleg 14 年前

似乎错误是JS文件的顺序。在jquery.jqgrid.min.js之前,必须包含grid.locale-en.js。使用正确的javascript文件顺序,您的网格可以显示为 following . (我只更改了一些列的宽度并删除了 deprecated imgpath 参数)。