javascript - 为什么我的网格没有填充给定的 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 中的属性匹配:

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

尝试this