我是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服务器上。
提前感谢。
我使用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');
});
我终于发现我错了。我的edit.php使用了一个名为"Numero"的变量,因为它是我的数据库中的主键,我需要它来更新右行。但因为它是主键,所以我不希望用户能够编辑它。因此,Numero变量似乎没有与变量的其余部分一起发送,因此更新请求无法成功。
为我愚蠢的错误道歉。感谢每一个帮助过我的人。