2017-07-13 3 views
2

Ich möchte das Raster der unten stehenden Tabelle bindenjqGrid ist ohne Datenbindung, sondern nur leere Spalten

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

Ich habe eine Zeichenfolgeobjekt

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 
     }]"; 

, die ich versuche, mich an ein binden jqGrid,

wie diese,

$("#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, 
    }); 

Dies ist aber wie wird das Gitter

enter image description here

Bindung Kann mir jemand sagen, wo ich falsch gehe?

+1

falsche Variable Bezug genommen, die Version von jqGrid, die Sie verwenden und von welcher Abzweigung von jqGrid? Welcher Typ hat 'Obj':' string' oder 'object'? Ihr aktueller Code enthält einen Syntaxfehler. Wenn Sie 'Obj' als String verwenden, fügen Sie entweder' datype: "jsonstring" 'hinzu und verwenden' datastr: Obj' oder add 'datatype:" local "' Option und verwenden 'data: JSON.parse (GridRowObj)'. – Oleg

Antwort

3

Hier gehen Sie mit der Lösung http://jsfiddle.net/yNw3C/16032/

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, 
 
    });
<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>

Sie haben vergessen datatype als 'lokale' sowie Daten hinzuzufügen, wurde