我正在使用jqgrid 4，我从stackoverflow得到了很多帮助，特别是Oleg。
问题在于，当我第一次打开编辑表单时，组合框不显示所选值。 这只发生在编辑表单的第一次打开时。 第一次将组合框在编辑表单中设置为正确的值。 我使用了此页面中的内容：jqgrid incorrect select drop down option values in edit box但问题仍然存在。
我改变了奥列格提出的所有建议。
我提到的第一个问题仍然存在。此外，在我首先按下另一个字段之前，表单第一个字段中的日期选择器不会出现。
我的更新代码是
html是
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7">
<title>Grid</title>
<?php
session_start();
include("showprogram.php");
?>
<link rel="stylesheet" type="text/css" media="screen" href="src/css/jquery-ui-1.8.1.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="src/css/ui.jqgrid.css" />
<script type='text/JavaScript' src='Scripts/calendar.js'></script>
<!-- <script type='Text/JavaScript' src='scw.js'></script> -->
<script src="Scripts/jquery.js" type="text/javascript"></script>
<script src="Scripts/jquery.blockUI.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
<script src="js/jquery.layout.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-ui-timepicker-addon.js" type="text/javascript"></script>
<style type="text/css">
#list1 {
font-size : 12px
}
body {z-index: 1000}
</style>
<script type='text/JavaScript'>
function showprogram () {
document.all.Calculation.style.visibility = "visible";
try {
ShowSchedule('#list1', '#pager1');
} catch (e) {
alert("An exception occurred while fetching the schedule. Error name: " + e.name + ". Error message: " + e.message);
}
}
</script>
</head>
<body>
<div id="grid" style="display:inline;">
<table id="list1" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager1" class="scroll" style="text-align:center;"></div>
</div>
</body>
和dataform是：
$page = $_GET['page']; // get the requested page
$limit = $_GET['rows']; // get how many rows we want to have into the grid
$sidx = $_GET['sidx']; // get index row - i.e. user click to sort
$sord = $_GET['sord']; // get the direction
if(!$sidx) $sidx =1;
// connect to the database
include ('../library/opendb.php');
$result = mysql_query("SELECT COUNT(*) AS count FROM customers ");
$row = mysql_fetch_array($result,MYSQL_ASSOC);
$count = $row['count'];
if( $count >0 ) {
$total_pages = ceil($count/$limit);
} else {
$total_pages = 0;
}
if ($page > $total_pages) $page=$total_pages;
$start = $limit*$page - $limit; // do not put $limit*($page - 1)
$SQL = "SELECT ID as id,Day AS Day, CustomerName AS name
FROM customers";
$result = mysql_query( $SQL ) or die("Couldn t execute query.".mysql_error());
if ( stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml") )
{
header("Content-type: application/xhtml+xml;charset=utf-8");
}
else
{
header("Content-type: text/xml;charset=utf-8");
}
$et = ">";
echo "<?xml version='1.0' encoding='utf-8'?$et\n";
echo "<rows>";
echo "<page>".$page."</page>";
echo "<total>" . $total_pages . "</total>";
echo "<records>".$count."</records>"; // be sure to put text data in CDATA
while($row = mysql_fetch_array($result,MYSQL_ASSOC))
{
echo "<row id='". $row[id]."'>";
echo "<cell>". $row[id]."</cell>";
echo "<cell>". $row[Day]."</cell>";
echo "<cell>". iconv("ISO-8859-7", "UTF-8", $row[name])."</cell>";
echo "<cell> Is this a button?<input type='button' value='E' onload=\"alert('ok');\"/> </cell>";
echo "</row>";
}
echo "</rows>";
include ('../library/closedb.php');
，add.php是
$page = $_GET['page']; // get the requested page
$limit = $_GET['rows']; // get how many rows we want to have into the grid
$sidx = $_GET['sidx']; // get index row - i.e. user click to sort
$sord = $_GET['sord']; // get the direction
$oper = $_POST['oper'];
if(!$sidx) $sidx =1;
$Day = $_POST['Day'];
$name = $_POST['name'];
include ('../library/opendb.php');
//Set at the right position
$name=$name+1;
if($oper == 'add')
{
$sql="INSERT INTO Customers (
Day,
CustomerName VALUES (
'".$Day."',
'".$name."')";
echo $sql;
$result = mysql_query($sql) or die (_ERROR26.":".mysql_error());
include ('../library/closedb.php');
}
elseif($oper == 'del')
{
$id = $_POST['id'];
$id=mysql_real_escape_string($id);
$sql="DELETE FROM customers
WHERE ID=
'".$id."'";
echo $sql;
$result = mysql_query($sql) or die (_ERROR26.":".mysql_error());
include ('../library/closedb.php');
}
elseif($oper == 'edit')
{
$id = $_POST['id'];
$id=mysql_real_escape_string($id);
$sql="UPDATE customers SET
Day = '".$Hmera."',
CustomerName = '".$name."'
WHERE ID = '".$id."'";
echo $sql;
$result = mysql_query($sql) or die (_ERROR26.":".mysql_error());
include ('../library/closedb.php');
}
和showprogram.php：
function getDatacustomer()
{
include ('../library/opendb.php');
$SQL = "SELECT CustomerName FROM customers ORDER BY CustomerID ;";
$result = mysql_query( $SQL ) or die("Couldn t execute query.".mysql_error());
$count = mysql_num_rows($result);
include ('../library/closedb.php');
$value="";
$i=0;
while($row = mysql_fetch_array($result,MYSQL_ASSOC))
{
if ($i!=($count-1)){
$value=$value.''.$i.':'. $row[CustomerName].';';}
else
{$value=$value.''.$i.':'. $row[CustomerName].'';}
$i=$i+1;
}
$value='value:"'.$value.'"';
return $value;
}
?>
<script type='text/JavaScript'>
function ShowSchedule(list, pager) {
jQuery().ready(function (){
jQuery(list).jqGrid({
url:Url,
datatype: "xml",
height: "auto",
colNames:['id','Day','name'],
colModel:[
{name:'id',index:'id', width:40, align:'right', editable:false, editoptions:{readonly:true,size:10}},
{name:'Day',index:'Day', width:70, align:'right', editable:true, sorttype: 'date', editrules:{date:true},
editoptions:{dataInit:function(elem){setTimeout(function()
{$(elem).datepicker({dateFormat:"yy-mm-dd"});},100);}}},
{name:'name',index:'name', width:120, align:'right', editable:true, edittype:'select',editoptions:{<?php echo getDatacustomer() ?>}},
],
rowNum:30,
rowList:[10,20,30],
pager: pager,
sortname: 'Day',
viewrecords: true,
sortorder: "asc",
loadonce: true,
shrink: true,
//toppager: true, for toppage pager
editurl:'add.php',
caption:"Grid",
forceFit : true
});
jQuery(list).jqGrid('navGrid',pager,{edit:true,add:true,del:true,search:false,view:true, reload:true},
{width:600,height:"auto",
reloadAfterSubmit:true,
closeAfterEdit: true,
recreateForm: true,
onClose: function() {jQuery(list).jqGrid('setGridParam',{datatype:'xml', url:Url}).trigger('reloadGrid');},
beforeShowForm: function(form) {
var dlgDiv = $("#editmod" + jQuery(list)[0].id);
var parentDiv = dlgDiv.parent(); // div#gbox_list
var dlgWidth = dlgDiv.width();
var parentWidth = parentDiv.width();
var dlgHeight = dlgDiv.height();
var parentHeight = parentDiv.height();
// TODO: change parentWidth and parentHeight in case of the grid
// is larger as the browser window
dlgDiv[0].style.top = "260 px";
dlgDiv[0].style.left = "600 px";
}
},
{width:600,height:"auto",reloadAfterSubmit:true,closeAfterAdd: true,recreateForm: true, onClose: function() {
jQuery(list).jqGrid('setGridParam',{datatype:'xml', url:Url}).trigger('reloadGrid');},beforeShowForm: function(form) {
var dlgDiv = $("#editmod" + jQuery(list)[0].id);
var parentDiv = dlgDiv.parent(); // div#gbox_list
var dlgWidth = dlgDiv.width();
var parentWidth = parentDiv.width();
var dlgHeight = dlgDiv.height();
var parentHeight = parentDiv.height();
// TODO: change parentWidth and parentHeight in case of the grid
// is larger as the browser window
dlgDiv[0].style.top = "260 px";
dlgDiv[0].style.left = "600 px";
}
},
{width:600,height:"auto",reloadAfterSubmit:true,recreateForm: true},
{height:280,reloadAfterSubmit:true},
{width:650,height:"auto",reloadAfterSubmit:true,recreateForm: true, beforeShowForm: function(form) {
var dlgDiv = $("#viewmod" + jQuery(list)[0].id);
var parentDiv = dlgDiv.parent(); // div#gbox_list
var dlgWidth = dlgDiv.width();
var parentWidth = parentDiv.width();
var dlgHeight = dlgDiv.height();
var parentHeight = parentDiv.height();
// TODO: change parentWidth and parentHeight in case of the grid
// is larger as the browser window
dlgDiv[0].style.top = "100 px";
dlgDiv[0].style.left = "600 px";
}},
{});
jQuery(list).jqGrid('setGridParam',{datatype:'xml', url:Url}).trigger('reloadGrid');
});
}
我想在数据库的网格中使用的表格如下：
id Day CustomerName
1 2011-09-09 John
请帮忙！
答案 0 :(得分：0)
您的代码有太多错误。我建议您将代码与jqGrid文档的My First Grid部分代码进行比较。我只指向那里的一些因为所有错误的列表将太长：
<!DOCUMENT ...>行作为生成PHP文件的HTML文件的第一行。最简单的表单有HTML5：<!DOCUMENT html>。目前您使用jQuery UI和jqGrid不支持的quirks mode。此外，您在 showprogram.php之前包含了当前的<html>事件。jquery-ui-1.8.1.custom.css，则不需要包含ui.datepicker.css。如果您添加ui.jqgrid.css，则不需要包含jqModal.css。包含jquery.js和jquery-1.3.2.min.js的是下一个错误。下一个错误包括ui.datepicker.js，jquery-ui-1.8.1.custom.min.js和jquery.ui.datetimepicker.min.js而不是一个jquery-ui-1.8.1.custom.min.js。如果您包含jquery.jqGrid.min.js，则包含相同代码grid.common.js，... jqDnR.js的非最小化部分是错误的。我可以继续...... jQuery(list).setGridParam之类的方法，只需调用 jQuery(document).ready(function () {...});内的（旧样式jQuery().ready(function (){...});的使用或块外的错误）。jQuery(list).trigger("reloadGrid") 将创建网格（jQuery(list).jqGrid({...});之前）错误。jQuery(list).jqGrid({...});创建网格。它创建了许多内部结构并创建了网格的许多HTML元素，如标题，列标题，寻呼机等。 网格只应创建一次。如果您想在网格中重新加载数据，则应使用jQuery(list).trigger('reloadGrid')。在您当前的代码中，例如在onClose事件处理程序中，您只需调用ShowSchedule，这将尝试再次创建网格，这是错误的。因此，您应该检查填充代码并重新设计如何在端口中划分代码。我可以重复一遍 上面的错误列表不完整。您必须仔细检查您的代码并重写其中的许多部分。
更新：您修改的代码仍然是PHP代码和JavaScript代码的混合。我自己不使用PHP，但我认为你在组合框中选择项目的问题只是因为混合而存在。
代码中唯一的语法错误是colModel定义末尾使用尾随逗号（,]是非法的）。如果我只使用一些简单的XML输入代码和<?php echo getDatacustomer() ?>的一些简单结果（我使用value:'John:John;Bob:Bob'）代码就可以看到the demo。
更好的方法是将JavaScript代码与PHP代码明确分开。我建议您使用editoptions的dataUrl属性。在这种情况下，PHP代码的相应部分应该生成
<select><option value='John'>John</option><option value='Bob'>Bob</option></select>
而不是value:"John:John;Bob:Bob"。
更新2 ：选项
ajaxEditOptions: {cache: false}
应解决您的问题。