[WebSquare] 그리드 행 추가와 행 삭제, 행 추가 시 default값 세팅하기

 

 

- 예시

 

행 추가버튼 클릭 시 생기는 행 (defaultValue 세팅 상태)

 

 

 

 

- RowStatus 보는 방법

 

Ctrl+마우스 우클릭 > dataCollection보기 클릭 > dataCollection 선택 후 조회

 

최하단에 "rowStatus": "C", "rowStatus": "U", "rowStatus": "D" 이 표시되어있음

 

 

 

 

---

 

 

 

 

<행 추가>

id가 btn_rowAdd 인 버튼을 클릭했을 때 행 추가를 발생시킨다.

 

scwin.btn_rowAdd_onclick = function(e) {

    var idx = dlt_search.insertRow(grd_list);		//dlt_search : 그리드와 매핑된 dataList
    
    grd_list.setFocusedCell(idx, 0, true);		//grd_list : 그리드 id
};

 

 

 

 

 

 

<행 추가 시 default값 세팅>

행 추가와 동시에 defaultValue를 세팅하는 방법이다.

 

dlt_search.setRowData(idx, ["1", "KOR", "KOR", "1", "1", "", "", "", "Y", "Y", "Y", "Y", ""], true)

 

해당 dataList에 setRowData를 사용하여 dataList column 순서에 맞게 값을 넣어주면 된다.

 

 

 

 

---

 

 

 

 

<행 삭제 - 상태값만 변경>

id가 btn_rowDel 인 버튼을 클릭했을 때 행 삭제를 발생시킨다.

 

행의 색을 빨간색으로 변경하고, 행 상태를 삭제 상태(D)로 만든다.

 

scwin.btn_rowDel_onclick = function(e) {
    var idx = grd_list.getFocusedRowIndex();
    
    dlt_search.deleteRow(idx);
    grd_list.setRowBackgroundColor(idx, "red");
    grd_list.removeFocusedCell();
};

 

 

 

 

 

 

<행 삭제 - 그리드에서 즉시 삭제>

버튼 클릭 즉시 그리드에서 행을 보이지 않게 제거한다.

 

scwin.btn_rowDel_onclick = function(e) {
    var idx = grd_list.getFocusedRowIndex();
    
    dlt_search.removeRow(idx);
    grd_list.removeFocusedCell();
};

 

 

 

 

 

 

<행 삭제 - 신규 행과 기존 행 구분 삭제>

단일 행을 신규 행과 기존 행으로 구분하여 삭제한다.

 

scwin.btn_rowDel_onclick = function(e) {
    var idx = grd_list.getFocusedRowIndex();

    if (grd_list.getRowStatus(idx) == "C") {
        //행 추가한 행은 삭제 시 즉시 삭제
        dlt_search.removeRow(idx);
        grd_list.removeFocusedCell();
    }
    else {
        //rowInex에 해당하는 행이 삭제되지 않으며 상태 값만 삭제(D)로 변경된다. : 저장 시 삭제처리
        dlt_search.deleteRow(idx);
        grd_list.setRowBackgroundColor(idx, "red");
        grd_list.removeFocusedCell();
    }
};

 

 

 

 

 

 

<행 삭제 - 신규 행과 기존 행 분리 삭제>

포커스된 모든 행, 다중 행을 신규 행과 기존 행으로 분리하여 삭제한다.

 

scwin.btn_rowDel_onclick = function(e) {
    var aryFoc = grd_list.getAllFocusedRowIndex();  //포커스된 모든 row 인덱스
    
    var rowsToRemove = [];  //행추가한 행
    var rowsToDelete = [];  //기존 행

    //기존 행과 행추가한 행 분리
    for (var i = 0; i < aryFoc.length; i++) {
        if (dlt_search.getRowStatus(aryFoc[i]) == "C") {
            rowsToRemove.push(aryFoc[i]);   
        } else {
            rowsToDelete.push(aryFoc[i]);   
        }
    }

    //기존 행 : 상태 값만 삭제(D)로 변경 > 저장 시 삭제처리
    for (var i = rowsToDelete.length - 1; i >= 0; i--) {
        dlt_search.deleteRow(rowsToDelete[i]);
        grd_list.setRowBackgroundColor(rowsToDelete[i], "red");
        grd_list.setCellChecked(rowsToDelete[i], 0, true);
        grd_list.removeFocusedCell();
    }

    //행추가한 행 : 그리드에서 즉시 삭제
    for (var i = rowsToRemove.length - 1; i >= 0; i--) {
        dlt_search.removeRow(rowsToRemove[i]);
        grd_list.removeFocusedCell();
    }
};

 

 

굳이 서로 다른 배열로 분리하는 이유는,

 

신규 행을 먼저 제거할 시 인덱스 번호가 당겨져서 기존 행의 삭제 로직이 꼬이기 때문이다.

 

 

따라서, 기존 행을 먼저 삭제한 후에 신규 행을 뒤에서부터 삭제해야 한다.