jqgrid : 그리드 조회, 수정, 추가, 삭제 전부 구현하기(4) - 그리드 삭제

개발환경 : nodejs / mariaDB / JS / jqgrid

jqgrid : 그리드 조회, 수정, 추가, 삭제 전부 구현하기(1) - 그리드 조회
jqgrid : 그리드 조회, 수정, 추가, 삭제 전부 구현하기(2) - 그리드 수정
jqgrid : 그리드 조회, 수정, 추가, 삭제 전부 구현하기(3) - 그리드 추가

조회, 수정, 추가 구현했고 마지막 삭제 남았따.

삭제는 아주 간단하다. 먼저 HTML 코드 작성. 삭제버튼 클릭시 이동할 함수 구현 ! 

    <div class="main-panel">
        <div class="content-wrapper">
           
            <div class="row col-12 d-flex align-items-center justify-content-end">
              <button class="btn onclick="javascript:gridFunc.addRow();">추가</button>
              <button class="btn" onclick="javascript:gridFunc.deleteRow();">삭제</button>
            </div>
            
            <div class="row ">
              <div class="col-12 grid-margin">
                <div class="card">
                  <div class="card-body">
                    
                    <div class="table-responsive">
                        <table id="dataGrid"></table>
                    </div>
           
                  </div>
                </div>
              </div>
            </div>

        </div>
    </div>

 

그리고 script 부분
추가 때 addRow : function(){} 아래에 이어서 작성해준다 !
삭제기능 : 체크박스를 클릭해서 체크박스로 선택된 row의 key값을 서버로 보내서 DB에서 삭제할 수 있게 했다.

 

const gridFunc = {
  addRow : function(){
    ......
  },

    deleteRow : function(){
    const progIdObj = new Object();
    const progIdArr =[];
    const rowData = $("#dataGrid").getRowData();

    for(const key in rowData){
        if(rowData[key].chkbox==='Y'){
            if(rowData[key].depth_lv==='1'){
                for(const idx in rowData){
                    if(rowData[idx].group_code===rowData[key].group_code && rowData[idx].depth_lv!=='1'){
                        alert("하위메뉴가 존재하여 삭제할 수 없습니다.");
                        return false;
                    }
                }
                progIdArr.push(rowData[key].prog_id); //prog_id 배열로 저장
            }
        }
    }
    progIdObj.progidArr = progIdArr;
    if(progIdArr.length<1){
        alert("삭제할 메뉴를 선택 해 주세요.");
        return false;
    }

    if(confirm("총 " + progIdArr.length +"개의 메뉴를 삭제하시겠습니까?\n삭제 후 복구가 불가능합니다!!!")){
        $.ajax({
            url :'/data/menumast/deleteGridData',
            type : 'POST',
            dayaType : 'json',
            data : progIdObj,
            success : function(result){
                console.log(result);
                if(result==='success'){
                    alert("삭제 성공 !");
                    getGridData(); //grid Reload 
                }else{
                    console.log(result);
                    alert("에러 발생 !\nerrMsg : "+result);
                    return false;
                }

            }
        });
    }
  }
}

 

마지막으로 라우터에서 디비연결을 해주자

router.post('/data/menumast/deleteGridData',  (req, res) => {
    const body = req.body;
    let sql="";
    const value_arr = Object.values(body.progidArr);

    for(const key in value_arr){
        sql += "DELETE from menumast where prog_id='" + value_arr[key] +"';"
    }
    console.log(sql);
    
    db_pool.getConnection(async function (err, conn) {
        if (err) { //connction 오류 
            if (conn)
                conn.release();
            return;
        }

        await conn.beginTransaction();
        await conn.query(sql, [], function(err, result){
            if(err){ //쿼리 에러 
                conn.rollback();
                console.log(err);
                res.send(err.sqlMessage);
            }else{ //에러 안남 
                res.send('success');
                conn.commit();
            }
        });
        conn.release(); //connection pool을 반납 
    });
});

 

delete는 jqgrid를 사용했다기 보다는 js ajax 이용한거라 쉽고 간편하게 완성 ! 

 

 

 

* jqGrid 관련해서 구글을 미친듯이 뒤졌는데 그중에서도 참고한 포스팅들 목록
http://1004lucifer.blogspot.com/2019/05/jqgrid-cell.html (이분게 찐임..다 나와있으나 나같은 초보자는 이해하기 쉽지 않았음)
https://withsoju.tistory.com/703
https://okky.kr/article/307721
https://backback.tistory.com/92
https://isprogramming.tistory.com/13
https://blog.naver.com/PostView.naver?blogId=aufcl4858&logNo=220988211038&parentCategoryNo=&categoryNo=40&viewDate=&isShowPopularPosts=true&from=search
https://monkeybusiness.tistory.com/25
https://pjsprogram.tistory.com/30
https://hianna.tistory.com/488
https://jjanggun.tistory.com/466