js实现提交前对列表数据的增删改查


Posted in Javascript onJanuary 16, 2020

js实现列表数据的增删改查,AJAX提交后,js操作数据

最近工作中,有一处列表数据是页面初始化加载的,用户可以进行操作,因为这些数据并不存在数据库中,同时为了数据的整洁以及高效,所以要在页面进行增删改操作(其实查也可以,类似改),之前写过一个二维数组保存的,代码乱而且效率不高,后改用object 感觉还可以,主要是查询和删除的时候不需要自己遍历数组。

1. html

列表是用div+ul标签弄的,贴一些用到的片段

1.1 要展示的列表

<div class="tab">
  <div class="tab-t">
  列表标题
  </div>
  <div class="tab-list" id="tab-list">
  //列表数据
  </div>
  <div class="page-f">
  <!-- <p class="page-p">共20条</p>
   <ul class="page-ul">
   <li>< </li>
   <li id="li_1"> 1 </li>
   <li id="li_2"> 2 </li>
   <li id="li_3"> 3 </li>
   <li> > </li>
   </ul> --> 
  </div>
  </div>
<div class="yzs-tab">

1.2编辑框

<div class="tab">
  <div class="tab-t">
  信息确认
  <a class="tbtn modify" id="modify">修改</a>
  <a class="tbtn submit" id="submit">确认</a>
  </div>
  <div class="input-f" id="tab-input-f">
  <input type="hidden" id="stuid">
  <div class="tab-input">
   <input type="text" class="info-input disabled" disabled="disabled" placeholder="姓名" />
  </div>
  <div class="tab-input">
   <input type="text" class="info-input disabled" disabled="disabled" placeholder="班级" />
  </div>
  <div class="tab-input">
   <input type="text" class="info-input disabled" disabled="disabled" placeholder="联系电话" />
  </div> 
  </div>
</div>

贴一个大致实现效果

js实现提交前对列表数据的增删改查

2. js主要内容

先贴代码 再简单解释下

2.1 初始化

