jqGrid에서 JavaScript로 선택 항목 제어

jqGrid는 대규모 데이터를 효율적으로 테이블 형식으로 렌더링할 수 있도록 도와주는 JavaScript 기반 그리드 라이브러리입니다. 특히 사용자 인터랙션이 필요한 경우, 선택 항목 제어 기능은 필수 요소입니다. 이 글에서는 jqGrid 선택 항목을 JavaScript로 어떻게 효과적으로 조작할 수 있는지, 다양한 시나리오와 함께 자세히 다룹니다.

 

기본 jqGrid 설정 및 선택 항목 이해

jqGrid 초기 설정 방식

jqGrid는 보통 jQuery를 기반으로 하며, 초기 설정 시 colModel, datatype, pager, rowNum 등의 속성을 지정합니다.

$("#grid").jqGrid({
  url: '/data.json',
  datatype: "json",
  colNames: ['ID', '이름', '나이'],
  colModel: [
    { name: 'id', index: 'id', width: 60, key: true },
    { name: 'name', index: 'name', width: 100 },
    { name: 'age', index: 'age', width: 80 }
  ],
  multiselect: true,
  rowNum: 20,
  pager: '#pager'
});

• multiselect: true를 설정하면 체크박스를 통해 다중 선택이 가능해집니다.
• 선택 항목 제어는 이 옵션을 전제로 합니다.

선택 항목 기본 구조

선택 항목은 내부적으로 selarrrow, selrow 등을 통해 jqGrid의 상태로 저장되며, 이를 JavaScript로 조작할 수 있습니다.

반응형

JavaScript로 선택 항목 가져오기

단일 선택된 행 ID 가져오기

var selectedId = $("#grid").jqGrid("getGridParam", "selrow");

• 단일 선택일 경우 selrow 속성을 사용하여 현재 선택된 행의 ID를 반환합니다.

다중 선택된 행 ID 목록 가져오기

var selectedIds = $("#grid").jqGrid("getGridParam", "selarrrow");

• selarrrow는 배열로 선택된 모든 행의 ID를 제공합니다.
• multiselect: true가 반드시 활성화되어 있어야 작동합니다.

반응형

선택 항목 프로그래밍 방식으로 설정하기

특정 행을 선택 상태로 만들기

$("#grid").jqGrid("setSelection", "rowId");

• "rowId"는 선택하고자 하는 행의 실제 ID입니다.
• 기본적으로 기존 선택은 해제되고 지정된 행만 선택됩니다.

기존 선택을 유지하면서 추가 선택하기

$("#grid").jqGrid("setSelection", "rowId", false);

• 세 번째 인자에 false를 넣으면 기존 선택을 유지하며 추가로 선택할 수 있습니다.

반응형

선택 항목 초기화 및 해제 방법

모든 선택 해제하기

$("#grid").jqGrid("resetSelection");

• 현재 선택된 모든 항목을 초기화하여 아무것도 선택되지 않은 상태로 만듭니다.

특정 행 선택 해제하기

$("#grid").jqGrid("resetSelection", "rowId");

• "rowId"에 해당하는 항목만 선택 해제됩니다.

반응형

조건부 선택 항목 제어

조건에 따라 특정 항목 선택

var allData = $("#grid").jqGrid("getRowData");
allData.forEach(function(row) {
  if (parseInt(row.age) > 30) {
    $("#grid").jqGrid("setSelection", row.id, false);
  }
});

• 나이가 30세 이상인 행만 자동으로 선택 처리하는 예제입니다.
• 조건문을 자유롭게 수정하여 다양한 필터링이 가능합니다.

반응형

이벤트 기반 선택 항목 처리

행 선택 시 이벤트 트리거

$("#grid").jqGrid({
  ...
  onSelectRow: function(id, status, e) {
    console.log("선택된 ID: " + id);
  }
});

• onSelectRow는 행이 선택될 때마다 트리거됩니다.
• Ajax 요청이나 추가 로직을 연동하기 유용합니다.

다중 선택 시 이벤트 활용

$("#grid").jqGrid({
  ...
  onSelectAll: function(aRowids, status) {
    console.log("전체 선택 상태: ", status);
  }
});

• 전체 선택 또는 전체 해제 시 동작하는 콜백 함수입니다.

반응형

선택 항목과 서버 연동

선택 항목 데이터를 서버로 전송하기

var selectedIds = $("#grid").jqGrid("getGridParam", "selarrrow");

$.ajax({
  url: "/api/submit",
  method: "POST",
  contentType: "application/json",
  data: JSON.stringify({ ids: selectedIds }),
  success: function(response) {
    alert("서버에 성공적으로 전송되었습니다.");
  }
});

• 선택된 ID 배열을 JSON 형태로 서버에 전송합니다.
• 선택 항목 기반 삭제, 수정, 처리 요청 등에 활용할 수 있습니다.

반응형

선택 항목 관련 UI 개선 팁

선택 박스 강조 스타일 적용하기

.ui-jqgrid .ui-state-highlight {
  background-color: #e6f7ff !important;
  border-left: 4px solid #1890ff;
}

• 선택된 행이 더욱 눈에 띄도록 커스터마이징합니다.
• 사용자 경험(UX)을 크게 개선할 수 있습니다.

선택 항목 수 실시간 표시하기

$("#grid").jqGrid({
  ...
  onSelectRow: function(id, status) {
    var count = $("#grid").jqGrid("getGridParam", "selarrrow").length;
    $("#selectedCount").text("선택된 항목 수: " + count);
  }
});

<div id="selectedCount">선택된 항목 수: 0</div>

• 선택 변화에 따라 동적으로 갱신됩니다.

반응형

jqGrid 선택 항목 관련 자주 묻는 질문

Q1. 선택 항목이 초기화되지 않는 이유는?

• multiselect: true가 설정되어 있어야 selarrrow가 정상 작동합니다.
• Ajax 로드 후 데이터가 완전히 바인딩되기 전에 접근 시 오류가 발생할 수 있습니다.

Q2. setSelection으로 선택했는데 UI에 반영되지 않아요.

• jQuery setTimeout으로 실행 시점을 지연시켜 해결할 수 있습니다.

setTimeout(function() {
  $("#grid").jqGrid("setSelection", "rowId", false);
}, 200);

Q3. 체크박스 대신 행 클릭으로 선택 처리하려면?

• beforeSelectRow를 활용하여 행 클릭 시 체크박스가 동기화되도록 설정 가능합니다.

$("#grid").jqGrid({
  ...
  beforeSelectRow: function(rowid, e) {
    $("#grid").jqGrid("setSelection", rowid, true);
    return false;
  }
});

반응형

결론

jqGrid의 선택 항목은 단순히 체크박스를 넘어 복잡한 데이터 인터랙션의 핵심 도구입니다. JavaScript를 통해 자유자재로 선택을 제어함으로써 유저 경험을 높이고, 정확한 서버 처리를 연결할 수 있습니다. 이 가이드를 바탕으로 선택 항목을 유연하게 관리하고, 복잡한 그리드 로직도 간단하게 구현할 수 있습니다.