jqwidgets无法从JSON加载数据

I am trying to load jqwidgets grid from JSON Response. Grid Loads with empty data without any error. Below is Json response and jquery code. Please tell me is i miss something here?

我正在尝试从JSON Response加载jqwidgets网格。网格加载空数据,没有任何错误。下面是Json响应和jquery代码。请告诉我,我在这里想念一下吗?

JSON DATA :

JSON数据:

 {"holidayrule":["{\"hid\":\"263\",\"hdates\":\"06/21/2015, 06/22/2015, 06/23/2015, 06/24/2015, 06/25/2015, 06/26/2015, 06/27/2015, 06/28/2015, 06/29/2015, 06/30/2015, 07/01/2015, 07/02/2015\",\"hremark\":\"MyRuleRemark\",\"created_date\":\"2015-02-10 09:59:57.44\",\"updated_date\":\"2015-02-10 09:59:57.44\",\"hname\":\"MyRuleName\"}","{\"hid\":\"264\",\"hdates\":\"05/08/2015, 05/09/2015, 05/10/2015, 05/11/2015, 05/12/2015, 05/13/2015, 05/14/2015, 05/15/2015, 05/16/2015, 05/17/2015, 05/18/2015, 05/19/2015\",\"hremark\":\"ggfgf\",\"created_date\":\"2015-02-10 11:08:52.489\",\"updated_date\":\"2015-02-10 11:08:52.489\",\"hname\":\"gfd\"}","{\"hid\":\"265\",\"hdates\":\"01/23/2015, 01/24/2015, 01/25/2015, 01/26/2015, 01/27/2015, 01/28/2015, 01/29/2015, 01/30/2015, 01/31/2015, 02/01/2015, 02/02/2015, 02/03/2015\",\"hremark\":\"ghhghhghhg\",\"created_date\":\"2015-02-10 15:22:11.69\",\"updated_date\":\"2015-02-10 15:22:11.69\",\"hname\":\"fggg\"}","{\"hid\":\"266\",\"hdates\":\"02/25/2015, 02/26/2015, 02/27/2015, 02/28/2015, 03/01/2015, 03/02/2015, 03/03/2015, 03/04/2015, 03/05/2015, 03/06/2015, 03/07/2015, 03/08/2015\",\"hremark\":\"df\",\"created_date\":\"2015-02-10 15:22:26.133\",\"updated_date\":\"2015-02-10 15:22:26.133\",\"hname\":\"gfggf\"}","{\"hid\":\"267\",\"hdates\":\"01/07/2015, 01/08/2015, 01/09/2015, 01/10/2015, 01/11/2015, 01/12/2015, 01/13/2015, 01/14/2015, 01/15/2015, 01/16/2015, 01/17/2015, 01/18/2015\",\"hremark\":\"hghhghgh\",\"created_date\":\"2015-02-10 15:41:22.527\",\"updated_date\":\"2015-02-10 15:41:22.527\",\"hname\":\"33232\"}","{\"hid\":\"268\",\"hdates\":\"01/15/2015, 01/16/2015, 01/17/2015, 01/18/2015, 01/19/2015, 01/20/2015, 01/21/2015, 01/22/2015, 01/23/2015, 01/24/2015, 01/25/2015, 01/26/2015\",\"hremark\":\"dfdfdfdfd\",\"created_date\":\"2015-02-10 16:23:37.855\",\"updated_date\":\"2015-02-10 16:23:37.855\",\"hname\":\"sdffddf\"}"]}

JQUERY :

var parsedData = JSON.stringify(data.holidayrule);
var source =
        {
            localdata: parsedData,
            datatype: "json"
        }
var dataAdapter = new $.jqx.dataAdapter(source);
// initialize divHolidayruleData
$("#divHolidayruleData").jqxGrid(
{
    width: 850,
    source: dataAdapter,
    pageable: true,
    autoheight: true,
    sortable: true,
    altrows: true,
    columns: [
      { text: 'HID', datafield: 'hid', align: 'center', cellsalign: 'center', width: 70 },
      { text: 'Rule Name', datafield: 'hname', cellsalign: 'center', align: 'center', width: 200 },
      { text: 'Holiday Dates', datafield: 'hdates', align: 'center', cellsalign: 'center', width: 200 },
      { text: 'Remark', datafield: 'hremark', align: 'center', cellsalign: 'center', width: 150 },
      { text: 'Created Date', datafield: 'created_date', align: 'center', cellsalign: 'center', width: 100 },
      { text: 'Updated Date', datafield: 'updated_date', align: 'center', cellsalign: 'center', width: 130 }
    ]
});

Am i missing something here?

我错过了什么吗?

