syidaxgrid
홈 가격 내 정보

GRID FEATURE

행 단위 선택

행 선택은 승인·내보내기·배정 같은 일괄 작업의 대상을 고릅니다. 셀 범위 선택과 달리 한 주문 전체를 선택합니다.

Markdown 원문 Features

동작 원리와 선택 기준

선택 결과는 표시 순서가 아닌 ID 목록으로 저장합니다. 선택하는 것 자체가 주문 삭제나 서버 처리를 실행하지는 않습니다.

코드의 grid는 설치와 연결 장에서 준비한 Grid 요소입니다. 예제마다 필요한 데이터·설정을 확인하고, 코드에서 소개하는 앱 함수와 서버 주소는 프로젝트에 맞게 구현하세요.

예제 1. 여러 주문 체크

체크박스로 여러 주문을 동시에 선택하도록 구성합니다.

javascript
grid.rowSelection = 'multi';
grid.selectionCheckbox = true;
await grid.selectRows(['ORD-0001', 'ORD-0003']);

결과 확인: 두 주문이 선택됩니다. 헤더 체크박스가 적용되는 표시 범위와 서버 전체 선택을 구분하세요.

예제 2. 일괄 작업 대상 읽기

선택된 ID를 읽어 앱의 확인 화면에 전달합니다.

javascript
const selectedIds = await grid.getSelectedRowIds();
console.log(selectedIds);

결과 확인: 정렬 후에도 같은 ID의 주문을 업무 대상으로 식별합니다. 선택이 비어 있으면 처리 버튼을 비활성화하는 식으로 앱 UI를 연결합니다.

예제 3. 선택 변화에 반응

체크할 때마다 선택 개수와 상세 패널을 갱신합니다.

javascript
grid.addEventListener('selectionChanged', event => console.log(event.detail));
// 선택 해제
await grid.selectRows([]);

결과 확인: 체크 해제 후 결과가 비는지 확인합니다. 서버에 없는 ID 또는 삭제된 주문을 계속 처리 대상으로 보관하지 마세요.

조합할 때와 문제를 해결할 때

현재 로드된 행 선택만으로 서버 전체 데이터 선택을 표현할 수는 없습니다. 서버 행 모델의 선택 상태 API를 사용해야 하는 경우를 구분합니다.

읽기 권한과 선택 가능 상태는 같은 정책이 아닙니다. 선택된 ID로 업무 요청을 보낼 때 서버에서 다시 권한을 검사하세요.

함께 읽기