vue+jQuery 전체 선택, 전체 선택, 반선택 및 대량 삭제

vue+jQuery 전체 선택, 전체 선택, 반선택 및 대량 삭제

프로젝트를 할 때 자주 전선, 전선, 반선, 대량 삭제 등 기본 효과에 부딪히는데 그 원리는 무엇일까요??전체 선택, 전체 선택, 반선: 원리는 그의 상태(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 () 를 할 수 있습니다.값이 같은지 확인하고 마지막으로 aax를 통해 지정된 경로로 전송합니다.

@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 () 통과하기;문자열을 수조로 나누어 순환을 통해 삭제하고 마지막으로 한 값을 되돌려줍니다. aax를 통해 수신하고 해당하는 알림을 출력합니다. 삭제가 끝난 후 페이지에서 삭제된 값을 제거하지 않고 갱신해야 합니다. 하지만 사실상 삭제되었습니다. 데이터를 다시 요청할 필요가 없습니다. 이럴 때 *splice()**방법을 사용해야 합니다.

if(data==1){
	vm.sites.splice(key,1);
	 alert(" ");
}

키의 뜻은 당신의 번호입니다. 1의 뜻은 삭제된 줄입니다.

하지만 이것은 jq가 실현한 전선과 반선입니다. 클릭할 때 아이디를 얻을 수 없는 것은 당신이 눌렀을 때만 가능합니다. 그러면 어떻게 해야 하나요??

다음에 다시 이야기하자