使用 AJAX 和 PHP 将数据加载到 jqGrid答案

【问题标题】：Loading data to jqGrid using AJAX and PHP使用 AJAX 和 PHP 将数据加载到 jqGrid
【发布时间】：2015-08-16 10:56:32
【问题描述】：

我在浏览器端有以下代码。

<!DOCTYPE html>
<html>
  <head>
    <script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
    <script src="js/grid.locale-en.js" type="text/javascript"></script>
    <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script> 
    <link href="css/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" type="text/css" media="screen"/>
    <link href="css/ui.jqgrid.css" rel="stylesheet" type="text/css" media="screen"/>
    <link href="css/jqGrid.css" rel="stylesheet" type="text/css" media="screen"/>

    <script type="text/javascript">
      $(document).ready(function () {
        $("#tblevents").jqGrid({
        url: "getGridData.php",
        datatype: "json",
        mtype: "POST",
        postData: {
          search: function() { return 'manage'; }
        },
        colModel: [
          {name:'id',index:'id',label:'ID', width:10}, 
          {name:'eventdate',index:'eventdate',label:'Event date', width:100, align:'center', sorttype:'date'},
          {name:'reportdate',index:'reportdate',label:'Report date', width:180, align:'left'},
          {name:'eventdescription',index:'eventdescription',label:'Description', width:430}
        ],
        rowNum: 10,
        rowList: [10,20],
        pager: '#pager',
        height: '100%',
        width: 'autowidth',
        viewrecords: true,       
        gridview: true,
        caption: "ATM-ANS Occurrences"
        });
      });      
    </script>
  </head>

  <body>
    <div class="mycenter">
      <table id='tblevents'></table>
      <div id='pager'></div>
    </div>

  </body>
</html>

服务器端代码。

<?php

$sqconn = "mysql:host=localhost;dbname=eoccurrence";
$dbh = new PDO($sqconn, 'user', '');


$page = $_POST['page']; 
$limit = $_POST['rows']; 
$sidx = $_POST['sidx']; 
$sord = $_POST['sord']; 

if(!$sidx) {$sidx =1;} 

try {
  $SQLQues = "SELECT COUNT(*) AS count FROM event"; 
  $cmd = $dbh->query($SQLQues, PDO::FETCH_ASSOC); 
  $res = $cmd->fetchAll();

  $count = $res[0]['count']; 
  if( $count > 0 && $limit > 0) {$total_pages = ceil($count/$limit);} 
  else {$total_pages = 0;}
  if ($page > $total_pages) {$page=$total_pages;}
  $start = $limit*$page - $limit;
  if($start <0) {$start = 0;} 

  $SQLQues = "SELECT ID, date_format(eventdate, '%d-%m-%Y %H:%i') AS eventdate, " . 
             "date_format(reportDate, '%d-%m-%Y') AS reportdate, SUBSTRING(eventdescription,1,70) AS eventdescription " . 
             "FROM event" . 
             " ORDER BY event.eventdate DESC LIMIT $start , $limit";

  $cmd =  $dbh->query($SQLQues, PDO::FETCH_BOTH);

  $i=0;
  while ($row = $cmd->fetch()) {
    $responce->rows[$i]['id']=$row['ID'];
    $responce->rows[$i]['cell']=array($row['eventdate'],$row['reportdate'],$row['eventdescription']);
    $i++;
  }
  echo json_encode($response);
  return;  
} catch (PDOException $exc) {
  echo $exc->getTraceAsString();
}

从 php 编码到浏览器的 $response 如下图所示，使用 XDebug 捕获。

生成的网格如下图所示，根本没有行数据。我做错了什么？

【问题讨论】：

标签： php ajax jqgrid

【解决方案1】：

 <script type="text/javascript">
   $(document).ready(function () {
   $("#tblevents").jqGrid({
   url: "getGridData.php",
  datatype: "json",
  mtype: "POST",
   colNames: ["Id","eventdate", "reportdat", "event 
   description"],
  colModel: [
    {name:'id'}, 
    {name:'eventdate'},
    {name:'reportdate'},
    {name:'eventdescription'}
    ],
  pager: "#pager",
  rowNum: 10,
  rowList: [10,20],
  sortorder: "asc",
  height: 'auto',
  viewrecords: true,
  gridview: true,
  caption: "ATM-ANS Occurrences"
});

});

【讨论】：