如题,由于帖子长度限制,本文上接
[原创]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
- <!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
- <?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
- <?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
- <?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实现随意拖动层并即时保存拖动位置