动态获取新增的数据+项目实例介绍

简介: 动态获取新增的数据+项目实例介绍

效果演示:

ok,我们一般做项目的时候会经常遇到这样的情况,就是数据是不停的新增的,但是数据我们也是需要实时获取的,这个时候我们需要的是将数据实时的拿到,或者是用户停止操作的时候我们将数据点击发布或者是一个操作的按钮将数据传递给后端。

这是一个真实的例子,但是没有做美化,包括提示信息也是没有做任何的美化的,包括里面的ajax也去掉了。不过这些都不重要,重要的是我们可以看效果,拿数据。

我们看h5代码:

<div class="templatemo-content-container">
      <button class="btn btn-default" style="background: #39ADB4;width: 10rem;margin-left: 1rem;font: '微软雅黑';color: white;" id="addUser" οnclick="addRow();">添加</button>
      <button class="btn btn-default" style="background: #39ADB4;width: 10rem;margin-left: 1rem;font: '微软雅黑';color: white;" id="release" οnclick="releaseClick();">发布</button>
    </div>

ps:不要纠结我为什么用来一样的css却不直接抽出来,只是写一个例子而已,这些细节就不要在意了。

js代码:

var i = 0;
  var rowFlg = [] //记录目前有几行
  //添加行
  function addRow() {
    if(rowFlg.length<5){
      i++;
      //加一行,往数组里增加一个,用来判断大小 
      rowFlg.push(i)
      var rowTem = '<tr class="tr_' + i + '">'
        //+'<td>' + i + '</td>'
        + '<td><input class="form-control" style="width: 20rem;height: 100%;" type="Text" id="txt' + i + '" /></td>'
        + '<td> <a href="#" class="templatemo-edit-btn" οnclick=delRow('+i+') >删除</a></td>'
        + '</tr>';
      $("#table tbody:last").append(rowTem);
    }else{
      /*最多的一次是五个*/
      alert("一次最多操作5条");
    }
  }
  //删除行
  function delRow(_id) {
    $("#table .tr_"+_id).hide();//删除此行
    document.getElementById("txt" + _id).value='';//清楚此行的内容
    //删掉一个,我是删除的第一位,只用来判断他的长度是否大于5,不可再增加的时候才用到,所以删掉任意一个就可以
    rowFlg.splice(0,1);
  }
  //提交代码的时候是调用的函数
  function releaseClick() {
    var units =[];
    for( var j=1;j<=i;j++){
      if($("#" + "txt" + j).val()+'' !=='' ){
        units.push($("#" + "txt" + j).val());
      }
    }
    console.log("拿到的数据是:"+units);
     /*$.ajax({
        type:"post",
        url:"/sys/units",
        data : JSON.stringify(units),
                dataType:"json",
        contentType:"application/json",
                async:false,
        success:function(data){ 
          if(data.code == 200){
            layer.msg('发布成功!', {
                }, function(){
                //跳转的URL重定向到新的页面,这里是直接跳转到原页面
                window.location.href='cooperative_unit.html';
                }); 
          }
          else{
            layer.msg(data.message);
          }
        }
      });  */
  }

上面可以看出来,这里是动态画出来的表格,当然您可以使用组件画,这些不重要,我是直接拼字符串画的,这里具体的代码不需要解释了吧,这里如果哪一行或者哪里没看明白的,可以下方留言,我会解释的。

相关文章
|
数据库
Layui入门&动态树&动态选项卡&用户增加&修改&删除&(一)
Layui入门&动态树&动态选项卡&用户增加&修改&删除&
123 0
|
8月前
|
小程序 API 数据库
【微信小程序-原生开发】实用教程09 - 可滚动选项,动态列表-步骤条(含事件传参),动态详情(含微信云查询单条数据 doc)
【微信小程序-原生开发】实用教程09 - 可滚动选项,动态列表-步骤条(含事件传参),动态详情(含微信云查询单条数据 doc)
129 0
|
8月前
|
SQL 前端开发 Java
若依修改03----利用若依代码生成器,生成课程管理的前后端代码,课程的条件搜索接口,一旦数据表创建好了,直接交给若依代码的生成器就好了,配置代码生成信息,包含基本信息,字段信息,生成信息。字段信息决
若依修改03----利用若依代码生成器,生成课程管理的前后端代码,课程的条件搜索接口,一旦数据表创建好了,直接交给若依代码的生成器就好了,配置代码生成信息,包含基本信息,字段信息,生成信息。字段信息决
|
9月前
|
监控 Java
记录页面修改差异(java注解实现)
记录页面修改差异(java注解实现)
|
10月前
唯美动态个人404页面源码
手机端先加载静态图再缓慢加载gif动图,电脑端先加载静态图在加载mp4。提升打开速度!
44 0
唯美动态个人404页面源码
|
10月前
|
JavaScript
vue列表信息展示中新增数据,与编辑数据页面复用,降低重复代码
vue列表信息展示中新增数据,与编辑数据页面复用,降低重复代码
343 2
Layui入门&动态树&动态选项卡&用户增加&修改&删除&(二)
Layui入门&动态树&动态选项卡&用户增加&修改&删除&
|
前端开发
前端学习笔记202305学习笔记第二十二天-新增修改弹框复用1
前端学习笔记202305学习笔记第二十二天-新增修改弹框复用1
46 0
|
前端开发
前端学习笔记202305学习笔记第二十二天-新增修改弹框复用5
前端学习笔记202305学习笔记第二十二天-新增修改弹框复用5
84 0
|
前端开发
前端学习笔记202305学习笔记第二十二天-新增修改弹框复用3
前端学习笔记202305学习笔记第二十二天-新增修改弹框复用3
78 0