带有JSON数据的jqGrid将表呈现为空

时间：2008-11-03 18:02:20

标签： php javascript jquery json jqgrid

我正在尝试创建一个jqgrid，但该表为空。表格呈现，但数据未显示。

我从php调用回来的数据是：

{
"page":"1",
"total":1,
"records":"10",
"rows":[
{"id":"2:1","cell":["1","image","Chief Scout","Highest Award test","0"]},
{"id":"2:2","cell":["2","image","Link Badge","When you are invested as a Scout, you may be eligible to receive a Link Badge. (See page 45)","0"]},
{"id":"2:3","cell":["3","image","Pioneer Scout","Upon completion of requirements, the youth is invested as a Pioneer Scout","0"]},
{"id":"2:4","cell":["4","image","Voyageur Scout Award","Voyageur Scout Award is the right after Pioneer Scout.","0"]},
{"id":"2:5","cell":["5","image","Voyageur Citizenship","Learning about and caring for your community.","0"]},
{"id":"2:6","cell":["6","image","Fish and Wildlife","Demonstrate your knowledge and involvement in fish and wildlife management.","0"]},
{"id":"2:7","cell":["7","image","Photography","To recognize photography knowledge and skills","0"]},
{"id":"2:8","cell":["8","image","Recycling","Demonstrate your knowledge and involvement in Recycling","0"]},
{"id":"2:10","cell":["10","image","Voyageur Leadership ","Show leadership ability","0"]},
{"id":"2:11","cell":["11","image","World Conservation","World Conservation Badge","0"]}
]}

javascript配置如下所示：

$("#"+tableId).jqGrid ({
    url:'getAwards.php?id='+classId,
    dataType : 'json',
    mtype:'POST',
    colNames:['Id','Badge','Name','Description',''],
    colModel : [
        {name:'awardId', width:30, sortable:true, align:'center'},
        {name:'badge', width:40, sortable:false, align:'center'},
        {name:'name', width:180, sortable:true, align:'left'},
        {name:'description', width:380, sortable:true, align:'left'},
        {name:'selected', width:0, sortable:false, align:'center'}
        ],
    sortname: "awardId",
    sortorder: "asc",
    pager: $('#'+tableId+'_pager'),
    rowNum:15,
    rowList:[15,30,50],
    caption: 'Awards',
    viewrecords:true,
    imgpath: 'scripts/jqGrid/themes/green/images',
    jsonReader : { 
        root: "rows", 
        page: "page", 
        total: "total", 
        records: "records", 
        repeatitems: true, 
        cell: "cell", 
        id: "id",
        userdata: "userdata", 
        subgrid: {root:"rows", repeatitems: true, cell:"cell" } 
    },
    width: 700,
    height: 200
});

HTML看起来像：

<table class="awardsList" id="awardsList2" class="scroll" name="awardsList" />
<div id="awardsList2_pager" class="scroll"></div>

我不确定我是否需要定义jsonReader，因为我已经尝试保持默认值。如果php代码有帮助，我也可以发布它。

8 个答案:

答案 0 :(得分：20)

我得到了它的工作！

dataType 字段应为数据类型。这是区分大小写的。

答案 1 :(得分：5)

在 grid.locale-en.js 之前包含脚本 jquery.jqGrid.min.js 时，也会出现此问题。如果控制器的方法调用有任何问题，请检查此项。

答案 2 :(得分：3)

从jqGrid 3.6迁移到jqGrid 3.7.2时遇到了同样的问题。问题是我的JSON没有正确地双引号（根据JSON规范的要求）。 jqGrid 3.6容忍我的无效JSON，但jqGrid 3.7更严格。

请参阅此处：http://simonwillison.net/2006/Oct/11/json/

<强>无效：

{
page:"1",
total:1,
records:"10",
rows:[
    {"id":"2:1","cell":["1","image","Chief Scout","Highest Award test","0"]},
    {"id":"2:2","cell":["2","image","Link Badge","When you are invested as a Scout, you may be eligible to receive a Link Badge. (See page 45)","0"]},
    {"id":"2:3","cell":["3","image","Pioneer Scout","Upon completion of requirements, the youth is invested as a Pioneer Scout","0"]}
]}

<强>有效：

{
"page":"1",
"total":1,
"records":"10",
"rows":[
    {"id":"2:1","cell":["1","image","Chief Scout","Highest Award test","0"]},
    {"id":"2:2","cell":["2","image","Link Badge","When you are invested as a Scout, you may be eligible to receive a Link Badge. (See page 45)","0"]},
    {"id":"2:3","cell":["3","image","Pioneer Scout","Upon completion of requirements, the youth is invested as a Pioneer Scout","0"]}
]}

答案 3 :(得分：1)

我也得到了它的工作：数据类型是正确的拼写 - 它在示例中显示，但它与库中的所有其他不一致，所以很容易出错

我越来越厌倦追逐这个稀疏的文档，我真的觉得JSON，在JavaScript中使用是正确和恰当的，实际上已经得到了简短的覆盖，支持XML。通过JSON，Python和JavaScript是一个非常强大的组合，但它与这个特定的库不断斗争。

任何有替代方案的人：

1＆GT;正确支持jQuery UI主题（包括圆角！）（http://datatables.net对主题有更好的支持）

2 - ;允许调整列的大小（http://datatables.net不支持开箱即用）

