[原创+源码]绝对强悍:jQuery实现可编辑表格的用户管理系统 (二)

来源：互联网发布：f35知乎编辑：程序博客网时间：2024/05/01 19:45

如题，由于帖子长度限制，本文上接
[原创]jQuery+Ajax+Json+Php技术实现可编辑表格的用户管理系统（一）如题，我们给大家做了基础知识的铺垫，下面我们来看下如何实现功能
   首先，我们这里涉及到几个页面，
            1）jquery-post.html是整个页面的核心，用户显示数据和显示表单，可编辑的表格也是基于此页面
            2）jquery-post.php 实现的是向数据库中插入数据的操作页面
            2）jquery-post-member.php 实现的是从数据库中读取数据的操作页面
            3）jquery-update-member.php 实现的是更新数据到数据库中
以上文件已经打包可下载，下载地址： 20110330-31jQuery.rar (4.24 KB, 下载次数: 0)

分析如下：
   jquery-post.html

Code:

<!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">
<head>
<style>
#div1 {
background-color:#6F3;
border:#00F solid 1px;
width:400px;
height:200px;
left:50%;
top:50%;
position:absolute;
display:none;
}
#div0 {
background-color:#FF9;
border:#00F solid 1px;
width:300px;
height:100px;
position:absolute;
display:none;
overflow:auto;
}
#tab1{
width:500px;
text-align:center;
border:#999 1px solid;
border-collapse:collapse;
}
#tab1 td{
border:#999 1px solid;}
#tab1 th{
border:#999 1px solid;}
.one{
background-color:#FC9;}
.two{
background-color:#CF6;}
.over{
background-color:#F93;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="../include/jquery-1.5.1.min.js"></script>
<script type="text/javascript">
$(function(){
//处理用户单击事件
$("#btn1").click(function(){
$.post("./jquery-post.php",
$("#form1").serialize(),
function(responseText,textStatus){
if(responseText){
//获得居中位置
var le=($(window).width() - $('#div').outerWidth())/2;
var tp=($(window).height() - $('#div').outerHeight())/2;
//重新设定层的位置
$("#div1").css({"left":le,"top":tp});
//设置层的效果
$("#div1").show('slow');
/*重新加载一次数据，从数据库中读取出最新的数据*/
getMember();
/*
当鼠标点击层的时候，我们隐藏当前层
*/
$("#div1").click(function(){
//隐藏提示信息的div
$("#div1").hide('slow');
});
}
});
});
/*网页加载完毕时应该加载数据,这里，我们调用一下getMemger()*/
getMember();
});
/*
获得所有的用户信息，触发ajax请求
*/
function getMember(){
/*网页加载完毕时应该加载数据*/
$.post("./jquery-post-member.php",
function(responseText,textStatus){
//调用显示数据的函数
DispTable(responseText);
});
}
function DispTable(restr){
$('#tab1 tr:not(:first)').remove();
//获取服务器端传递的数据
var oo=eval("("+restr+")");
for(i=0;i<oo.length;i++){
//定义行元素
var tr=$("<tr></tr>")
//得到每个字段的值，并且生成一些td
var td=$("<td>"+oo[i].id+"</td> <td id='uname'>"+oo[i].uname+"</td> <td id='upass'>"+oo[i].upass+"</td> <td id='sex'>"+oo[i].sex+"</td> <td id='from1'>"+oo[i].from1+"</td>");
//将列直接添加到tr中
td.appendTo(tr);
//把所有的行追加到table中
tr.appendTo($("#tab1"));
}
/*表格隔行变色效果*/
$("#tab1 tr:even").addClass("one");
$("#tab1 tr:odd").addClass("two");
$("#tab1 tr").mousemove(function(){
$(this).addClass("over");
});
$("#tab1 tr").mouseout(function(){
$(this).removeClass("over");
});
/*
处理鼠标点击事件,当鼠标点击td的时候变成文本框
*/
$("#tab1 td").dblclick(function(){
//创建一个单行文本框
var inputObj=$("<input type='text'>");
//获取当前td对象
var tdObj=$(this);
//获取当前td文本内容
var tdText=tdObj.html();
//处理当td中已经存在input文本框后，点击没有反应
if(tdObj.children("input").length>0){
return false;
}
//设置当前文本框的内容
inputObj.val(tdText);
//清空td的内容
tdObj.html("");
//设置文本框的边框为0
inputObj.css("border-width","0");
//设置文本框的宽度和高度
inputObj.width(tdObj.width());
inputObj.height(tdObj.height());
//设置文本框的文字大小
inputObj.css("font-size","16px");
//设置文本框的背景颜色
inputObj.css("background-color",tdObj.css("background-color"));
//当点击后，向td中添加一个文本框
inputObj.appendTo(tdObj);
//点击文本框后选中文本框的值，并且获得焦点
inputObj.trigger("focus").trigger("select");
//点击文本框后取消广播事件
inputObj.click(function(){
return false;
});
inputObj.keyup(function(e){
//获取用户按下的键盘值
var keycode=e.which;
if(keycode==13){
//设置td的内容为新输入的内容
tdObj.html(inputObj.val());
//将数据更新到数据库中
/*
1)如何获取更新的条件，一般我们是根据id更新，但是如何获取id?
2)如何获取到要更新的字段？
3)如何获取到要更新的内容（值）
*/
if(confirm("您确定要更新到数据吗？")){
//获取第一个td的文本,也就是id
var sno=tdObj.parent("tr").children("td").eq(0).text();
//获取要更新的字段
var op=tdObj.attr("id");
//获取当前文本框的值
var value=$(this).val();
//alert("id:"+sno+",op:"+op+",val:"+value);
//根据参数立即更新数据
UpdateTable(sno,op,value);
}else{
}
}
//判断用户是否按下了esc键，如果按下则返回修改前得数据
if(keycode==27){
//设置td的内容为未修改前的内容
tdObj.html(tdText);
}
});
});
/*添加td上浮动层的效果*/
$("#tab1 td").mousemove(function(e){
//设置详细浮动层的位置
$("#div0").css({left:e.pageX+10,top:e.pageY+10});
//设置详细信息层的内容
$("#div0").html("<b>详细信息：</b> 单击隐藏<hr>"+$(this).html());
//详细显示浮动层
$("#div0").show('slow');
});
/*
给浮动层添加一个单击事件
*/
$("#div0").click(function(){
//清空当前div的内容
$(this).html("");
//单击后缓慢隐藏效果
$(this).hide("slow");
});
}
/*
更新最新数据到数据中
建立ajax请求
*/
function UpdateTable(sno,opt,val){
//建立ajax请求，将数据更新到数据库中
$.post("./jquery-update-table.php",{id:sno,option:opt,value:val},function(responseText,textStatus){
if(responseText){
alert("更新数据成功！");
}else{
alert("更新数据失败！");
}
});
}
</script>
</head>
<body>
<div id="div0"></div>
<div id="div1">插入成功</div>
<h3>jQuery+Ajax+Json+Php技术实现可编辑表格的用户管理系统</h3><br>
<form name="form1" id="form1" action="">
用户名：
<input type="text" name="uname" />
<br />
密　码：
<input type="text" name="upass" />
<br>
性　别：
<input name="sex" type="radio" value="男" />
男
<input name="sex" type="radio" value="女" />
女<br />
籍　贯：
<input type="text" name="from1" />
<br>
<input type="button" id="btn1" value="添加" />
</form>
<hr>
<div id="div2">
<table id="tab1" border="1">
<tr>
<th height="42" width="10%">编号</th>
<th width="30%">姓名</th>
<th width="30%">密码</th>
<th width="20%">性别</th>
<th width="10%">籍贯</th>
</tr>
</table>
</div>
</body>
</html>

在这个页面我们做了很多工作，包括添加用户信息的表单，从数据库中读取要显示的数据、鼠标跟随的层....总之这个页面时核心，每一步我都有详细的注释，应该能看清楚。

jquery-post.php

Code:

<?php
mysql_connect("localhost","root","123");
mysql_select_db("test");
mysql_query("set names utf8");
//定义sql语句
$sql="insert into member values(null,'{$_POST['uname']}','{$_POST['upass']}','{$_POST['sex']}','{$_POST['from1']}')";
//执行插入操作，并返回执行结果
$rs=mysql_query($sql);
echo $rs;
?>

这个页面主要是定义sql语句，并且插入到数据库中，学过php的应该不用解释了吧

jquery-post-member.php

Code:

<?php
//header("Content-Type:application/json;charset=UTF-8");
mysql_connect("localhost","root","123");
mysql_select_db("test");
mysql_query("set names utf8");
//查询所有的数据，并倒序
$sql="select * from member order by id desc";
//执行查询
$rs=mysql_query($sql);
//封装json格式的数组 [{name:"zhangsan",sex:"男"},{},{}]
while($rows=mysql_fetch_assoc($rs)){
//将当前的查询结果放到$arr中
$arr[]=$rows;
}
//将数组转换为json字符串
echo json_encode($arr);
?>

此页面用户查询数据，并且显示出来，并进行输出，输出成json对象格式，这一步是我们客户端页面解析json的基础
jquery-update-table.php

Code:

<?php
mysql_connect("localhost","root","123");
mysql_select_db("test");
mysql_query("set names utf8");
$sql="update member set {$_POST['option']}='{$_POST['value']}' where id={$_POST['id']}";
//执行sql语句
$rs=mysql_query($sql);
//返回更新的行数
echo $rs;
?>

可编辑表格中，当用户按下回车键后执行更新操作，将要更新的数据库更新到数据库中

源码下载： 20110330-31jQuery.rar

[原创地址] [源码下载] [更多原创，多多支持多]

推荐：
[源码] PHP+MySQL+jQuery实现随意拖动层并即时保存拖动位置