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

jqGrid with JSON data renders table as empty

提问人: 提问时间:11/4/2008 最后编辑:2 revsjgreep 更新时间:12/9/2013 访问量:46903

问:

我正在尝试创建一个 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 代码有帮助,我也可以发布它。

php javascript jquery json jqgrid

评论

0赞 johnny 7/31/2009
我很好奇你是怎么让classId走上这条路的?该值在您的页面中从何而来?
0赞 jgreep 8/7/2009
tableId 和 classId 是函数参数。整个配置块是函数的主体:函数 makeAwardsTable (classId,tableId)。调用页面如下所示: <?php $classId = $_REQUEST['id']; ?> <div id=“editAwardDiv<?php echo $classId ?>” class=“jqmWindow” /> <table class=“awardsList scroll” id=“awardsList<?php echo $classId ?>” name=“awardsList” ></table> <div id=“awardsList<?php echo $classId ?>_pager” class=“scroll”/> <script type=“text/javascript”> $(document).ready(function(){makeAwardsTable(<?php echo $classId ?>,“awardsList”+<?php echo $classId ?>);});</脚本>

答:

20赞 jgreep 11/4/2008 #1

我让它工作了!

dataType 字段应为 datatype。它区分大小写。

评论

1赞 dave 10/21/2012
这让我发疯了,不知道这需要多长时间,谢谢你的这篇文章!
0赞 darren #2

我不认为你的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"]}
]}
1赞 StuFuller #3

我还让它工作:datatype 是正确的拼写——它在示例中是这样显示的,但它与库中的其他所有内容不一致,所以很容易出错

我非常厌倦追逐这个稀疏的文档,我真的觉得 JSON 在 JavaScript 中使用是正确和恰当的,它确实被短暂地覆盖了,有利于 XML。Python 和 JavaScript 通过 JSON 结合在一起,是一个非常强大的组合,但这个特定的库是一个持续的斗争。

任何有替代方案的人:

1> 正确支持jQuery UI主题(包括圆角!(http://datatables.net 对主题的支持要好得多)

2> 允许调整列的大小(http://datatables.net 不支持开箱即用)

3> 允许子网格(http://datatables.net 允许您通过事件在这里做任何你想做的事情)

请告诉我。我在界面的这一部分上花费的时间比在界面的其余部分上花费的时间还要多,而且所有时间都花在搜索工作示例和“尝试事物”上,这越来越烦人。

S

评论

1赞 Rosdi Kasim 9/15/2010
jqGrid 是开源的,如果你觉得追逐文档很烦人,你可以在这里购买商业版本,trirand.net 或者你也可以为 jqGrid 文档做出贡献。
5赞 katrin #4

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

3赞 2 revsRosdi Kasim #5

从 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"]}
]}

评论

0赞 queen3 11/9/2010
此外,json 序列化中还有另一个错误(使用转义),jqGrid 也默默地吞下了这个错误,没有明显的错误。
1赞 jejernig #6

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

您的 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;
}

评论

0赞 halfpastfour.am 3/21/2011
感谢您的 LOVELY zend 模型!正是我需要的:D
1赞 2 revs, 2 users 74%Anil Baviskar #7

伙计们只是想在这方面帮助你。我得到了以下工作:

JSON格式

var mydata1 = { "page": "1", "total": 1, "records": "4","rows": [{ "id": 1, "cell": ["1", "cell11", "values1" ] },
    { "id": 2, "cell": ["2", "cell21", "values1"] },
    { "id": 3, "cell": ["3", "cell21", "values1"] },
    { "id": 4, "cell": ["4", "cell21", "values1"] }
]};

在重要行下方标记。数据类型“jsonstring”而不是“json”对我有用。

datatype: "jsonstring",

contentType: "application/json; charset=utf-8",

datastr: mydata1,

colNames: ['Id1', 'Name1', 'Values1'],

colModel: [
      { name: 'id1', index: 'id1', width: 55 },
      { name: 'name1', index: 'name1', width: 80, align: 'right', sorttype: 'string' },
      { name: 'values1', index: 'values1', width: 80, align: 'right', sorttype: 'string'}],

问候

1赞 3 revs, 3 users 79%Mariusz #8

就我而言,问题是由以下一行PHP代码引起的(取自jqGrid演示):

$responce->page = $page;

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

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 阅读器。

我通过创建空对象解决了这个问题:

$responce = new stdClass();
0赞 Alfx2 #9

我正在使用 WAMP 2.4,我对这个问题很疯狂,我尝试了很多东西,比如安装以前版本的 PHP 和 5.2,我在 Windows XP 中尝试过,还有很多 jqGrid 选项。 好吧,最后感谢奥列格和马里乌什,我找到了唯一的一行:

$responce = new stdClass(); 

以前使用$response可以解决所有问题,现在我的网格很好用!!

谢谢我的朋友。