グリッドが与えられたJSONデータで埋められない理由

Question

こんにちは、このjQWidgetsグリッドコンポーネントを使用してJSONデータを読み込みます。しかし何らかの理由で、空の行がデータなしでレンダリングされているだけです。 このコードで何が問題なのか教えてください。

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

あなたは、データの間違った名前を使用している属性：

あなたのデータオブジェクトの属性がsource.datafiledsに1と一致する必要があります。

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'} 
         ], 
... 

try this