syidaxgrid
홈 가격 내 정보

GRID FEATURE

단일·다중 정렬

정렬은 데이터 값을 수정하지 않고 표시 순서를 바꿉니다. 단일 정렬은 한 기준만, 다중 정렬은 우선순위가 있는 여러 기준을 사용합니다.

Markdown 원문 Features

동작 원리와 선택 기준

숫자를 문자열로 저장하면 기대한 숫자 순서와 다를 수 있습니다. 표시 포맷은 formatter에서 처리하고 정렬 기준은 실제 타입에 맞게 준비하세요.

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

예제 1. 수량이 많은 주문부터

수량 열에 내림차순 정렬을 명시적으로 적용합니다.

javascript
await grid.sortBy('quantity', 'desc');
console.log(await grid.getSortModel());

결과 확인: quantity 내림차순 모델이 적용됩니다. direction을 생략한 순환 동작과 명시적인 desc 설정을 구분합니다.

예제 2. 팀 안에서 수량 비교

팀을 우선으로 묶고 같은 팀 안에서 수량을 비교합니다.

javascript
grid.multiSort = true;
await grid.setSortModel([{ field: 'team', direction: 'asc' }, { field: 'quantity', direction: 'desc' }]);

결과 확인: 배열 첫 조건이 우선합니다. 원본 행 ID와 값은 유지되고 표시 위치만 달라집니다.

예제 3. 정렬 해제와 사용자 변경 구독

원래 순서로 돌아가고 이후 사용자가 헤더를 눌렀을 때 모델을 읽습니다.

javascript
await grid.setSortModel([]);
grid.addEventListener('sortChanged', event => console.log(event.detail));

결과 확인: 빈 모델은 정렬 해제입니다. 여러 조건 중 하나만 제거하려면 sortBy의 null 동작과 전체 모델 교체를 구분합니다.

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

원격 모델에서는 서버가 같은 정렬 규칙을 적용해야 합니다. 페이지마다 브라우저에서만 정렬하면 페이지 사이의 순서는 틀릴 수 있습니다.

여러 값이 같은 경우에도 결과가 안정적이어야 한다면 앱의 데이터 순서나 서버의 보조 키를 관리하세요. 정렬 후 rowIndex로 업무 대상을 저장하지 않습니다.

함께 읽기