[jqGrid] 이벤트 핸들링 - ready, loadComplete, onSelectRow, change

1. 페이지 로드 시 초기 이벤트 설정

$(document).ready(function ($) {
    // 날짜 선택기 초기화
    $("#startDate").datepicker();
    $("#endDate").datepicker();
    
    // 버튼 초기 상태 설정
    $('#editBtn').prop("disabled", true);
    $('#printBtn').prop("disabled", true);

    // 검색 버튼 클릭 이벤트
    $('#searchBtn').click(function (e) {
        $("#currentPage").val(1);
        searchData();
        e.preventDefault();
    });

    // 그리드 반응형 처리
    $(window).bind('resize', function () {
        $('#mainGrid').setGridWidth($('#gridContainer').width());
        var height = $(window).height() - $('#gridContainer')[0].offsetTop;
        if (height > 275)
            $('#mainGrid').setGridHeight(height - 142);
    }).trigger('resize');
});

 

 

2. 그리드 데이터 로드 완료 이벤트

loadComplete: function() {
    // 빈 데이터 처리
    if ($(this).getGridParam("records")==0) {
        var message = '검색 결과가 없습니다.';
        $(this).addRowData("emptyRow", message);
    }

    // 각 행 데이터 처리
    var rows = jQuery("#mainGrid").jqGrid('getDataIDs');
    for(var i = 0; i < rows.length; i++){
        var rowId = rows[i];
        var rowData = jQuery("#mainGrid").getRowData(rows[i]);
        
        // 상태값에 따른 스타일 적용
        if(rowData.status == 'PENDING') {
            $("#mainGrid").jqGrid('setRowData', rowId, false, { color: 'gray'});
        }
    }
}

 

 

 

3. 행 선택 이벤트

onSelectRow : function(rowId, status, e) {
    // 기본 버튼 상태
    $('#editBtn').prop("disabled", true);

    if (rowId == 'emptyRow') return;

    var rowData = $(this).getRowData(rowId);
    
    // 조건에 따른 버튼 활성화
    if(rowData.type == 'NORMAL' && rowData.quantity > 0)
        $('#printBtn').prop("disabled", false);
    else 
        $('#printBtn').prop("disabled", true);

    // 선택된 데이터 저장
    $('#selectedId').val(rowData.id);
    $('#selectedName').val(rowData.name);
}

 

 

 

4. 체크박스 관련 이벤트

// 전체 선택 체크박스
$('#selectAll').change(function(){
    var isChecked = $(this).prop("checked");
    $('input:checkbox[name="itemCheck"]').prop("checked", isChecked);
});

// 개별 체크박스
$(document).on('change', '.itemCheckbox', function(){
    var allChecked = true;
    $('input:checkbox[name="itemCheck"]').each(function() {
        if(!this.checked) allChecked = false;
    });
    $("#selectAll").prop("checked", allChecked);
});

 

 

 

✅ 메모

각 이벤트가 언제 발생하고 어떤 처리를 하는지 파악하는 게 중요하다. 특히 아래 사항들을 주의깊게 봐야한다:

• 문서 로딩 시 초기화 작업
• 데이터 로드 완료 후의 추가 처리
• 행 선택 시의 UI 업데이트
• 체크박스 동작 로직

이런 이벤트들이 모여서 그리드의 완성도 높은 사용자 경험을 만들어낸다. 🤓