<script type="text/javascript">
 var data=new Object();//操作的主要 定义成全局
 var curPage=1;//翻页靠他了
 $(function() { 
 $("#search").click(function() {//格式没正 其实我很别扭
 var tabList = "";//最后要放入的list数据 后面拼接li标签
  $.ajax({
  type: 'post',//get也可以 但是之前是要修改东西
  url: '<%=request.getContextPath()%>/home/getlist',
  dataType: 'json', 
  data:{name : name},
  success: function (result) {
   var jsonArr = jQuery.parseJSON(result);//返回的是字符串,也可以controller返回对象,用不用parse了
   var arrSize = jsonArr.length;
   var pagetotal = Math.ceil(arrSize/9);//总页数 向上取整,一页展示9条

   data = new Object();//每次搜索要重置下data  
   $.each(jsonArr,function(index,value){给data赋值
   var temp = new Object();
   temp.id = value.id;
   temp.name= value.name;
   temp.class= value.class;
   temp.telphone = value.telphone;
   data[value.id] = temp;
   }) 

   var count = 0;//为了后面的break做个条件 
   for(var i in data){//为什么循环data而不是 jsonArr,因为jsonArr的前九个和data的前九个有可能是不一样的,因为Object key为数字时会自
   if(count==9)break;//动根据key排序。自己可以验证下 本人已认证
    tabList += '<div class="tab-li" id="info'+data[i].id+'">'+
    '<div class="li-name" οnclick="showStu(' + data[i].id + ')">'+
     data[i].name
    +'</div>'+
    '<div class="li-close" οnclick="removeStu('+data[i].id +')">'+
     '<i class="close"></i>'+
    '</div>'+
    '</div>';
    count++;
   }

   //少于三页 不显示上页下页 
   var tips = '<p class="page-p">共'+arrSize+'条</p>';
   if(pagetotal<=3){
   tips +='<ul class="page-ul">';
   for(var i=0; i++; i<pagetotal){
    tips += '<li οnclick="turnPage('+i+')">'+i+'</li>';
   }
   tips += '</ul>';
   }else{
   tips += '<ul class="page-ul">'+
     '<li οnclick="turnPage(1)" class="current"> 1 </li>'+
     '<li οnclick="turnPage(2)"> 2 </li>'+
     '<li οnclick="turnPage(3)"> 3 </li>'+
     '<li οnclick="turnPage(4)"> > </li>'+
    '</ul>';
   }
   $("#tab-list").html(tabList);
   $(".page-f").html(tips);
   $(".page-f").show();

  }
  });
}

初始化后就有了列表,上面用到了翻页函数 turnPage 先实现分页

function turnPage(page){
 curPage = page;
 var dataLength = 0;
 var count = 0;
 for(var o in data){
  dataLength++;
 }
 var pagetotal = Math.ceil(dataLength/9);
 if(page>pagetotal){//给删除用的 ,删了一页的话 最大页码就减一了
  turnPage(page-1);//譬如你在最后一页(18页)删光了 这时候应该去第17页
  return;
 }
 var yzsTabList ="";
 for(var o in data){  
  if(count>=(page-1)*9){
  tabList += '<div class="tab-li" id="info'+data[o].id+'">'+
  '<div class="li-name" οnclick="showStu(' + data[o].id + ')">'+
   data[o].name
  +'</div>'+
  '<div class="li-close" οnclick="removeStu('+data[o].id +')">'+
   '<i class="close"></i>'+
  '</div>'+
  '</div>';
  } 
  count++;
  if(count == page*9){
  break;
  }
 }
 //少于三页 不显示上页下页 
 var tips = '<p class="page-p">共'+dataLength+'条</p>'+
   '<ul class="page-ul">';
 if(pagetotal<=3){
  tips +='<ul class="page-ul">';
  for(var i=0; i++; i<pagetotal){
  if(page == i){
   tips += '<li οnclick="turnPage('+i+')" class="current">'+i+'</li>';
  }else{
   tips += '<li οnclick="turnPage('+i+')">'+i+'</li>';
  }  
  }
 }
 else{
  if(page!=1){//前三页不能有上一页的标签 最后一页的时候不能有下一页的标签
  tips += '<li οnclick="turnPage('+(page-1)+')">< </li>'+
   '<li οnclick="turnPage('+(page-1)+')">'+(page-1)+'</li>'+
   '<li οnclick="turnPage('+page+')" class="current">'+ page +'</li>';
  if(page != pagetotal){
   tips += '<li οnclick="turnPage('+(page+1)+')">'+(page+1)+'</li>'+
    '<li οnclick="turnPage('+(page+1)+')"> > </li>';
  }

  }else{
  for(var i=3; i>0; i--){
   if(page == (4-i)){
   tips += '<li οnclick="turnPage('+(4-i)+')" class="current">'+(4-i)+'</li>';
   }else{
   tips += '<li οnclick="turnPage('+(4-i)+')">'+(4-i)+'</li>';
   }  
  }
  tips += '<li οnclick="turnPage('+(page+1)+')"> > </li>'; 
  }  
 } 
 tips += '</ul>';
 $("#tab-list").html(tabList);
 $(".page-f").html(tips);
 $(".page-f").show();
 }

逻辑也不是特别难,接下来做删除,修改还要涉及另一个div的操作。贴代码+注释

function removeStu(id){
 if($("#stuid").val()==id){//stuid是我在修改框里加的隐藏id 当你查看这个人
  $("#tab-input-f").hide();//的时候,要删掉这个信息 应该把修改框隐藏
 }
 delete data[id];//简单的一句话 从data里删除这个数据,要是数组还要循环匹配
 $("#info"+id).remove();//页面删除 其实也可以删掉 因为下面要重构数据
 turnPage(curPage);//翻页 删除一条 下一条要补上来
 }

关于修改,和后台springmvc。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用JavaScript判断图片是否加载完成的三种实现方式
May 04 Javascript
javascript父、子页面交互技巧总结
Aug 08 Javascript
jQuery实现下滑菜单导航效果代码
Aug 25 Javascript
理解 JavaScript Scoping &amp; Hoisting(二)
Nov 18 Javascript
详细总结Javascript中的焦点管理
Sep 17 Javascript
JS 终止执行的实现方法
Nov 24 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
Feb 10 Javascript
解决vue处理axios post请求传参的问题
Mar 05 Javascript
vuex实现及简略解析(小结)
Mar 01 Javascript
vue子路由跳转实现tab选项卡
Jul 24 Javascript
vue中添加与删除关键字搜索功能
Oct 12 Javascript
Canvas三种动态画圆实现方法说明(小结)
Apr 16 Javascript
react实现移动端下拉菜单的示例代码
Jan 16 #Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
Jan 16 #Javascript
JS实现简单的表格增删
Jan 16 #Javascript
JS实现基本的网页计算器功能示例
Jan 16 #Javascript
JS数组进阶示例【数组的几种函数用法】
Jan 16 #Javascript
js实现简单的秒表
Jan 16 #Javascript
JS 数组基本用法入门示例解析
Jan 16 #Javascript
You might like
浅析Dos下运行php.exe,出现没有找到php_mbstring.dll 错误的解决方法
2013/06/29 PHP
ThinkPHP 模板引擎使用详解
2017/05/07 PHP
关于laravel 数据库迁移中integer类型是无法指定长度的问题
2019/10/09 PHP
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
2010/06/18 Javascript
仿猪八戒网左下角的文字滚动效果
2011/10/28 Javascript
ajax与302响应代码测试
2013/10/23 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
2015/05/14 Javascript
javascript数据类型验证方法
2015/12/31 Javascript
Node.js 应用跑得更快 10 个技巧
2016/04/03 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
2016/06/21 Javascript
第一次接触Bootstrap框架
2016/10/24 Javascript
javascript 实现动态侧边栏实例详解
2016/11/11 Javascript
微信小程序 scroll-view组件实现列表页实例代码
2016/12/14 Javascript
Vue学习之路之登录注册实例代码
2017/07/06 Javascript
详解a++和++a的区别
2017/08/30 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
2018/08/09 Javascript
关于vue-cli3打包代码后白屏的解决方案
2020/09/02 Javascript
解决vue2中使用elementUi打包报错的问题
2020/09/22 Javascript
Vue中父子组件的值传递与方法传递
2020/09/28 Javascript
python实现进程间通信简单实例
2014/07/23 Python
python类和函数中使用静态变量的方法
2015/05/09 Python
Python list操作用法总结
2015/11/10 Python
windows10下python3.5 pip3安装图文教程
2018/04/02 Python
python实现IOU计算案例
2020/04/12 Python
python中关于数据类型的学习笔记
2020/07/19 Python
css3旋转木马_动力节点Java学院整理
2017/07/12 HTML / CSS
高清屏中使用Canvas绘图出现模糊的问题及解决方法
2019/06/03 HTML / CSS
维珍澳洲航空官网:Virgin Australia
2017/09/08 全球购物
橄榄树药房:OLIVEDA
2019/09/01 全球购物
技术总监个人的自我评价范文
2013/12/18 职场文书
服装促销活动方案
2014/02/23 职场文书
我们的节日端午节活动方案
2014/03/02 职场文书
安全生产月演讲稿
2014/05/09 职场文书
专题组织生活会方案
2014/06/15 职场文书
秋季运动会开幕词
2015/01/28 职场文书
用Python爬取英雄联盟的皮肤详细示例
2021/12/06 Python