我使用PHP和MySQL从表中选择数据并在div中显示它而不刷新页面,使用jQuery,使用定时间隔。我希望能够有行(或单个单元格)的背景颜色的变化,其中的数据自上次刷新更改。然后,如果用户单击行(或行),它应该变回CSS中定义的常规颜色。我猜我应该在PHP中使用会话变量来比较刷新之间的值,但我不明白PHP将如何与Javascript交谈,因为它们是服务器/客户端技术。我发现了一个线程@ http://www.codingforums.com/showthread.php?t=191813,一个人正在寻找做同样的事情,他弄清楚了,但我不明白他的代码,它的碎片和好的和坏的代码。不知道有没有人能给我指个方向。谢谢。
编辑:这里是调用php脚本抓取数据的页面代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Tes View</title>
<link rel="stylesheet" type="text/css" href="offtime3.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
$(document).ready(function(){
$("#container").load('dcviewQuery.php');
var timer = null,
interval = 30000,
timer = setInterval(function () {
$("#container").fadeOut("slow").load('dcviewQuery.php').fadeIn("fast");
}, interval);
$(".dcview").live("blur", (function() {
if (timer !== null) return;
timer = setInterval(function () {
$("#container").fadeOut("slow").load('dcviewQuery.php').fadeIn("fast");
}, interval);
}));
$(".dcview").live("focus", (function() {
clearInterval(timer);
timer = null
}));
$.ajaxSetup({ cache: false });
});
</script>
</head>
<body>
<form action="viewajax-exec.php" method="post">
<div id="container"></div>
<input type="submit" value="Update" name="submit" />
</form>
</body>
</html>
下面是dcView.php的代码,它从表
中获取数据。$query="SELECT pID, fname, lname, offTime, pickUpTime, notes FROM mytable WHERE status <> 'Inactive' ORDER BY offTime";
$result=mysql_query($query) or die(mysql_error());
$num=mysql_numrows($result);
if($result)
{
if(mysql_num_rows($result) > 0)
{
echo "<table><tr>";
echo "<th id="fname">F. Name</th><th id="lname">L. Name</th><th id="date">Date</th><th id="offtime">Off Time</th><th id="pickup">Pick Up Time</th><th id="notes">Notes</th><th id="status">Comp?</th>";
echo "</tr>n";
$num = 0;
$i = 0;
while($row = mysql_fetch_array($result))
{
$pid = $row['pID'];
$tmptime1 = strtotime($row['pickUpTime']);
$tmptime2 = strtotime($row['offTime']);
$mydate = date("m-d-Y", $tmptime1);
$cjdate = date("Y-m-d", $tmptime2);
$putime = date("H:i", $tmptime1);
$offtime = date("H:i", $tmptime2);
$num++;
if ( $odd = $num%2 )
{
echo "<tr class="odd">";
}
else
{
echo "<tr class="even">";
}
echo "<input name="pid[]" type="hidden" value="$pid" />";
echo "<input name="jdate[]" type="hidden" value="$cjdate" />";
?>
<td id="fname" class="dcview"><?php echo $row['fname'];?></td>
<td id="lname" class="dcview"><?php echo $row['lname'];?></td>
<td id="date" class="dcview"><?php echo $mydate;?></td>
<td id="offtime" class="dcview"><input type="text" size="4" name="offtime[]" value="<?php echo $offtime;?>" /></td>
<td id="pickup" class="dcview"><?php echo $putime;?></td>
<td id="notes" class="dcview"><textarea rows="1" cols="15" name="notes[]" wrap="physical"><?php echo $row['notes'];?></textarea></td>
<td id="status" class="dcview"><input type="checkbox" name="status[]" value="Inactive" />
<?php
++$i;
echo "</tr>n";
}
echo "</table>n";
exit();
}
else
{
//Search failed
}
}
else
{
die("Query failed");
}
?>
我猜您可以忽略调用viewajax-exec.php的Submit按钮,因为该脚本更新数据库中的数据,但我无法弄清楚如何在不刷新整个页面的情况下将数据发送到服务器(但这是以后的另一个问题)。我取出了所有使用会话变量的临时代码,因为我试图弄清楚哪些标志被设置为什么。
我的解决方案是这样的:
index.php
ajax.js
script.js
result.php
index.php
包含您的HTML,并遍历从result.php
获得的结果以创建您的表元素。
ajax.js
每隔一段时间从result.php
请求新的结果。将结果与index.php
DOM中的数据进行比较,如果有更改,则更新表并为更新后的项分配updated
类。
script.js
更多的JS,其中包括一个处理程序,用于点击带有updated
类的项目。
result.php
JSON格式的结果列表,或者其他PHP和JS都能理解的格式。
如果你能给我们更多的细节,我们可以进一步解释。
如果您正在更改多个行和单元格,您总是可以说,当项目失去焦点时,检查前一个值(来自数据库)是否等于单元格的当前值。
var id;
$(":input").focus(function () {
id = this.id;});
$(":input").blur(function() {
if this.id <> id
//Call an update
});
如果没有看到正在使用的代码或想要完成的任务,就很难确切地说出您需要什么。
听起来你好像在找一种机器?或者,您可能希望用户在编辑后看到其他人是否编辑了该表?
然而,在任何情况下,听起来你需要一些版本控制在你的数据库中,如果你希望复制任何可伸缩性。尝试创建一个版本表并保持数据简单,例如数据表的关系ID,其中保存了实际的行数据,一个描述数据内容的列(过去版本、当前版本、草案等),特别是一个日期列。这样你就可以检查它是否在上次刷新后被编辑过,如果是,用一个新的类或变量或其他东西来表示它。
如果您想要一个版本类型的选项,您可能需要添加一列,说明哪个用户最后编辑了信息,然后输出结果,并提供覆盖后来的更改和内容的选项。