jqGrid - PHP，如何将编辑后的数据保存到服务器（MySQL）答案

【问题标题】：jqGrid - PHP , How to save edited data to server (MySQL)jqGrid - PHP，如何将编辑后的数据保存到服务器（MySQL）
【发布时间】：2018-09-23 12:03:00
【问题描述】：

我正在尝试学习 jqGrid，但我有些烦人我无法弄清楚的问题。我正在使用导航网格进行添加，编辑和删除数据。问题是，我可以添加、编辑或删除来自网络的数据。 但更改不会应用于我的服务器。所以例如，如果我编辑第一行，它会在我的导航网格中更改，但随后如果我重新加载页面，它会再次出现。

NavGridHTML.html

<!DOCTYPE html>
    <html>
    <head>
        <title>Navigation Grid</title>          
        <link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />

        <style type="text/css">
        html, body {
            margin: 0;
            padding: 0;
            font-size: 75%;
        }
        </style>

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

        <script type="text/javascript">
            $(function () {

                jQuery("#navgrid").jqGrid({

                    url: "GridPHP.php",
                    editurl:"GridEditPHP.php",
                    datatype: "json",
                    mtype: "GET",
                    //cellEdit: true,
                    //cellsubmit: "remote",
                    //cellurl: "GridEditPHP.php",
                    colNames: ["Film ID","Title","Description","Length","Rating"],
                    colModel: [
                        { name: "film_id", index: "film_id", width: 40, editable: false, editoptions: {readonly:true,size: 10}},
                        { name: "title", index: "title", width: 180, editable:true, editoptions: {size: 10}},           
                        { name: "description", index: "description", width: 700, sortable: false, editable:true, edittype: "textarea", editoptions: {rows:"3", cols:"30"}},
                        { name: "length", index: "length", width: 50, align: "right", editable:true, editoptions: {size: 10}},
                        { name: "rating", index: "rating", width: 70, align: "right", editable:true, editoptions: {size: 10}}
                    ],
                    pager: "#pagernav",
                    rowNum: 10,
                    rowList: [10,20,30],
                    sortname: "film_id",
                    sortorder: "asc",
                    viewrecords: true,
                    //gridview: true,
                    //autoencode: true,
                    caption: "Navigation Table"
                    //  height: 210

                });

                jQuery("#navgrid").jqGrid('navGrid','#pagernav',
                {edit:true,add:true,del:true, search: false, view: true}, // options
                {height: 280, reloadAfterSubmit:false, recreateForm: true, closeAfterEdit: true, editCaption: "The Edit Dialog", saveData: "Data has been changed! Save changes?", closeOnEscape: true}, // edit options
                {height: 280, reloadAfterSubmit:false, recreateForm: true, closeAfterAdd: true, closeOnEscape: true}, // add options
                {reloadAfterSubmit:false, closeOnEscape: true}, // del options
                {}, // search options
                {closeOnEscape: true}
                );

            });     
        </script>

    </head>
    <body>
        <table id="navgrid"><tr><td></td></tr></table>
        <div id="pagernav"></div>
    </body>
    </html>

GridPHP.php

<?php
include("GridCONFIG.php");

$page = $_REQUEST["page"];
$limit = $_REQUEST["rows"];
$sidx = $_REQUEST["sidx"];
$sord = $_REQUEST["sord"];

if (!$sidx) $sidx = 1;

$totalrows = isset($_REQUEST["totalrows"]) ? $_REQUEST["totalrows"]: false;

if($totalrows) {

    $limit = $totalrows;

}

$db =mysqli_connect($host, $username, $password, $database) or die ("Connection Error: " . mysqli_error($db));

mysqli_select_db($db,$database) or die ("Error connecting to db!");
$result = mysqli_query($db,"SELECT COUNT(*) AS count FROM film");
$row = mysqli_fetch_array($result,MYSQLI_ASSOC);
$count = $row['count'];

if ($count > 0 ) {

    $var = @($count/$limit);
    $totalpages = ceil ($var);

} else {

    $totalpages = 0;

}

if ($page > $totalpages) $page=$totalpages;

if ($limit < 0) $limit = 0;

$start = $limit*$page - $limit;
if ($start < 0) $start = 0;

$sql = "SELECT film_id, title, description, length, rating FROM film ORDER BY $sidx $sord LIMIT $start , $limit";
$result = mysqli_query($db,$sql) or die ("Couldn't execute query! ".mysqli_error($db));

$responce = new \stdClass();
$responce -> success = false;
$responce -> page = $page;
$responce -> total = $totalpages;
$responce -> records = $count;

$i = 0;
while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) {

    $responce -> rows[$i]["id"] = $row["film_id"];
    $responce -> rows[$i]['cell'] = array($row["film_id"],$row["title"],$row["description"],$row["length"],$row["rating"]);
    $i++;

}

echo json_encode($responce);
mysqli_close($db);

?>

GridEditPHP.php

<?php
include("GridCONFIG.php");

$db =mysqli_connect($host, $username, $password, $database) or die ("Connection Error: " . mysqli_error($db));
mysqli_select_db($db,$database) or die ("Error connecting to db.");

