View 기본 사항

View 생성

테이블에서 addView를 사용합니다.

var view = table.addView(
    name,
    columnInfos?,
    includeDefaultColumns?,
    options?
);

매개 변수

name - 테이블 내에서 고유한 View 이름입니다.
columnInfos - 필드 이름 또는 열 구성 객체의 배열입니다.
includeDefaultColumns - 열 정보가 생략된 경우 기본 테이블 열을 포함할지 여부를 지정합니다.
options - 추가적인 View 수준 구성입니다.

예제

테이블에 다음 데이터가 있다고 가정합니다.

var sampleData = [
    { Id: 1, Name: "John Doe", Score: 85 },
    { Id: 2, Name: "Jane Smith", Score: 92 }
];

테이블 생성:

var myTable = dataManager.addTable("myTable", {
    data: sampleData
});

View 생성:

var myView = myTable.addView("myView", [
    { value: "Id", caption: "ID", width: 60 },
    { value: "Name", width: 150 },
    { value: "Score", width: 80 }
]);

이 View는:

선택한 필드만 포함합니다.
Id를 ID로 이름 변경합니다.
열 레이아웃을 제어합니다.

열을 지정하지 않으면 View는 호스트 테이블의 모든 기본 열을 포함합니다.

View 초기화

View를 생성한 후 다음을 호출해야 합니다.

view.fetch();

이 단계는 View 데이터를 초기화하고 사용할 준비를 수행합니다.

이 메서드는 Promise를 반환합니다.

view.fetch().then(function () {
    tableSheet.setDataView(view);
});

기본 데이터 원본을 새로 고쳐야 하는 경우 다음을 사용합니다.

view.fetch(true);

fetch()를 호출하면 바인딩 또는 데이터 접근 전에 View가 호스트 테이블의 최신 상태를 반영하도록 보장합니다.

View를 시트에 바인딩

View는 UI 컴포넌트의 구조화된 데이터 원본 역할을 합니다.

테이블 시트에 바인딩

view.fetch().then(function () {
    tableSheet.setDataView(view);
});

간트 시트에 바인딩

view.fetch().then(function () {
    ganttSheet.bindGanttView(view);
});

시트는 View에서 정의된 구조에 따라 데이터를 렌더링합니다.

View 관리

각 테이블은 View 컬렉션을 유지합니다.

동일한 테이블 데이터를 서로 다른 레이아웃으로 표현하기 위해 여러 View를 생성할 수 있습니다.

View 추가

table.addView("summaryView");

View 제거

table.removeView("summaryView");

View를 제거해도 기본 테이블 데이터에는 영향을 주지 않습니다.

View의 열 관리

View 생성 후에도 열을 조정할 수 있습니다.

열 추가

view.addColumn("Email");

구성과 함께 열 추가

view.addColumn({
    value: "Email",
    caption: "이메일 주소",
    width: 200
});

열 제거

view.removeColumn("Email");

열 가져오기

view.getColumn();     // 모든 열
view.getColumn(1);    // 특정 열

이 작업들은 View의 구조만 수정하며, 기본 테이블 스키마는 변경하지 않습니다.