zoukankan      html  css  js  c++  java
  • 项目开发实战 jQuery+php+mysql实现数据上传功能

      今天老板给我一个任务,说现在的教学管理系统中,找导入成绩的时候,很多老师比如说不会批量利用excel导入,那么希望添加一个自由编辑的功能,就是对于页面中的表格数据,当单击的时候就可以变为可编辑状态,平时处于不可编辑状态,

    当此处成绩修改完成以后,无需点提交自动上传,并提供可交互的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插入语句将对应的内容存储在数据库中。

  • 相关阅读:
    在java中怎样获得当前日期时间
    java 常见异常
    线程中的current thread not owner异常错误
    hibernate 关于hbm.xml编写的总结
    java web 常见异常及解决办法
    初用Ajax
    JavaScript动态修改html组件form的action属性
    Ajax中文乱码的解决
    No repository found error in Installing ADT
    eclipse 安装 CDT
  • 原文地址:https://www.cnblogs.com/caichongdd/p/2707545.html
Copyright © 2011-2022 走看看