Question

由于某种原因，我的jqGrid插件的前端（HTML）无法与插件的后端（PHP）正常通信。我现在已经花了五个小时，而且我完全没有表现出来。我已经尝试过XML和jSon方法。我有一种感觉，我使用过时的后端方法;但是，我无法确定，因为我找不到那么棒的文档。我会在这里发布我的代码，因为我真的在写这个时睡着了，并会尽快回来查看更新（快速小睡）。

前端

<?php 
require_once 'tabs.php';
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>jQuery jqGrid Demonstration</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" media="screen" href="themes/redmond/jquery-ui-1.8.2.custom.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="themes/ui.multiselect.css" />

    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/jquery-ui-custom.min.js" type="text/javascript"></script>
    <script src="js/i18n/grid.locale-en.js" type="text/javascript" ></script>

    <script type="text/javascript">
        $.jgrid.no_legacy_api = false;
        $.jgrid.useJSON = true;
    </script>

    <script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>

<script type="text/javascript">
//<![CDATA[
    $(document).ready(function() {
        // first create the grid
        $('#grid').jqGrid({
    url:'grid.php',
    datatype: "json",
    height: 100,
    width: 900,
    colNames:['Customer ID','Hardware ID', 'Username','Password','Email','Last Login','Last IP','Registration Date','Expire Date'],
    colModel:[
        {name:'customerid',index:'customerid', width:150},
        {name:'hardware_id',index:'hardware_id', width:150},
        {name:'username',index:'username', width:100},
        {name:'password',index:'password', width:100},
        {name:'email',index:'email', width:100},
        {name:'lastlogin',index:'lastlogin', width:100},
        {name:'lastipaddress',index:'lastipaddress', width:100},
        {name:'registration_date',index:'registration_date', width:100},
        {name:'expire_date',index:'expire_date', width:100}
    ],
    rowNum:5,
    rowList:[5,8,10,20,30], 
    mtype: "GET",
    gridview: true,
    pager: '#pager',
    sortname: 'customerid',
    viewrecords: true,
    sortorder: "desc",
    caption: "Virtual scrolling on local data"
});

jQuery("#grid").jqGrid('navGrid','#pager2',{edit:false,add:false,del:false});
        // now you can any time change the width of the grid
        $('#grid').jqGrid('setGridWidth', 900);


    });

//]]>
</script>
  </head>

  <body>
      <div>
          <?php include ("grid.php");?>
      </div>
      <div id="pager"></div>

   </body></html>

后端 - Grid.php

<?php

    include '../dbc.php';
    page_protect();
    require_once 'jq-config.php';
    // include the jqGrid Class
    require_once ABSPATH."php/jqGrid.php";
    // include the driver class
    require_once ABSPATH."php/jqGridPdo.php";
    // Connection to the server

    $link = new PDO(DB_DSN,DB_USER,DB_PASSWORD);
    // Tell the db that we use utf-8
    $link ->query("SET NAMES utf8");

    // Create the jqGrid instance
    $grid = new jqGridRender($link);

    $username = $_SESSION['user_name'];
    $grid->SelectCommand = "SELECT * FROM tblcustomer_$username";
    // set the ouput format to json
    $grid->dataType = 'json';
    // Let the grid create the model
    $grid->setColModel();
    // Set the url from where we obtain the data
    $grid->setUrl('grid.php');
    // Set some grid options
    $grid->setGridOptions(array("rowNum"=>100,"sortname"=>"customerid","height"=>150));

    // Change some property of the field(s)
    $grid->setColProperty("lastlogin", array(
        "formatter"=>"date",
        "formatoptions"=>array("srcformat"=>"Y-m-d H:i:s","newformat"=>"m/d/Y"),
        "search"=>false,
        "width"=>"400"
        ));
    // Registration date
    $grid->setColProperty("registration_date", array(
        "formatter"=>"date",
        "formatoptions"=>array("srcformat"=>"Y-m-d H:i:s","newformat"=>"m/d/Y"),
        "search"=>false,
        "width"=>"400"
        ));
    $grid->setColProperty("expire_date", array(
        "formatter"=>"date",
        "formatoptions"=>array("srcformat"=>"Y-m-d H:i:s","newformat"=>"m/d/Y"),
        "search"=>false,
        "width"=>"400"
        ));
    $grid->setColProperty("customerid",array("width"=>"650"));
    $grid->setColProperty("hardware_id",array("width"=>"250"));
    $grid->setColProperty("username",array("width"=>"150"));
    $grid->setColProperty("password",array("width"=>"150"));
    $grid->setColProperty("email",array("width"=>"150"));
    $grid->setColProperty("lastipaddress",array("width"=>"100"));

    $grid->setFilterOptions(array("stringResult"=>true));
    $grid->navigator=true;
    $grid->setNavOptions('navigator',array("excel"=>true,"add"=>true,"edit"=>true,"view"=>true,"del"=>true,"search"=>true));
    // Enjoy
    $grid->renderGrid('#grid','#pager',true, null, null, true,true);
    $link = null;
    ?>

Answer 1

我没有使用任何商业版本的jqGrid，如jqSuite或jqGrid for PHP，但在第一次看the demo page后，我发现你的代码中存在一些问题：

您的代码是jqGrid和jqGrid商业版代码的混合。

如果你使用jqGrid for PHP，你应该删除 $(document).ready(function() {/*the code should be removed*/中的代码。因为你使用了这行

$grid->renderGrid('#grid','#pager',true, null, null, true,true);

在您的PHP代码中，您应该将HTML代码的正文

<div> 
    <?php include ("grid.php");?> 
</div>

如果HTML片段<table id="grid"></table><div id="page"></div>将生成您的PHP代码。

如果您不使用商业版的jqGrid，则应在HTML代码中加入<table id="grid"></table>。您还应将'#pager2'的{{1}}参数更改为'navGrid'。要使网格填充数据，您需要将jqGrid的'#pager'参数更改为为网格提供JSON数据的任何URL。有关JSON数据的格式，请参阅the documentation。

前端和后端之间的通信错误

1 个答案: