具有键值对的Json数据未在JQgrid上填充

时间:2015-03-31 03:27:33

标签: jquery json jqgrid

我正在尝试使用Jqgrid和Json Data群体执行示例小提琴。

这是小提琴,使用静态数据http://jsfiddle.net/aUDHx/2/

但是当我尝试使用与dymamic数据相同时,它不会填充jqgrid上的数据。

<table id="grid"></table>
<div id="gridPager"></div>
<br/>
<a href="http://www.ok-soft-gmbh.com/jqGrid/LocalAdjacencyTree4.htm">Another local adjaceny example</a>

var mydata="[";
//var mydata;
for (var i = 0; i < 10; i++) {
mydata=mydata+'{id: i, label:"No " + i, number:"02200220", status:"OPEN"}';
    mydata=mydata+",";        
}     
mydata= mydata.slice(0,-1);
mydata=mydata+"]";
alert(mydata);
var obj = jQuery.parseJSON(mydata);
alert(obj);

    /*[
    {id: "1", label:"No 1", number:"02200220", status:"OPEN"},
    {id: "1", label:"No 1", number:"02200220", status:"OPEN"},
    {id: "1", label:"No 1", number:"02200220", status:"OPEN"},
    {id: "1", label:"No 1", number:"02200220", status:"OPEN"}
];*/

var grid = $("#grid");

grid.jqGrid({
    //data: obj, // doesn't work
    datatype: "local",
    colNames: ['Id', 'Label', 'Number', 'Status'],
    colModel: [
    { name:'id',index:'id', width:60, sorttype: "int"},
    { name: 'label', index: 'label', width: 180, sorttype: "string"},
    { name: 'number', index: 'number', width: 120, sorttype: "float" },
    { name: 'status', index: 'status', width: 120, sorttype: "string" } ],
    gridview: true,
    sortname: 'id',
    treeGrid: true,
    loadonce: true,
    treeGridModel: 'adjacency',
    treedatatype: 'local',
    ExpandColumn: 'label',
    height: 'auto',
    pager : "#gridPager",
    caption: "Stack Overflow Adjacency Example"
});


// we have to use addJSONData to load the data
grid[0].addJSONData({
total: 1,
page: 1,
records: obj.length,
rows: obj
});

我在这里失踪的是什么,有人可以帮助我,我对Jquery很新。

使用JSON.Stringify(),它正在打印空网格..

var mydata="[";
for (var i = 0; i < 10; i++) {
    mydata=mydata+{"id" : "i", "label":"No ", "number":"02200220", "status":"OPEN"};
    mydata=mydata+",";        
}     
mydata= mydata.slice(0,-1);
mydata=mydata+"]";
alert(mydata);
var obj = JSON.stringify(mydata);
alert(obj);
var grid = $("#grid");

grid.jqGrid({
    //data: obj, // doesn't work
    datatype: "local",
    colNames: ['Id', 'Label', 'Number', 'Status'],
    colModel: [
    { name:'id',index:'id', width:60, sorttype: "int"},
    { name: 'label', index: 'label', width: 180, sorttype: "string"},
    { name: 'number', index: 'number', width: 120, sorttype: "float" },
    { name: 'status', index: 'status', width: 120, sorttype: "string" } ],
    gridview: true,
    sortname: 'id',
    treeGrid: true,
    loadonce: true,
    treeGridModel: 'adjacency',
    treedatatype: 'local',
    ExpandColumn: 'label',
    height: 'auto',
    pager : "#gridPager",
    caption: "Stack Overflow Adjacency Example"
});


// we have to use addJSONData to load the data
grid[0].addJSONData({
total: 1,
page: 1,
records: 10,
rows: obj
});

先谢谢。

1 个答案:

答案 0 :(得分:0)

您不需要使用JSON,只需直接构建对象数组:

var obj = [];
for (var i = 0; i < 10; i++) {
    obj.push({
        id: i,
        label: "No " + i,
        number: "02200220",
        status: "OPEN"
    });
}

JSON的目的是允许您在机器之间传递对象和数组,例如在AJAX调用中。但是,如果您在Javascript中创建数据,则无需将其转换为字符串。