Node.js , JQuery | 테이블 만들기 | 데이터 삭제(2)

전 글은 데이터를 한개만 삭제를 했을 경우이다.

이번에는 checkbox 선택으로 여러개를 삭제했을 경우를 설명하겠다.

 

1. checkbox 또한 전 글처럼 carlist_condition을 참조하여 HTML 코드를 확인해준다.

    먼저 각 개체 별 checkbox는 이렇다.

insertTr += "<td class='with-btn' nowrap>";
insertTr += "<input id='ck' type='checkbox' name ='ck' class='neHeros' value="+  Object.array[i].CN +" onChange='eachCheckedBox(this);'/>";
insertTr += "</td>";

   

    다음 전체 checkbox 코드는 이렇다.

insertTr += "<th id ='allcheck' width='1%'>";
insertTr += "<input type='checkbox' name='allck' class='neHeros' value='' onChange='allCheckedBox(this);'/>";
insertTr += "</th>";

 

 

2. 위 코드를 보면 onChange 함수에 eachCheckedBox, allCheckedBox 함수가 있는걸 볼 수 있다.

    아래 코드와 같이 각 checkbox별로 checked 옵션을 바꿔줄 수 있다.

// 전체 선택 기능
	function allCheckedBox(obj) {
	   	// @brief ��택한 체크박스의 클래스 명칭을 가져온다.
	   	const termClass = obj.getAttribute("class");
	   	// @brief 선택한 클래스명과 같은 클래스의 갯수
	   	Array.prototype.forEach.call(document.getElementsByClassName(termClass), function(element, index, array) {
	        // @brief 엘리먼트의 값 출력
	        // @brief 선택한 클래스의 첫번째 checkbox의 상태가 체크가 되있는 경우
	        if(document.getElementsByClassName(termClass)[0].checked == true) {
	            // @brief 같은 클래스명을 가진 모든 checkbox의 상태를 선택 완료 처리 한다.
	            element.checked = true;
	        }
	        // @brief 선택한 클래스의 첫번째 checkbox의 상태가 체크가 해제된 경우
	        else {
	            // @brief 같은 클래스명을 가진 모든 checkbox의 상태를 선택 해제 처리 한다.
	            element.checked = false;
	        }
	   	});
    }

	// 항목 선택 기능
	function eachCheckedBox(obj) {
      // @brief 선택한 체크박스의 상태가 선택해제인 경우
      if(obj.checked == false) {
            // @brief 선택한 체크박스의 클래스 명칭을 가져온다.
            const termClass = obj.getAttribute("class");
            // @brief 첫번째 checkbox의 상태가 체크가 되어있는경우
            if(document.getElementsByClassName(termClass)[0].checked == true) {
                // @brief 첫번째 checkbox의 상태를 체크해제한다.
                document.getElementsByClassName(termClass)[0].checked = false;
            }
        }
    }

 

 

3. 그 다음 checked 된 내용들을 불러와 ajax에 담고 백엔드에 데이터를 전송한다.

	// 선택항목 삭제 기능
	function delete_check(url) {
		var check = $("input:checkbox[name='ck']").is(":checked");
		if(!check) {
			alert(i18nconvert('choiceerror'));
		}
		else {
			var select_obj = [];
	        $('input[name="ck"]:checked').each(function (index) {
	                select_obj[index] = $(this).val() ;
	        });
			var answer;
	    		answer = confirm(i18nconvert('deleteconfirm'));
			if(answer == true){
				$.ajax({
		    		url: url,
                    type: "POST",
                    dataType: 'json',
                    data: {
                    	select : select_obj,
                    }
		    	}).done(function (data) {  
					if(data.result == 'success') {
						alert(i18nconvert('deletesuccess'));
						location.reload();
					}
					else {
						alert(i18nconvert('choiceerror'));
					}
		    	});
			}
			else {
				$("input:checkbox[name='allck']").prop("checked", false);
				$("input:checkbox[name='ck']").prop("checked", false);
				return false;
			}
		}
	}

 

 

4. 백엔드에서 받은 데이터를 이용해 해당 데이터들을 삭제한다.

//차량 선택삭제
router.post('/ajax/car_delete', isNotLoggedIn ,async (req, res, next) => {
    var select = req.body["select[]"];
    // const CID = req.decoded.CID;
    const CNU = req.decoded.CNU;
    const CUA = moment().format('YYYY-MM-DD hh:mm:ss');
    try {
        if(!select) {
          res.send({ result : 'fail' });
        }
        else {
          if (typeof(select) == 'string') {
            const carone = await modelQuery(QUERY.Findone,COLLECTION_NAME.Car,{ "CNU" : CNU, "CN" : select },{});
            await modelQuery(QUERY.Create,COLLECTION_NAME.Cardelete,{
                "CNU" : carone.CNU,
                "CN" : carone.CN,
                "CPN" : carone.CPN,
            },{});
            await modelQuery(QUERY.Remove,COLLECTION_NAME.Car,{ "CNU" : CNU, "CN" : select },{});
          }
          else {
             for(var i = 0; i < select.length; i++){
                var carone = await modelQuery(QUERY.Findone,COLLECTION_NAME.Car,{ "CNU" : CNU, "CN" : select[i] },{});
                await modelQuery(QUERY.Create,COLLECTION_NAME.Cardelete,{
                    "CNU" : carone.CNU,
                    "CN" : carone.CN,
                    "CPN" : carone.CPN,
                },{});
                await modelQuery(QUERY.Remove,COLLECTION_NAME.Car,{ "CNU" : CNU, "CN" : select[i] },{});
             }
          }
          
          await modelQuery(QUERY.Update,COLLECTION_NAME.Company,{where : { "CNU" : CNU }, update : { "CUA" : CUA }},{});
            
          res.send({ result : 'success' });
        }
    } catch (err) {
      res.send({ result : 'fail' });
      console.error(err);
      next(err);
    }
});