EDIT :

 ["{\"hid\":263,\"hdates\":\"06/21/2015, 06/22/2015, 06/23/2015, 06/24/2015, 06/25/2015, 06/26/2015, 06/27/2015, 06/28/2015, 06/29/2015, 06/30/2015, 07/01/2015, 07/02/2015\",\"hremark\":\"MyRuleRemark\",\"created_date\":\"2015-02-10 09:59:57.44\",\"updated_date\":\"2015-02-10 09:59:57.44\",\"hname\":\"MyRuleName\"}","{\"hid\":264,\"hdates\":\"05/08/2015, 05/09/2015, 05/10/2015, 05/11/2015, 05/12/2015, 05/13/2015, 05/14/2015, 05/15/2015, 05/16/2015, 05/17/2015, 05/18/2015, 05/19/2015\",\"hremark\":\"ggfgf\",\"created_date\":\"2015-02-10 11:08:52.489\",\"updated_date\":\"2015-02-10 11:08:52.489\",\"hname\":\"gfd\"}","{\"hid\":265,\"hdates\":\"01/23/2015, 01/24/2015, 01/25/2015, 01/26/2015, 01/27/2015, 01/28/2015, 01/29/2015, 01/30/2015, 01/31/2015, 02/01/2015, 02/02/2015, 02/03/2015\",\"hremark\":\"ghhghhghhg\",\"created_date\":\"2015-02-10 15:22:11.69\",\"updated_date\":\"2015-02-10 15:22:11.69\",\"hname\":\"fggg\"}","{\"hid\":266,\"hdates\":\"02/25/2015, 02/26/2015, 02/27/2015, 02/28/2015, 03/01/2015, 03/02/2015, 03/03/2015, 03/04/2015, 03/05/2015, 03/06/2015, 03/07/2015, 03/08/2015\",\"hremark\":\"df\",\"created_date\":\"2015-02-10 15:22:26.133\",\"updated_date\":\"2015-02-10 15:22:26.133\",\"hname\":\"gfggf\"}","{\"hid\":267,\"hdates\":\"01/07/2015, 01/08/2015, 01/09/2015, 01/10/2015, 01/11/2015, 01/12/2015, 01/13/2015, 01/14/2015, 01/15/2015, 01/16/2015, 01/17/2015, 01/18/2015\",\"hremark\":\"hghhghgh\",\"created_date\":\"2015-02-10 15:41:22.527\",\"updated_date\":\"2015-02-10 15:41:22.527\",\"hname\":\"33232\"}","{\"hid\":268,\"hdates\":\"01/15/2015, 01/16/2015, 01/17/2015, 01/18/2015, 01/19/2015, 01/20/2015, 01/21/2015, 01/22/2015, 01/23/2015, 01/24/2015, 01/25/2015, 01/26/2015\",\"hremark\":\"dfdfdfdfd\",\"created_date\":\"2015-02-10 16:23:37.855\",\"updated_date\":\"2015-02-10 16:23:37.855\",\"hname\":\"sdffddf\"}"]

Same problem with above JSON

与上述JSON相同的问题

EDIT 2:

jsFiddleDemo

1 个解决方案

#1

You have missed one of the most basic concepts in the Data Binding through Data Apdater - datafields array is undefined in your code. Each datafield should have "name" and "type". Your data is also within "holidayrule" which means that you'll have to set the source object's "root" property, too.

您错过了通过Data Apdater进行数据绑定的最基本概念之一 - 数据字段数组在您的代码中未定义。每个数据字段应具有“名称”和“类型”。您的数据也在“holidayrule”中,这意味着您还必须设置源对象的“root”属性。

Updated:

  var data = "[" +

"{\"hid\":263,\"hdates\":\"06/21/2015, 06/22/2015, 06/23/2015, 06/24/2015, 06/25/2015, 06/26/2015, 06/27/2015, 06/28/2015, 06/29/2015, 06/30/2015, 07/01/2015, 07/02/2015\",\"hremark\":\"MyRuleRemark\",\"created_date\":\"2015-02-10 09:59:57.44\",\"updated_date\":\"2015-02-10 09:59:57.44\",\"hname\":\"MyRuleName\"}" + "]"; var source = { localdata: data, datafields: [{ name: 'hname', type: 'string' }], datatype: "json" };

“{\”hid \“:263,\”hdates \“:\”2015年6月21日,2015年6月22日,06/23 / 2015,206 / 24 / 2015,06 / 25 / 2015,06 / 2015年6月26日,06/27 / 2015,206 / 28 / 2015,06 / 29 / 2015,06 / 30 / 2015,07 / 01 / 2015,07 / 02/2015 \“,\”hremark \“:\” MyRuleRemark \“,\”created_date \“:\”2015-02-10 09:59:57.44 \“,\”updated_date \“:\”2015-02-10 09:59:57.44 \“,\”hname \ “:\”MyRuleName \“}”+“]”; var source = {localdata:data,datafields:[{name:'hname',type:'string'}],datatype:“json”};

    var dataAdapter = new $.jqx.dataAdapter(source);

    $("#jqxgridTest").jqxGrid({
        width: 670,
        source: dataAdapter,
        altrows: true,
        selectionmode: 'multiplecellsextended',
        columns: [{
            text: 'HID',
            datafield: 'hid',
            width: 70
        }, {
            text: 'Rule Name',
            datafield: 'hname',
            width: 70
        }, {
            text: 'Holiday Dates',
            datafield: 'hdates',
            width: 70
        }, {
            text: 'Remark',
            datafield: 'hremark',
            width: 70
        }, {
            text: 'Created Date',
            datafield: 'created_date',
            width: 70
        }, {
            text: 'Updated Date',
            datafield: 'updated_date',
            width: 70
        }]
    });
});