jqgrid绑定没有数据,只是空列

时间:2017-07-13 14:50:38

标签: javascript jquery jqgrid

我想将网格绑定到下表

 <table class="table table-bordered table-striped" id="tblJQGrid"></table>

我有一个字符串化的对象

 var obj= "[{"Rule":80,
             "RegionsCount":3,
             "TotalMarketsize":561393.6501688622,
             "CompanyMarketsize":72495.11226586788,
             "Share":12.913418640211196
          },
          {"Rule":20,
           "RegionsCount":7,
           "TotalMarketsize":438981.8470979482,
           "CompanyMarketsize":56358.24418920174,
           "Share":12.83839971100827
      }]";

我想绑定到jqgrid,

像这样,

 $("#tblJQGrid").jqGrid("GridUnload");
        $("#tblJQGrid").jqGrid(
        {
         mtype: 'GET',
         data: obj,
         colNames: ['Rule', 'RegionsCount', 'TotalMarketsize', 'CompanyMarketsize', 'Share'],
         colModel: [
         { name: 'Rule', index: 'Rule', width: 20, stype: 'text' },
         { name: 'RegionsCount', index: 'RegionsCount', width: 150 },
         { name: 'TotalMarketsize', index: 'TotalMarketsize', width: 150 },
         { name: 'CompanyMarketsize', index: 'CompanyMarketsize', width: 150, align: "right" },
         { name: 'Share', index: 'Share', width: 150, align: "right" }
         ],
         rowNum: 2,
         //rowNum: 10,
         loadonce: false,
         shrinkToFit: true,
         forceFit: true,
         emptyrecords: 'No records to display',
         hoverrows: true,
         rownumbers: false,
         viewrecords: true,
     });

但这就是网格绑定的方式

enter image description here

有人能告诉我哪里出错了吗?

1 个答案:

答案 0 :(得分:3)

您可以使用解决方案http://jsfiddle.net/yNw3C/16032/

&#13;
&#13;
var obj=
'[{"Rule":80,"RegionsCount":3,"TotalMarketsize":561393.6501688622,"CompanyMarketsize":72495.11226586788,"Share":12.913418640211196},{"Rule":20,"RegionsCount":7,"TotalMarketsize":438981.8470979482,"CompanyMarketsize":56358.24418920174,"Share":12.83839971100827}]';

$("#tblJQGrid").jqGrid("GridUnload");
        $("#tblJQGrid").jqGrid({
         datatype: "local",
         data: JSON.parse(obj),
         colNames: ['Rule', 'RegionsCount', 'TotalMarketsize', 'CompanyMarketsize', 'Share'],
         colModel: [
         { name: 'Rule', index: 'Rule', width: 20, stype: 'text' },
         { name: 'RegionsCount', index: 'RegionsCount', width: 150 },
         { name: 'TotalMarketsize', index: 'TotalMarketsize', width: 150 },
         { name: 'CompanyMarketsize', index: 'CompanyMarketsize', width: 150, align: "right" },
         { name: 'Share', index: 'Share', width: 150, align: "right" }
         ],
         rowNum: 2,
         //rowNum: 10,
         loadonce: false,
         shrinkToFit: true,
         forceFit: true,
         emptyrecords: 'No records to display',
         hoverrows: true,
         rownumbers: false,
         viewrecords: true,
     });
&#13;
<link href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css" rel="stylesheet"/>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>

<table class="table table-bordered table-striped" id="tblJQGrid"></table>
&#13;
&#13;
&#13;

您忘记将 dataType 添加为&#39; 本地&#39;以及数据指的是错误的变量