guide Sorting

RtDataView

리스트 컨트롤이 RtDataView에 연결되면 데이터행 정렬이 가능하다. 즉, 먼저 createView로 먼저 데이터뷰를 생성해야 한다.

const dv = data.createView('dv', {});
list.data = dv;

최초 정렬 상태가 필요하면 데이터뷰 생성 옵션에 정렬 설정을 포함할 수 있다.

const dv = RealTouch.createDataView('dv', data, {
    sort: ['DEPT', 'NAME']
});

혹은, 빌더 패턴으로도 가능하다.

const dv = RealTouch.createDataView('dv', data)
                .sort('DEPT');

Field Bar

사용자는 컨트롤 헤더 아래 표시되는 필드 Bar를 이용해 정렬 상태를 설정할 수 있다.

필드 Bar는 기본적으로 표시되지 않기 때문에 설정을 해줘야 한다. 자세한 속성 설명은 필드 Bar 페이지를 참조한다.

list.setConfig({
    options: {
        fieldBar: {
            visible: true,
            fields: 'template'
        }
    }
})

API

데이터뷰 생성 후에도 정렬 메소드들을 사용하면 UI 관여 없이 언제든 정렬 상태를 변경할 수 있다.
sort는 기존 정렬 상태를 제거하고 새로 정렬한다.

dv.sort({
    field: 'DEPT',
    dir: RealTouch.RtDataSortDirection.DESCENDING
}, true);
// 복수 필드 지정
dv.sort([{
    field: 'DEPT',
    dir: 'descending'
}, {
    field: 'NAME',
    dir: 'ascending'
}], true);

// 방향을 지정하지 않은 문자열로 지정하면 RtDataSortDirection.ASCENDING(= 'ascending')이다.
dv.sort('DEPT', true);
dv.sort(['DEPT', 'NAME'], true);

// 기본 필드 정렬 대신 정렬 콜백을 지정할 수도 있다.
dv.sort({
    field: 'c1', // 콜백일 때는 정렬 이름
    comparer: (r1, v1, r2, v2) => v1.quantity * v1.price - v2.quantity * v2.price)
});

두 번째 매개변수를 true로 지정해야 데이터뷰의 행들이 새로 구축된다.
기존 정렬 상태를 유지한 채 새로운 정렬 설정을 추가할 수도 있다.

dv.addSort('NAME', 'ascending', 'NAME', true);
dv.appendSort('DEPT', 'descending', true);
dv.appendSorter('s1', (r1, v1, r2, v2) => v1.qty * v1.price - v2.qty * v2.price, true);

toggleSort 호출로 특정 데이터필드의 정렬 상태를 변경할 수 있다.

dv.toggleSort('NAME', true);

removeSort, clearSort로 지정된 정렬 상태를 제거할 수 있다.

dv.removeSort('NAME', true);
dv.clearSort(true);

Home

Demo

Docs

FAQ

guide Sorting

RtDataView

Field Bar

API

See Also