3＆GT;允许子网格（http://datatables.net允许您通过事件在此处执行任何操作）

请告诉我。我花了更多的时间在我的界面的这一部分而不是整个其余的部分组合，并且花费了所有的时间来寻找工作示例和“尝试事情”，这只是让人讨厌。

取值

答案 4 :(得分：1)

这可能是一篇较旧的帖子，但我会发布我的成功只是为了帮助其他人。

您的JSON需要采用以下格式：

{
"rows": [
    {
        "id": 1,
        "cell": [
            1,
           "lname",
            "fname",
            "mi",
            phone,
            "cell1",
            "cell2",
            "address",
            "email"
        ]
    },
    {
        "id": 2,
        "cell": [
            2,
            "lname",
            "fname",
            "mi",
            phone,
            "cell1",
            "cell2",
            "address",
            "email"
        ]
    }
]

}

我在Zend写了这个模型，所以你可以使用它，如果你愿意的话。按照你想要的方式操纵它。

public function fetchall ($sid, $sord)
{
    $select = $this->getDbTable()->select(Zend_Db_Table::SELECT_WITH_FROM_PART);
    $select->setIntegrityCheck(false)
           ->join('Subdiv', 'Subdiv.SID = Contacts.SID', array("RepLastName" => "LastName", 
                                                                "Subdivision" => "Subdivision",
                                                                "RepFirstName" => "FirstName"))
           ->order($sid . " ". $sord);

    $resultset = $this->getDbTable()->fetchAll($select);
    $i=0;
    foreach ($resultset as $row) {
        $entry  = new Application_Model_Contacts();

        $entry->setId($row->id);
        $entry->setLastName($row->LastName);
        $entry->setFirstName1($row->FirstName1);
        $entry->setFirstName2($row->FirstName2);
        $entry->setHomePhone($row->HomePhone);
        $entry->setCell1($row->Cell1);
        $entry->setCell2($row->Cell2);
        $entry->setAddress($row->Address);
        $entry->setSubdivision($row->Subdivision);
        $entry->setRepName($row->RepFirstName . " " . $row->RepLastName);
        $entry->setEmail1($row->Email1); 
        $entry->setEmail2($row->Email2);

        $response['rows'][$i]['id'] = $entry->getId(); //id
        $response['rows'][$i]['cell'] = array (
                                                $entry->getId(),
                                                $entry->getLastName(),
                                                $entry->getFirstName1(),
                                                $entry->getFirstName2(),
                                                $entry->getHomePhone(),
                                                $entry->getCell1(),
                                                $entry->getCell2(),
                                                $entry->getAddress(),
                                                $entry->getSubdivision(),
                                                $entry->getRepName(),
                                                $entry->getEmail1(),
                                                $entry->getEmail2()
                                            );
        $i++;

    }
    return $response;
}

答案 5 :(得分：1)

在我的情况下，问题是由以下PHP代码行引起的（来自jqGrid演示）：

$responce->page = $page;

这里有什么问题：我正在访问对象$responce的属性页而不先创建它。这导致Apache显示以下错误消息：

Strict Standards: Creating default object from empty value in /home/mariusz/public_html/rezerwacja/apps/frontend/modules/service/actions/actions.class.php on line 35

最后，错误消息曾经发送到脚本中的json reader。

我通过创建空对象来解决问题：

$responce = new stdClass();

答案 6 :(得分：0)

我不认为你的ID是正确的类型，我认为它应该是一个int。

对于给定的json，您实际上不需要jsonreader设置。你列出的是默认值，加上你的json中没有子网格。

试试这个：

{
"page":"1",
"total":1,
"records":"10",
"rows":[
{"id":1 ,"cell":["1","image","Chief Scout","Highest Award test","0"]},
{"id":2,"cell":["2","image","Link Badge","When you are invested as a Scout, you maybe eligible to receive a Link Badge. (See page 45)","0"]},
{"id":3,"cell":["3","image","Pioneer Scout","Upon completion of requirements, the youth is invested as a Pioneer Scout","0"]},
{"id":4,"cell":["4","image","Voyageur Scout Award","Voyageur Scout Award is the right after Pioneer Scout.","0"]},
{"id":5,"cell":["5","image","Voyageur Citizenship","Learning about and caring for your community.","0"]},
{"id":6,"cell":["6","image","Fish and Wildlife","Demonstrate your knowledge and involvement in fish and wildlife management.","0"]},
{"id":7,"cell":["7","image","Photography","To recognize photography knowledge and skills","0"]},
{"id":8,"cell":["8","image","Recycling","Demonstrate your knowledge and involvement in Recycling","0"]},
{"id":9,"cell":["10","image","Voyageur Leadership ","Show leadership ability","0"]},
{"id":10,"cell":["11","image","World Conservation","World Conservation Badge","0"]}
]}

答案 7 :(得分：0)

我正在使用WAMP 2.4，我对这个问题感到很疯狂，我尝试了很多东西，比如安装以前版本的PHP和5.2，我在Windows XP中试过，还有很多jqGrid选项。 非常感谢Oleg终于和Mariusz找到了唯一的一句话：

$responce = new stdClass();

在使用$ responce之前可以解决所有问题，现在我的网格工作得很好!!!

感谢我的朋友们。

相关问题
最新问题