Pourquoi ma grille ne contient pas de données JSON données

Question

Salut J'utilise ce composant de grille jQWidgets pour charger des données JSON. Mais pour une raison quelconque, il s'agit simplement de rendre des lignes vides sans données. S'il vous plaît laissez-moi savoir quel est le problème avec ce code.

http://jsfiddle.net/dRbAE/439/

var data = [{icases__client_id:"15",icases__id:"106167",clients__name:"Apix UK Ltd",icases__case_reference_i_d:"APIX120501",icases__name:"LALO, Hemay",icases__state:"closed",icases__go_date:"2017-01-23T09:43:12"}]; 
 
      var source = 
 
        { 
 
         localdata: data, 
 
         datafields: [ 
 
          {name: 'client_id', type: 'int'}, 
 
          {name: 'case_id', type: 'int'}, 
 
          {name: 'client_name', type: 'string'},       
 
          {name: 'case_ref', type: 'string'}, 
 
          {name: 'case_name', type: 'string'}, 
 
          {name: 'case_state', type: 'string'}, 
 
          {name: 'case_go_date', type: 'date'} 
 
         ], 
 
         id: 'case_id', 
 
         datatype: "json" 
 
        }; 
 
      var dataAdapter = new $.jqx.dataAdapter(source); 
 

 
      var cellStyle = function (row, columnfield, value) { 
 
       return ''; 
 
      } 
 
      $("#search_case_grid").jqxGrid(
 
        { 
 
         width: 1000, 
 
         height: 820, 
 
         source: dataAdapter, 
 
         columnsresize: true, 
 
         sortable: true, 
 
         editable: false, 
 
         altrows: true, 
 
         autoheight: false, 
 
         rowsheight: 20, 
 
         selectionmode: 'single row', 
 
         editmode: 'selectedcell', 
 
         columns: [ 
 
          {hidden: true, datafield: 'icases__id', width: 0}, 
 
          {text: 'Client', datafield: 'clients__name', align: 'center', width: 250, cellclassname: cellStyle},       
 
          {text: 'Case Ref.', datafield: 'icases__case_reference_i_d', align: 'center', width: 100, cellclassname: cellStyle}, 
 
          {text: 'Case', datafield: 'icases__name', align: 'center', width: 150, cellclassname: cellStyle}, 
 
          {text: 'State', datafield: 'icases__state', align: 'center', width: 100, cellclassname: cellStyle}, 
 
          {text: 'Go Date', datafield: 'icases__go_date', align: 'center', columntype: 'datetimeinput', formatString: "dd-MM-yyyy", cellsformat: "dd-MMMM-yyyy", width: 100, cellclassname: cellStyle} 
 
         ] 
 
        });

<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css" rel="stylesheet"/> 
 
<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet"/> 
 
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script> 
 
<div id='search_case_grid'> 
 
</div>

Answer 1

Vous utilisez le mauvais nom pour les données attributs:

les attributs de votre objet de données doivent correspondre à celui source.datafileds:

var data = [{icases__client_id:"15",icases__id:"106167",clients__name:"Apix UK Ltd",icases__case_reference_i_d:"APIX120501",icases__name:"LALO, Hemay",icases__state:"closed",icases__go_date:"2017-01-23T09:43:12"}]; 
      var source = 
        { 
         localdata: data, 
         datafields: [ 
          {name: 'icases__client_id', type: 'int'}, 
          {name: 'icases__id', type: 'int'}, 
          {name: 'clients__name', type: 'string'},       
          {name: 'icases__case_reference_i_d', type: 'string'}, 
          {name: 'icases__name', type: 'string'}, 
          {name: 'icases__state', type: 'string'}, 
          {name: 'icases__go_date', type: 'date'} 
         ], 
... 

essayez this