免费 jqGrid - JSON 使用 PHP 编码示例

Question

免费的 jqGrid 使用以下 JSON name:value 对格式的数据：

var data = {
        "page": "1",
        "records": "3",
        "rows": [
            { "DataID": "1", "DataDesc": "Test 1", "DataTitle": "Test 1" }
        ]
    };

我在 PHP 脚本中有以下内容：

$i=0; 
while ($row = mysql_fetch_assoc($result)) {
      $data->rows[$i]['cell']=array($row); 
      $i++;
}
print json_encode($data);

哪个returns:

{"rows":[{"cell":[{"user_id":"00082563","first_name":"Peter","case_title":"Male with STI (urethritis)","case_started":"2017-06-02 10:52:10"}]}]}

看起来没问题。但是，对于下面代码的 JSON 部分，网格根本不显示。

    function loadFirstGrid() {
        $("#FirstGrid").jqGrid({
            url: "scripts/json_test.php?user=" + user,
            dataType: "json",
            mtype: "GET",
            postData: {
                json: JSON.stringify(data)
            },
            colModel: [{
        name: "user_id",
        label: "User ID",
        width: 120
    },
    {
        name: "first_name",
        label: "Name",
        width: 400
    },
    {
        name: "case_title",
        label: "Case Title",
        width: 500
    },
    {
        name: "case_started",
        label: "Case Started",
        width: 200
    },
],
            emtyrecords: "Nothing to display",
            viewrecords: true,
            sortable: true,
            shrinkToFit: false,
            autowidth: true,
            caption: 'First Grid'
        });
    }

但是如果我删除postData部分有以下内容，网格显示，但当然没有数据。

  function loadFirstGrid() {
    $("#FirstGrid").jqGrid({
        url: "scripts/json_test.php?user=" + user,
        dataType: "json",
        mtype: "GET",
        colModel: [{...

有什么想法吗？

Answer 1

首先JavaScript是区分大小写的语言，jqGrid会忽略参数dataType: "json"。您应该将其修复为 datatype: "json".

其次，您使用 JSON 数据的奇异格式：

{
    "rows": [{
        "cell": {
            "user_id": "00082563",
            "first_name": "Peter",
            "case_title": "Male with STI (urethritis)",
            "case_started": "2017-06-02 10:52:10"
        }
    }]
}

而不是

{
    "rows": [ {
        "user_id": "00082563",
        "first_name": "Peter",
        "case_title": "Male with STI (urethritis)",
        "case_started": "2017-06-02 10:52:10"
    }]
}

或

[ {
    "user_id": "00082563",
    "first_name": "Peter",
    "case_title": "Male with STI (urethritis)",
    "case_started": "2017-06-02 10:52:10"
}]

你不使用 loadonce: true 并且不清楚，你是否打算实现服务器端分页，数据排序和过滤，或者你想要一次 return 所有数据，jqGrid 应该使用客户端分页、排序和过滤。

最后，你应该使用name属性colModel对应user_id的属性。理解这一点非常重要，jqGrid 必须为网格的每一行分配唯一的 id（参见 here）。因此，您必须通知 jqGrid，其中属性包含 rowid。您可以使用 jsonReader: { id: "user_id" } 或在 user_id.

列中包含属性 key: true

演示 https://jsfiddle.net/OlegKi/qgrwymuu/1/ 包含上述修改的示例。它使用 JSFiddle 的 Echo 服务来模拟服务器，响应一些 JSON 数据。

Answer 2

好的，终于解决了这个问题并让它与这个一起工作

function loadFirstGrid() {
    $("#FirstGrid").jqGrid({
         url: "scripts/json_test.php?user=" + user,
        dataType: "json",
        mtype: "GET",
      colModel: [
            {name: "user_id", label:"User ID", width: 120},
            {name: "first_name", label:"Name", width: 400},
            {name: "case_title", label:"Case Title", width: 500},
            {name: "case_started", label:"Case Started", width: 200},
        ],
        emtyrecords: "Nothing to display",
        viewrecords: true,
        sortable: true,
        shrinkToFit: false,
        autowidth: true,
        caption: 'First Grid',
    });
}

为 jqGrid 获取正确的格式 JSON：

{"page":"1","total":"1","records":"1","rows":[{"user_id":"00082563","first_name":"Peter","case_title":"Male with STI (urethritis)","case_started":"2017-06-02 10:52:10"}]}

我使用了以下 PHP 脚本：

$page = '1';
$total_pages = '1';
$count = '1';

$data = (object) array('page' => $page, 'total' => $total_pages, 'records' =>$count, 'rows' => "");

  $data->page = $page;
  $data->total = $total_pages;
  $data->records = $count;

$i=0; 
while ($row = mysql_fetch_assoc($result)) {
      $data->rows=array($row); 
      $i++;
}
print json_encode($data);
?>

（注意：我不关心页数，total_pages 并且算作我的网格将永远只有一个主记录和多个只有一个记录的子网格）。所以希望这对某人有帮助；文档或示例中没有太多描述如何使用 Free jqGrid 执行此操作的内容；-(

免费 jqGrid - JSON 使用 PHP 编码示例

Free jqGrid - JSON encode example using PHP

php

json

jqgrid