php - 无法以json格式将数据从php添加到jqGrid

您好StackOverFlow国家。我正在尝试向jqGrid添加信息，该信息是从MySQL数据库检索到的。我有两个文件=> index.html和data.php（都在同一目录中）

index.html源=>

<script type="text/javascript">
$(function(){
    $("#jqGrid_tb").jqGrid({
        url: "data.php",
        datatype: "json",
        sortable: true,
        height: "auto",
        colNames: ["Name","Surname","Birth Year","Famous Film"],
        colModel: [
            {name: "name", index: "name", width: "150"},
            {name: "surname", index: "surname", width: "150"},
            {name: "b_year", index: "year", width: "150"},
            {name: "film", index: "film", width: "200"}
        ],
        rowNum: 5,
        rowList: [5,10,15],
        viewrecords: true,
        pager: $("#pager"),
        caption: "Famous Actors",
    }).navGrid("#pager");
});
</script>

<div id="grid">
    <table id="jqGrid_tb"></table>
    <div id="pager"></div>
</div>

data.php源=>

include ("JSON.php");

$json = new Services_JSON();

$con = new mysqli("host","user","pswd","db");

if (!$con->connect_errno){
    if ($r = $con->query("SELECT * FROM actors")){
        while ($row = $r->fetch_assoc()){
            $info[] = array(
                "name" => $row[name],
                "surname" => $row[surname],
                "b_year" => $row[b_year],
                "film" => $row[film],
            );
        }
        $r->free();
    }
}

echo $json->encode($info);

if (isset($con)){
    $con->close();
}

显示的jqGrid在index.html文件中没有任何信息，在打开data.php文件信息时也成功地将其编码为JSON格式，这是我无法理解的错误。请帮忙，谢谢...

最佳答案

您的回复格式有误。您可以转到jqGrid Demos页，在展开“加载数据”然后选择“ JSON数据”后，您将找到PHP / MySQL的示例。

正确的数据格式应如下所示：

{
    "total": "1",
    "page": "1",
    "records": "2",
    "rows": [
        { "name": "Robert", "surname": "De Niro", "b_year": "1943", "film": "Once Upon A Time In America" },
        { "name": "Al", "surname": "Pacino", "b_year":"1971", "film": "Scent Of A Woman"}
    ]
}

哪里：


total->总页数
page->当前页码
records->记录总数
rows->数据行


同样，如果您希望行成为对象，则需要在jqGrid repeatitems选项中禁用jsonReader：

$("#jqGrid_tb").jqGrid({
    ...
    jsonReader: { repeatitems: false }
});

还建议行具有唯一的id供以后参考。