TodoList 연습 4 , 체크박스 체크시 체크된것만 삭제.

 

 

 

 

 

-- 버튼하나 만들어서 . 체크된것만 삭제 시켜보자 . 

 

 

 

 

 

-- 테이블에 체크를 확인하는 컬럼을 만들어준다 .

 

 

 

-- 기본값 N   ,  체크 됐을때 Y 로 바뀌는 .ajax  

   .js 에 추가 .

-- window.onload 함수와.

   Add 버튼클릭 했을때 중첩되는 부분에 코드를 중복해서 넣어줬다 .

      checkBox.addEventListener("click",function(){   // check 시 취소선
        if ( checkBox.checked ){
            span.style.textDecoration="line-through";
            span.style.color="gray";
            count--;

          $.ajax({
            url : "checkList",
            data : {"checkList" : span.innerText},
            type : "POST",
            success : function(result){             
            },
            error : function(){
            }
          })

        }else{
            span.style.textDecoration= "none";
            span.style.color="black";
            count++;

            $.ajax({
              url : "unCheckList",
              data : {"checkList" : span.innerText},
              type : "POST",
              success : function(result){             
              },
              error : function(){
              }
            })
        } 
        updateCount();
      });

 

 

----  checkDelete 버튼 눌렀을때 작동하고 .

       체크한 형제 노드들과 서블릿에 접근할 ajax .  js에 추가

//////////////  선택삭제
const checkDelete = document.getElementById("checkDelete");

checkDelete.addEventListener("click",function(){
  if (todoListId.querySelector("input[type=checkbox]:checked")){
    if ( confirm("선택 삭제하시겠습니까? ")== true){
      checkedDelete()
    }else{
      return false;
    }
  } else{
    alert("삭제목록을 체크해주세요");
  }

});
function checkedDelete(){
  const chechvalue = todoListId.querySelectorAll("input[type=checkbox]:checked");
  chechvalue.forEach(function(item){
    item.parentNode.remove();
  });
      $.ajax({
        url : "checkedDelete",
        type : "POST",
        success : function(){
        },
        error : function(){
        },
      });
}

 

 

 

 

 

 

 

 

 

--- 체크했을때 컬럼값이  Y 로 바뀌는  " /checkList " 서블릿.  

@WebServlet("/checkList")
public class CheckListServlet extends HttpServlet {

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		try {
			TodoService service = new TodoService();
			String checkList = req.getParameter("checkList");
			
			int result = service.checked(checkList);
		}catch(Exception e) {
			e.printStackTrace();
		}
	}
}

 

 

--- 체크풀었을때 컬럼값이  N 로 바뀌는  " /unCheckList " 서블릿.

@WebServlet("/unCheckList")
public class UnCheckListServlet extends HttpServlet {
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

		try {
			TodoService service = new TodoService();
			String checkList = req.getParameter("checkList");
			
			int result = service.unChecked(checkList);
			
		}catch(Exception e) {
			e.printStackTrace();
		}
	}
}

 

 

 

---  체크된것 삭제하는 " /checkedDelete"  서블릿.

@WebServlet("/checkedDelete")
public class CheckedDeleteServlet extends HttpServlet{
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		try {
			TodoService service = new TodoService();	
			
			int result = service.checkedDelete();
			if ( result > 0 ) {
				System.out.println("check 삭제");
			}else {
				System.out.println("check 삭제실패");
			}
		}catch(Exception e) {
			e.printStackTrace();
		}
	}
}

 

 

 

---  체크유무  ,  삭제 하는 Service 클래스 . 

	/**   체크 유무 
	 * @param checkList
	 * @return 
	 */
	public int checked(String checkList) throws Exception{
		Connection conn = getConnection();
		int result = dao.checkList(conn,checkList);

		if ( result > 0 ) commit(conn);
		else 		      rollback(conn);
		
		close(conn);
		return result;
	}

	public int unChecked(String checkList) throws Exception{
		Connection conn = getConnection();
		int result = dao.unCheckList(conn,checkList);

		if ( result > 0 ) commit(conn);
		else 		      rollback(conn);
		
		close(conn);
		return result;
	}

	/**    체크된거 삭제
	 * @return
	 */
	public int checkedDelete() throws Exception{
		Connection conn = getConnection();
		int result = dao.checkedDelete(conn);
		
		if ( result > 0 ) commit(conn);
		else 		      rollback(conn);
		
		close(conn);
		return 0;
	}

 

 

--- 체크 유무 , 삭제 를위해 DB 접근하는 DAO 클래스 .

	/**        체크 유무 바꾸기
	 * @param conn
	 * @param checkList
	 * @return
	 */
	public int checkList(Connection conn, String checkList) throws Exception {
		int result = 0;
		try {
			String sql = prop.getProperty("checkList");
			pstmt = conn.prepareStatement(sql);
			pstmt.setString(1, checkList);
			result = pstmt.executeUpdate();
			
		}finally {
			close(pstmt);
		}
		return result;
	}
	public int unCheckList(Connection conn, String checkList) throws Exception{
		int result = 0;
		try {
			String sql = prop.getProperty("unCheckList");
			pstmt = conn.prepareStatement(sql);
			pstmt.setString(1, checkList);
			result = pstmt.executeUpdate();
			
		}finally {
			close(pstmt);
		}
		return result;
	}

	/**    선택된거 삭제
	 * @param conn
	 * @return
	 */
	public int checkedDelete(Connection conn) throws Exception {
		int result = 0;
		try {
			String sql = prop.getProperty("checkedDelete");
			stmt = conn.createStatement();
			result = stmt.executeUpdate(sql);
		}finally {
			close(stmt);
		}
		
		return result;
	}

 

 

 

--- DB 접근에 사용할 SQL 문 .  . xml 파일

	<entry key="checkList">
	UPDATE TODOLIST SET
	TESTCHECK = 'Y'
	WHERE TESTADDTODO = ?
	</entry>
	<entry key="unCheckList">
	UPDATE TODOLIST SET
	TESTCHECK = 'N'
	WHERE TESTADDTODO = ?
	</entry>
	
	<entry key="checkedDelete">
	DELETE FROM TODOLIST
	WHERE TESTCHECK = 'Y'
	</entry>