vue&jquery的全选反选,完成批量删除
之前我用的vue批量删除,点击全选按钮不能获取到id,只能点击多个才可以获取到id,现在此方法可以点击全选获取所有id,并可以实现反选.vue中定义好两个数组arrin,brr就ok了。//brr是存储批量删除的id数组//arrin.nid是查询出id<input type="checkbox" name="id" v-model="brr" :value="arr.nid">...
·
之前我用的vue批量删除,点击全选按钮不能获取到id,只能点击多个才可以获取到id,现在此方法可以点击全选获取所有id,并可以实现反选.
vue中定义好两个数组arrin,brr就ok了。
//brr是存储批量删除的id数组
//arrin.nid是查询出id
<input type="checkbox" name="id" v-model="brr" :value="arr.nid">
<input type="checkbox" v-on:click="quanxuan()" id="all" />全选
前端 vue函数代码:
//全选
quanxuan:function(){
//遍历数据列表 forEach可以用for循环代替
//arrin是遍历你的数据
this.arrin.forEach(function(item, index) {
//判断某元素是否存在数组中
if(vm.brr.indexOf(item.nid)==-1){
vm.brr.push(item.nid);
}else{//存在就删除
var ukey=vm.brr.indexOf(item.nid);
//1是删除的长度
vm.brr.splice(ukey,1);
}
});
},
查询id的数组(arrin.nid)遍历,判断储存批量删除(brr)数组中是否有,存入brr数组,调用删除方法进行删除。
//多选删除
delAll:function(brr){
if(brr.length==0){
alert("至少选择一条删除");
return false;
}
//把数组转成String
var s=vm.brr.join(",");
alert(s);
if(confirm("确认删除?")) {
$.post("/news/delAll",{nid:s},function(data){
alert(1);
if(data=="1"){
alert("删除成功");
//删除成功跳转
window.location.href="/ht/news";
}else{
alert("删除失败");
}
})
}
},
后端 控制器 代码(批量删除) :
//多选删除
@RequestMapping("delAll")
@ResponseBody
public String delAll(HttpServletRequest req) {
String str=req.getParameter("nid");
//先判断有没有值
if(str==null || "".equals(str)) {
return "拜拜";
}
String[] strs=str.split(",");
for (int i = 0; i < strs.length; i++) {
int x=Integer.parseInt(strs[i].toString());
//调用删除方法
newsService.del(x);
System.out.println(x);
}
return "1";
}
更多推荐
已为社区贡献1条内容
所有评论(0)