$filmid = $_POST["film_id"];
$title = $_POST["title"];
$description = $_POST["description"];
$length = $_POST["length"];
$rating = $_POST["rating"];

//switch($_REQUEST["oper"]) {
//
//  case "add":
//      $sql = "INSERT INTO film (film_id,title,description,length,rating) VALUES ($filmid,$title,$description,$length,$rating)";
//      mysqli_query($db, $sql);
//  break;
//  
//  case "edit":
//      $sql = "UPDATE film SET film_id=$filmid, title=$title, description=$description, length=$length, rating=$rating";
//      mysqli_query($db, $sql);
//  break;
//  
//  case "del":
//      $sql = "DELETE FROM film";
//      mysqli_query($db, $sql);
//  break;
echo "TEST!!!";
if($_REQUEST["oper"]=='add') {

    $sql = "INSERT INTO film (film_id,title,description,length,rating) VALUES ($filmid,$title,$description,$length,$rating)";
    if(mysqli_query($db, $sql)) {

        echo "Film added.";

    } else {

        echo "Error adding film: " .mysqli_error($db);

    }

} elseif($_REQUEST["oper"]=='edit') {

    $sql = "UPDATE film SET title=$title, description=$description, length=$length, rating=$rating WHERE film_id=$filmid";
    if(mysqli_query($db, $sql)) {

        echo "Film edited.";

    } else {

        echo "Error editing film: " .mysqli_error($db);

    }

} elseif($_POST["oper"]=='del') {

    $sql = "DELETE FROM film WHERE film_id=$filmid";
    if(mysqli_query($db, $sql)) {

        echo "Film deleted.";

    } else {

        echo "Error deleting film: " .mysqli_error($db);

    }

}

mysqli_close($db);

?>

如果有人能解决这个烦人的问题，我将不胜感激...... 仅供参考，我已经阅读了Documentation，并查看了互联网上的每一个示例或解决方案。但还是没找到解决办法。

还有一个问题：如何查看来自 GridEditPHP.php echo "TEST!!!"; 的输出... 我的意思是，我在哪里可以在我的网站上看到它？

数据库是名为“sakila”的示例数据库。

【问题讨论】：

我不是 PHP 开发人员，但我建议您在 GridPHP.php 中添加行 header('Cache-Control: private, max-age=0'); 和 header('Content-type: application/json');``before the line echo json_encode($responce);`。重要的是，填充网格的第一个/旧响应不会缓存在 wed 浏览器中。下一个问题：您在 jqGrid 中使用 film_id 列，您在 GridEditPHP.php 中使用该列，但将 不发送到服务器。如果您真的想向用户显示该列，则可以将选项 prmNames: { id: "film_id" } 添加到 jqGrid 选项。
@Oleg 首先感谢您的评论。我希望你能回答我的问题，因为我到处都能看到你对 jqGrid 主题的回答。我现在在 GridPHP.php 中添加了 header("Cache-Control: private, max-age=0") header("Content-type: application/json"); $page = $_REQUEST["page"]; $limit = $_REQUEST["rows"];。但在那之后，我在导航网格表上看不到任何结果。另外我修复了这条线，正如你所说的{edit:true,add:true,del:true, search: false, view: true, prmNames: {id: "film_id"}}, // options
prmNames: {id: "film_id"} 是 jqGrid 选项，而不是 navGrid 的选项。您当前将其放置在错误的位置。例如，将其移到rowList: [10,20,30], 之后。关于初始填充网格：我建议您使用 Chrome/IE/Firefox 的开发者工具的网络选项卡来查看来自服务器的响应，包括 HTTP 标头。附加问题：您使用哪个版本 jqGrid 以及来自哪个 fork（free jqGrid、商业Guriddo jqGrid JS 或版本
@Oleg 哦，谢谢你的推荐。网络选项卡正是我要找的东西。版本是 3.6，至少是 jqGrid/js/Changes 中的版本。 txt 说..我不确定它是哪个叉子，我不知道如何找到它，但我认为它是 Guriddo。
我开发了free jqGrid fork，向上兼容旧的 jqGrid 4.x 版本。你可以像here 中描述的那样从 CDN 加载它。请参阅示例here。如果您在文本编辑器中打开文件jquery.jqgrid.min.js，您将在文件启动的注释行中看到产品名称和版本。您可以使用Fiddler 工具代替开发者工具

标签： javascript php html mysql jqgrid

【解决方案1】：

在 GridEditPHP.php 中，我遇到了语法错误。

elseif($_REQUEST["oper"]=='edit') {

    $sql = "UPDATE film SET title=$title, description=$description, length=$length, rating=$rating WHERE film_id=$filmid";
    if(mysqli_query($db, $sql)) {

        echo "Film edited.";

    } else {

        echo "Error editing film: " .mysqli_error($db);

    }

$sql 应该这样设置：

$sql = "UPDATE film SET title='$title', description='$description', length=$length, rating='$rating' WHERE film_id=$filmid";

现在一切正常。我可以通过我的网络服务器添加、编辑或删除服务器中的任何数据。

另外感谢@Oleg，我通过他的建议解决了这个问题。见Network Tab - Developer Tools或Fiddler

【讨论】：