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级联下拉菜单以及AJAX数据验证核心代码
May 10 Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
Jan 26 Javascript
JavaScript日期时间与时间戳的转换函数分享
Jan 31 Javascript
小议JavaScript中Generator和Iterator的使用
Jul 29 Javascript
angularjs学习笔记之简单介绍
Sep 26 Javascript
javascript中闭包(Closure)详解
Jan 06 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
Dec 24 Javascript
vue双向数据绑定原理探究(附demo)
Jan 17 Javascript
浅谈javascript中的 “ &amp;&amp; ” 和 “ || ”
Feb 02 Javascript
Vue的事件响应式进度条组件实例详解
Feb 04 Javascript
当vue路由变化时,改变导航栏的样式方法
Aug 22 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
Aug 07 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
destoon找回管理员密码的方法
2014/06/21 PHP
PHP微信开发用Cache 解决数据缓存
2016/07/11 PHP
php微信开发之百度天气预报
2016/11/18 PHP
php中简单的对称加密算法实现
2017/01/05 PHP
php数组实现根据某个键值将相同键值合并生成新二维数组的方法
2017/04/26 PHP
PHP实现的mysql读写分离操作示例
2018/05/22 PHP
PHP结合Ffmpeg快速搭建流媒体服务的实践记录
2018/10/31 PHP
document对象execCommand的command参数介绍
2006/08/01 Javascript
javascript dom代码应用 简单的相册[firefox only]
2010/06/12 Javascript
jquery prop的使用介绍及与attr的区别
2013/12/19 Javascript
用Jquery.load载入页面实现局部刷新
2014/01/22 Javascript
jsMind通过鼠标拖拽的方式调整节点位置
2015/04/13 Javascript
javascript实现的固定位置悬浮窗口实例
2015/04/30 Javascript
JavaScript实现点击按钮就复制当前网址
2015/12/14 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
2016/01/27 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
2016/06/13 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
2016/08/29 Javascript
jQuery简单实现对数组去重及排序操作实例
2017/10/31 jQuery
Nuxt.js踩坑总结分享
2018/01/18 Javascript
Webpack devServer中的 proxy 实现跨域的解决
2018/06/15 Javascript
详解如何制作并发布一个vue的组件的npm包
2018/11/10 Javascript
200行HTML+JavaScript实现年会抽奖程序
2019/01/22 Javascript
JavaScript剩余操作符Rest Operator详解
2019/07/20 Javascript
js实现内置计时器
2019/12/16 Javascript
vue 图片裁剪上传组件的实现
2020/11/12 Javascript
Python Web开发模板引擎优缺点总结
2014/05/06 Python
Python实现身份证号码解析
2015/09/01 Python
Django应用程序入口WSGIHandler源码解析
2019/08/05 Python
详解python中的数据类型和控制流
2019/08/08 Python
Python列表解析操作实例总结
2020/02/26 Python
党员“四风”方面存在问题及整改措施
2014/09/24 职场文书
推销搭讪开场白
2015/05/28 职场文书
活动新闻稿范文
2015/07/17 职场文书
JS监听Esc 键触发事键
2021/04/14 Javascript
Python超简单容易上手的画图工具库推荐
2021/05/10 Python
Vue.js中v-bind指令的用法介绍
2022/03/13 Vue.js