Я использую jqgrid 4, и мне очень помогла стековеропоток, особенно Олег.
Проблема в том, что при первом открытии формы редактирования в выпадающих списках не отображаются выбранные значения.,И это происходит только при первом открытии формы редактирования.После первого раза, выпадающие списки устанавливаются на правильное значение в форме редактирования.Я использовал вещи с этой страницы: jqgrid Неправильный выбор значений выпадающего списка в окне редактирования , но проблема все еще существует.
Я изменил все, что предложил Олег.
Первыйпроблема, которую я упомянул, все еще существует.Более того, указатель даты в первом поле формы не появляется, пока я не нажму сначала в другом поле.
Мой код обновления -
, 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>
и форма данных:
$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
Пожалуйста, помогите!