好资源导航 » 文章资讯 » js实现提交前对列表数据的增删改查

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

2023-08-03 00:16:04 68

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（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

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

热门推荐

随机推荐