jqGrid 테이블의 인라인 편집, 저장 및 취소 기능 구현

HTML 구조

<div class="panel-body">
    
    <div id="gridPager"></div>
</div>

JavaScript 코드

$("#gridTable").jqGrid({
    colModel: [ //jqGrid 각 열의 구성 정보. 이름, 인덱스, 너비, 정렬 방식 등...
        {name: 'id', index: 'id', width: 100, align: 'right'},
        // 첫 번째 단계: upperLimit 열을 편집 가능하도록 설정
        {name: 'upperLimit', index: 'upperLimit', width: 150, align: "right", editable: true},
        {name: 'lowerLimit', index: 'lowerLimit', width: 150, align: "right", editable: true}, 
        {name: 'actions', index: 'actions', width: 100, height: 300, align: "right"}],
    gridComplete: function() { // 두 번째 단계: 데이터 로딩 완료 후 작업 버튼 추가  
        var rowIds = jQuery("#gridTable").jqGrid('getDataIDs'); // 테이블의 모든 행 ID 가져오기
        for (var i = 0; i < rowIds.length; i++) {
            var currentId = rowIds[i];
            var actionButtons = "<div class='btnBox'> " +
                               "<button type='button' onclick='modifyRowData(" +
                               currentId +
                               ")'>편집</button>" +
                               "<button type='button' onclick='saveRowData(" +
                               currentId +
                               ")'>저장</button>" +
                               "<button type='button' onclick='cancelRowEdit(" +
                               currentId + ")'>취소</button> </div>"

            jQuery("#gridTable").jqGrid('setRowData', rowIds[i], {actions: actionButtons}); // 각 행에 작업 버튼 추가
        }
    }
});

function modifyRowData(rowId) { // 세 번째 단계: 편집 작업 정의
    var configOptions = {
        oneditfunc: function(rowid) { // 행이 성공적으로 편집 모드로 전환될 때 트리거되는 이벤트
            //console.log("Editing row: " + rowid);
        }
    }
    
    jQuery("#gridTable").editRow(rowId); // 편집 모드 활성화
    jQuery('#gridTable').jqGrid('editRow', rowId, true, attachDatePicker); // 편집 모드 활성화 및 날짜 선택기 연결
}

// 네 번째 단계: 저장 작업 정의, 편집된 데이터를 키-값 쌍으로 백엔드로 전송
function saveRowData(rowId) {  
    var saveConfig = {
        url: "sensor/updateParameters", // jqGrid의 editurl 대체
        mtype: "POST",
        extraparam: { // 백엔드로 전송될 추가 데이터
            "extraParam1": "1",
            "extraParam2": "2"
        },
        successfunc: function(response) { // 요청 성공 후 즉시 호출되는 함수
            alert(response.responseText); // 백엔드에서 반환된 데이터 수신
            if (response.responseText === "false") {
                alert("상한값은 하한값보다 클 수 없습니다");
                return false; // false 반환 시 수정 전 데이터로 채우고 편집 모드를 종료합니다.
            } else {
                alert("편집 성공");
                return true; // true 반환 시 수정된 데이터로 현재 행을 채우고 편집 모드를 종료합니다.
            }
        }
    };
    
    jQuery('#gridTable').saveRow(rowId, saveConfig);
}

// 다섯 번째 단계: 취소 작업 정의
function cancelRowEdit(rowId) {
    jQuery('#gridTable').restoreRow(rowId); // 수정 전 데이터로 현재 행을 채웁니다
}

Java 컨트롤러 코드

/** 센서 매개변수 설정 
컨트롤러 메서드가 매개변수를 수신하고 반환값을 처리하는 방법에 중점을 둡니다 **/
@RequiresPermissions("sensor:create")
@ResponseBody
@RequestMapping(value = "sensor/updateParameters", method = RequestMethod.POST)
public boolean updateSensorParameters(Model model, long sensorId, Float upperBound, Float lowerBound, String extraParam1, String extraParam2) {
    if (upperBound > lowerBound) { // 데이터베이스에 저장하고 true 반환
        Sensor sensor = sensorService.findById(sensorId);
        sensor.setUpperLimit(upperBound);
        sensor.setLowerLimit(lowerBound);
        sensorService.save(sensor);
        return true;
    } else { // false 반환
        return false;
    }
}

매개변수 상세 설명 (1)url: 이 값이 정의된 경우 jqGrid의 editurl을 덮어씁니다 url="clientArray"로 설정하면 서버 측 요청이 트리거되지 않습니다 (2)extraparam: 요청 매개변수 목록 (3)successfunc: 요청 성공 후 즉시 호출되며, 이 함수 서명에는 서버에서 반환된 데이터가 포함됩니다. 동시에 이 함수는 true/false를 반환해야 합니다

인라인 편집 시 특정 셀에 날짜 선택기 바인딩

function modifyRowData(rowId) { // 세 번째 단계: 편집 작업 정의
    // 편집 모드를 활성화하고 pickdates() 함수에 rowId 매개변수 전달
    jQuery('#gridTable').jqGrid('editRow', rowId, true, attachDatePicker);
}

function attachDatePicker(id) {
    // ***jqGrid의 셀 ID는 행번호_열명 형식입니다***
    // ID가 gridTable인 테이블의 id번째 행 upperLimit 열에 click 이벤트 추가 및 날짜 선택기 바인딩
    jQuery("#" + id + "_upperLimit", "#gridTable").bind("click",
            function() {
                WdatePicker({
                    dateFmt: 'HH:mm'
                });
            });
    
    // ID가 gridTable인 테이블의 id번째 행 lowerLimit 열에 click 이벤트 추가 및 날짜 선택기 바인딩
    jQuery("#" + id + "_lowerLimit", "#gridTable").bind("click",
            function() {
                WdatePicker({
                    dateFmt: 'HH:mm'
                });
            });
}