js实现提交前对列表数据的增删改查
js实现列表数据的增删改查,AJAX提交后,js操作数据
最近工作中,有一处列表数据是页面初始化加载的,用户可以进行操作,因为这些数据并不存在数据库中,同时为了数据的整洁以及高效,所以要在页面进行增删改操作(其实查也可以,类似改),之前写过一个二维数组保存的,代码乱而且效率不高,后改用object感觉还可以,主要是查询和删除的时候不需要自己遍历数组。
1.html
列表是用div+ul标签弄的,贴一些用到的片段
1.1要展示的列表
列表标题
js实现列表数据的增删改查,AJAX提交后,js操作数据
最近工作中,有一处列表数据是页面初始化加载的,用户可以进行操作,因为这些数据并不存在数据库中,同时为了数据的整洁以及高效,所以要在页面进行增删改操作(其实查也可以,类似改),之前写过一个二维数组保存的,代码乱而且效率不高,后改用object感觉还可以,主要是查询和删除的时候不需要自己遍历数组。
1.html
列表是用div+ul标签弄的,贴一些用到的片段
1.1要展示的列表
列表标题
1.2编辑框
信息确认 修改 确认
贴一个大致实现效果
2.js主要内容
先贴代码再简单解释下
2.1初始化
vardata=newObject();//操作的主要定义成全局 varcurPage=1;//翻页靠他了 $(function(){ $("#search").click(function(){//格式没正其实我很别扭 vartabList="";//最后要放入的list数据后面拼接li标签 $.ajax({ type:'post',//get也可以但是之前是要修改东西 url:'<%=request.getContextPath()%>/home/getlist', dataType:'json', data:{name:name}, success:function(result){ varjsonArr=jQuery.parseJSON(result);//返回的是字符串,也可以controller返回对象,用不用parse了 vararrSize=jsonArr.length; varpagetotal=Math.ceil(arrSize/9);//总页数向上取整,一页展示9条 data=newObject();//每次搜索要重置下data $.each(jsonArr,function(index,value){给data赋值 vartemp=newObject(); temp.id=value.id; temp.name=value.name; temp.class=value.class; temp.telphone=value.telphone; data[value.id]=temp; }) varcount=0;//为了后面的break做个条件 for(variindata){//为什么循环data而不是jsonArr,因为jsonArr的前九个和data的前九个有可能是不一样的,因为Objectkey为数字时会自 if(count==9)break;//动根据key排序。自己可以验证下本人已认证 tabList+=' '+ ' '+ data[i].name +''+ ' '+ ' '+ ''+ ''; count++; } //少于三页不显示上页下页 vartips=' 共'+arrSize+'条'; if(pagetotal<=3){ tips+=' '; for(vari=0;i++;i '+i+''; } tips+=''; }else{ tips+=' '+ ' 1 '+ '2 '+ '3 '+ '> '+ ''; } $("#tab-list").html(tabList); $(".page-f").html(tips); $(".page-f").show(); } }); }
初始化后就有了列表,上面用到了翻页函数turnPage先实现分页
functionturnPage(page){ curPage=page; vardataLength=0; varcount=0; for(varoindata){ dataLength++; } varpagetotal=Math.ceil(dataLength/9); if(page>pagetotal){//给删除用的,删了一页的话最大页码就减一了 turnPage(page-1);//譬如你在最后一页(18页)删光了这时候应该去第17页 return; } varyzsTabList=""; for(varoindata){ if(count>=(page-1)*9){ tabList+=''+ ' '+ data[o].name +''+ ' '+ ' '+ ''+ ''; } count++; if(count==page*9){ break; } } //少于三页不显示上页下页 vartips=' 共'+dataLength+'条'+ ' '; if(pagetotal<=3){ tips+=' '; for(vari=0;i++;i '+i+''; }else{ tips+=' '+i+' '; } } } else{ if(page!=1){//前三页不能有上一页的标签最后一页的时候不能有下一页的标签 tips+='< '+ ''+(page-1)+' '+ ''+page+' '; if(page!=pagetotal){ tips+=''+(page+1)+' '+ '> '; } }else{ for(vari=3;i>0;i--){ if(page==(4-i)){ tips+=''+(4-i)+' '; }else{ tips+=''+(4-i)+' '; } } tips+='> '; } } tips+=''; $("#tab-list").html(tabList); $(".page-f").html(tips); $(".page-f").show(); }
逻辑也不是特别难,接下来做删除,修改还要涉及另一个div的操作。贴代码+注释
functionremoveStu(id){ if($("#stuid").val()==id){//stuid是我在修改框里加的隐藏id当你查看这个人 $("#tab-input-f").hide();//的时候,要删掉这个信息应该把修改框隐藏 } deletedata[id];//简单的一句话从data里删除这个数据,要是数组还要循环匹配 $("#info"+id).remove();//页面删除其实也可以删掉因为下面要重构数据 turnPage(curPage);//翻页删除一条下一条要补上来 }
关于修改,和后台springmvc。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。