1

我是 jQ Grid 的新用户，我想实现一个编辑表单。我的网格当前链接到 SQL 数据库。SQL 数据库的数据正确显示在网格中。

当我选择一行并单击编辑按钮时，会出现一个编辑表单，其中包含所选行的数据。当我修改信息并单击提交时，修改显示在网格上，但我的** SQL 数据库没有更新**。如果我刷新页面，网格将显示 SQL 数据库的信息，我可以看到我的修改没有在数据库中进行（显示的数据与最初显示的数据相同）。

有人可以帮我吗？

这是我的网格代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First Grid</title>
 <link rel="stylesheet" type="text/css" media="screen" href="jquery-ui-1.10.2/themes/base/jquery.ui.all.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.8.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="ui.jqgrid.css" />

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

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

<script type="text/javascript">
jQuery.extend(jQuery.jgrid.defaults, { autoencode:true });
</script>


<script type="text/javascript">

$(function(){ 
  $("#editgrid").jqGrid({
    url:'example.php',
    datatype: 'xml',
    mtype: 'GET',
    colNames:['Numero','Nature', 'Nom','Qualification','PrixMax','PrixMin'],
    colModel :[ 
      {name:'Numero', index:'Numero', width:55,cellEdit:true, celledittype:'text'}, 
      {name:'Nature',
      index:'Nature',
      editable: true,
      edittype: 'text',
      editoptions: { size: 10},
      editrules: {required: true },
      formoptions: { label: 'Nature' },
      width:90}, 
      {name:'Nom', index:'Nom', width:180, align:'right',editable: true,edittype:'textarea'}, 
      {name:'Qualification', index:'Qualification', width:80, align:'right',editable: true,edittype:'textarea'}, 
      {name:'PrixMax', index:'PrixMax', width:80, align:'right',editable: true,edittype:'textarea'}, 
      {name:'PrixMin', index:'PrixMin', width:150, sortable:false,editable: true,edittype:'textarea'} 
    ],
    pager: '#pager',
    rowNum:10,
    rowList:[10,20,30],
    sortname: 'Numero',
    sortorder: 'desc',
    viewrecords: true,
    emptyrecords: "Nothing to display",
    gridview: true,
    editurl:'edit.php',
    edittype:'text',
    caption: 'My first grid',
    loadonce:true,
});
    $("#bedata").click(function(){
    var gr = jQuery("#editgrid").jqGrid('getGridParam','selrow');
    if( gr != null ) jQuery("#editgrid").jqGrid('editGridRow',gr,{height:280,reloadAfterSubmit:false,edit:true},{editurl:'edit.php',mtype:'POST'});
    else alert("Please Select Row");
});
}); 
</script>

</head>
<body>

<table id="editgrid"><tr><td/></tr></table> 
<div id="pager"></div> 
<input type="BUTTON" id="bedata" value="Edit Selected" />
</body>
</html>

这是应该更新我的数据库的edit.php：

<?php

$dbhost ="localhost";
$dbuser="root";
$dbpassword="";
$database="geoclients";
$db = mysql_connect($dbhost, $dbuser, $dbpassword) or die("Connection Error: " . mysql_error()); 
mysql_select_db($database) or die("Error connecting to db."); 
$tablename="clients";
mysql_set_charset('utf8',$database);
mysql_query("SET NAMES 'utf8'");


    $Num     =  mysql_real_escape_string($_POST['Numero']);
    $Nat   =  mysql_real_escape_string($_POST['Nature']);
    $Nom =  mysql_real_escape_string($_POST['Nom']);
    $Qual    =  mysql_real_escape_string($_POST['Qualification']);
    $PrixMax  =  mysql_real_escape_string($_POST['PrixMax']);
    $PrixMin   =  mysql_real_escape_string($_POST['PrixMin']);

    $sql = "UPDATE ".$tablename." SET Nature = '".$Nat."', Nom = '".$Nom."', Qualification = '".$Qual."', PrixMax = '".$PrixMax."' , PrixMin = '".$PrixMin."' WHERE Numero = ".$Num.";";

    echo $sql;


$result=mysql_query($sql) or die(mysql_error());

mysql_close($db);



?>

与数据库的连接与最初用于填充网格的代码相同（正在工作），所以我假设这个连接代码正在工作。我还检查了似乎没问题的请求的 SQL 语法。我的 SQL 数据库托管在本地 wamp 服务器上。

先感谢您。

4

2 回答 2

0

我使用 jqGrid，但不能说我曾经使用过内置编辑，我更喜欢自己处理所有这些东西以便更好地控制它。

看看这是否适合你：

$("#bedata").click(function() {

    var grid = $("#editgrid"),
        row  = grid.getGridParam('selrow'),
        data = grid.getRowData(row);

    if (row != null) {
        // Send the ajax request first
        $.ajax({
            url: edit.php,
            data: data,
            type: 'POST',
            success: function(data) {
                console.log(data); // check returned string here
               // here you can put extra code to handle the rows updating
            }
        });
    }
    else alert('Please select row');
});
于 2013-04-05T01:26:12.950 回答
0

我终于发现了我的错误。我的 edit.php 使用了一个名为“Numero”的变量，因为它是我数据库中的主键，我需要它来更新正确的行。但是因为它是主键，所以我不希望用户能够编辑它。因此，似乎 Numero 变量没有与变量的其余部分一起发送，因此更新请求无法成功。

对不起我的愚蠢错误。感谢所有帮助过我的人。

于 2013-04-06T00:13:10.670 回答