项目开发实战 jQuery+php+mysql实现数据上传功能
2012-09-28 17:41
1101 查看
今天老板给我一个任务,说现在的教学管理系统中,找导入成绩的时候,很多老师比如说不会批量利用excel导入,那么希望添加一个自由编辑的功能,就是对于页面中的表格数据,当单击的时候就可以变为可编辑状态,平时处于不可编辑状态,
当此处成绩修改完成以后,无需点提交自动上传,并提供可交互的UI效果。
一拿到任务,其实在如果我没有学习php之前我还不知道怎么做,但是学了php就知道每个层次:
从前端页面布局==》css渲染UI组件==》后台数据库存储的整个过程就非常清楚了!
首先先看下实现后的效果吧:
1、这是正常状态下的成绩列表组
2、当鼠标单击,处于可编辑状态,并在旁边的状态栏进行实时的状态提示
3、修改数据并点击下一条数据,提供不同的状态显示
4、当数据存储到数据库的时候,会提示保存成功
5、数据库中也插入了修改后的数据(此处没有对上,但是肯定可以保存到navicat数据库中)
由上面基本就是实现了所要的功能
具体代码如下
其中要注意几个问题:1、当数据未发生变动的时候,停止向服务器发送重复的请求!
2、sid="+Math.random()是为了避免浏览器缓存问题
3、当来回平凡切换的时候,动画的队列问题
数据库方面语句相对简单,就不贴了,就是连接数据库,选择数据库表,利用insert插入语句将对应的内容存储在数据库中。
当此处成绩修改完成以后,无需点提交自动上传,并提供可交互的UI效果。
一拿到任务,其实在如果我没有学习php之前我还不知道怎么做,但是学了php就知道每个层次:
从前端页面布局==》css渲染UI组件==》后台数据库存储的整个过程就非常清楚了!
首先先看下实现后的效果吧:
1、这是正常状态下的成绩列表组
2、当鼠标单击,处于可编辑状态,并在旁边的状态栏进行实时的状态提示
3、修改数据并点击下一条数据,提供不同的状态显示
4、当数据存储到数据库的时候,会提示保存成功
5、数据库中也插入了修改后的数据(此处没有对上,但是肯定可以保存到navicat数据库中)
由上面基本就是实现了所要的功能
具体代码如下
var currentValue; $(".editMode table input").focus(function(){ currentValue=$(this).val(); //clearTimeout(middleId); $(this).removeAttr("readonly").addClass("editinput"); var $that=$(this).parent().next().find("img"); $that.next().html("正在编辑").attr("class","c_color_2"); $that.hide(); }); $(".editMode table input").blur(function(){ //clearTimeout(timeId); var $that=$(this).parent().next().find("img"); $(this).attr("readonly","readonly").removeClass("editinput"); if($(this).val()==currentValue){ $that.next().html("无"); return false; } $that.attr("src","images/loaded.gif").show(); $that.next().html("正在保存").attr("class","c_color_3"); //开始 var number=$(this).val(); var url="lyl.php?value="+number; //url+="&sid="+Math.random(); $.get(url,function(data){ $that.stop().attr("src","images/success.png").show(); $that.next().html("保存成功").attr("class","c_color_1"); }); })
其中要注意几个问题:1、当数据未发生变动的时候,停止向服务器发送重复的请求!
2、sid="+Math.random()是为了避免浏览器缓存问题
3、当来回平凡切换的时候,动画的队列问题
数据库方面语句相对简单,就不贴了,就是连接数据库,选择数据库表,利用insert插入语句将对应的内容存储在数据库中。
相关文章推荐
- 项目开发实战 jQuery+php+mysql实现数据上传功能(补充!!!)
- 项目开发实战 jQuery+php+mysql实现数据上传功能
- PHP+MySql+jQuery实现的“顶”和“踩”投票功能
- 使用ajax,结合jquery,php实现图片上传预览功能
- 用html、jquery、php编写新闻后台管理页面,动态添加新闻数据并实现数据的增删改查功能
- PHP jQuery实现上传图片时预览图片的功能实例
- PHP+Mysql+jQuery实现中国地图区域数据统计(raphael.js)
- 使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例
- php+mysql+jquery实现日历签到功能
- 项目实战篇-餐馆管理系统—MFC,PHP,MySql:2.登陆功能的实现
- 基于php(Thinkphp)+jquery 实现ajax多选反选不选删除数据功能
- jQuery+Ajax+PHP+Mysql实现分页显示数据
- 如何使用jQuery+PHP+MySQL来实现一个在线测试项目
- Extjs上传附件实战开发,实现批量上传及在线预览功能(一)
- PHP+jQuery+Ajax+Mysql如何实现发表心情功能
- ECharts, PHP, MySQL, Ajax, JQuery 实现前后端数据可视化时出现的问题
- 开发第一个Hibernate项目,实现插入数据功能
- 购物车功能实现 语言: php+MySQL+jQuery+Ajax
- 【转】使用 jQuery(Ajax)/PHP/MySQL实现自动完成功能