做项目的时候经常会遇到全选,全不选,反选以及批量删除这些基本效果 那它们的原理是什么呢?? 全选,全不选,反选:原理就是获取他状态(checked=true/false)然后通过方法把所有的复选框的状态改变成按钮的状态,反选就是把复选框的状态改变成改变成按钮的相反状态
$(function(){ $("#butt").click(function(){ $("input[name='nid']:checkbox").prop("checked",true); }); $("#buttNo").click(function(){ $("input[name='nid']:checkbox").prop("checked",false); }); $("#fan").click(function(){ $("input[name='nid']").each(function(){ this.checked=!this.checked; }); }); $("#delAll").click(function(){ if($("input[type='checkbox']:checked").length<1){ $("#del").attr("disabled",true); window.location.reload(); } }); }); <li><div class="button-group" id="butt"><span class="button border-main"><span class="icon-edit"></span>全选</span></div></li> <li><div class="button-group" id="buttNo"><sapn class="button border-red"><span class="icon-trash-o"></span>全不选</sapn></div></li> <li><div class="button-group" id="fan"><span class="button border-main"><span class="icon-edit"></span>反选</span></div></li>我的全选全不选分开写了,你可以写成一个,需要进行判断一下
批量删除:批量删除就是通过获取你选中的ID(主键) 形成数组然后转化为字符串传到指定的方法中,在拆分成数组通过循环数组进行删除
<li><div class="button-group" id="delAll" ><sapn class="button border-red" v-on:click="delAll()"><span class="icon-trash-o"></span>批量删除</sapn></div></li> <td><input type="checkbox" name="nid" :value="site.nid" v-model="whoms" />{{key+1}}</td> var vm=new Vue({ el: '#app', data: { whoms:[], whom:"" },首先写好批量删除的按钮以及复选框的值把,获取到的值都放在whoms数组里面
delAll:function(key){ var whom=vm.whoms.join(","); alert(whom); $.post("/news/deleteAll",{whom:whom},function(data){ if(data==1){ vm.sites.splice(key,1); alert("删除成功"); } })然后通过**join()**把whoms数组合并成字符串,可以alert();一下看看值是否一样 最后通过ajax传到指定的路径中,
@RequestMapping(value="deleteAll") @ResponseBody public String deleteAll(HttpServletRequest request) { String whom=request.getParameter("whom"); String[] id=whom.split(","); int len=id.length; for (int i = 0; i < len; i++) { newsService.deleteByNid(Integer.parseInt(id[i])); } return "1"; }传到指定的路径中通过split();对字符串进行拆分成数组再通过循环进行删除最后返回一个值,通过ajax接收,并输出相应的提示,删除完成后页面不会去掉已经删除的值需要刷新一次,但是事实上已经删除了不需要再次请求数据,了,这个时候就需要用到**splice()**方法
if(data==1){ vm.sites.splice(key,1); alert("删除成功"); }key的意思就是你的序号,1的意思就是删除的条数
下次再说