[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

행 동작

테이블 시트는 행 머리글(row header)에 상태를 표시하고 UI에서 행 작업(row operations)을 수행할 수 있는 특별한 열을 제공합니다.


아래는 ableSheet.rowActionOptions 메서드를 통해 활성화할 수 있는 BuiltInRowActions 클래스의 기본 제공 행 작업입니다:

이름

설명

pinRow

행을 고정합니다.

dirtyStatus

행의 데이터 변경 사항을 표시합니다.

warningInfo

행에 경고 정보를 표시합니다.

removeRow

행을 삭제합니다.

saveRow

행의 데이터 변경 사항을 저장합니다.

resetRow

행의 데이터 변경 사항을 초기화합니다.

아래 코드 샘플은 테이블 시트에서 행 작업을 활성화하는 방법을 보여줍니다:

//테이블 시트 초기화
var sheet = spread.addSheetTab(0, "TableSheet1", GC.Spread.Sheets.SheetType.tableSheet);

//행 동작 초기화
var rowActions = GC.Spread.Sheets.TableSheet.BuiltInRowActions;
let options = sheet.rowActionOptions();
options.push(
    rowActions.removeRow,
    rowActions.saveRow,
    rowActions.resetRow,
);
sheet.rowActionOptions(options);

사용자 지정 작업

사용자 정의 옵션을 rowActionOptions 메서드에 전달하여 행 작업을 커스터마이즈할 수 있습니다. 예를 들어, 체크박스 및 댓글 팝업과 같은 사용자 정의 행 작업을 다음과 같이 추가할 수 있습니다:


다음 속성을 사용하여 행 작업을 사용자 정의할 수 있습니다:

속성

설명

name

string

옵션의 이름

icons

(string | GC.Spread.Sheets.ButtonImageType)

상태를 나타내는 아이콘들

iconSelector

(item: any, index: number) => number | boolean

상태에 따라 아이콘을 선택하는 함수

tooltip

String

행 작업에 대한 툴팁

command

string

행 작업 클릭 시 실행할 명령 이름

shortcutKey

GC.Spread.Sheets.TableSheet.IShortcutKey

행 작업을 실행할 단축키

다음은 테이블 시트에서 사용자 정의 행 작업을 생성하는 코드 샘플입니다:

function addCustomActions(sheet){
   var options = sheet.rowActionOptions();

   // 체크/해제 작업 추가
   options.push({
       name: 'check',
       icons: ["data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjEyIiBoZWlnaHQ9IjEyIiBmaWxsPSJ0cmFuc3BhcmVudCIvPgo8cmVjdCB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIGZpbGw9InRyYW5zcGFyZW50Ii8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTIgMEgwVjEySDEyVjBaTTEgMTFWMUgxMVYxMUgxWiIgZmlsbD0iIzY2NjY2NiIvPgo8L3N2Zz4K", "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjEyIiBoZWlnaHQ9IjEyIiBmaWxsPSJ0cmFuc3BhcmVudCIvPgo8cmVjdCB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIGZpbGw9InRyYW5zcGFyZW50Ii8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTIgMEgwVjEySDEyVjBaTTEgMTFWMUgxMVYxMUgxWiIgZmlsbD0iIzY2NjY2NiIvPgo8cGF0aCBkPSJNNS4yNSA5TDIgNS42MTI5TDMuMDA3MTQgNC41NjMyOEw1LjI1IDYuODkzM0w4Ljk4NTcxIDNMMTAgNC4wNDk2M0w1LjI1IDlINS4yNVoiIGZpbGw9IiM2NjY2NjYiLz4KPC9zdmc+Cg=="],
       tooltip: "Check/Uncheck",
       iconSelector: function (item) {
           return !!checkMap[item.id];
       },
       command: CheckRow
   });

   // 데이터에 댓글이 있으면 댓글 플래그 표시
   options.push({
       name: 'comment',
       icons: ["data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAABmJLR0QA/wD/AP+gvaeTAAAAqklEQVQokZWPLQ7CUBCEv759lkMggAMQPAKN5QLNpj0BZ+gJ2tSiuAUag4ZKEi6ApW8xUAhJfxi3m29mMpGqpkAGjOjWHdh6IBORRZ7n5y46TdNZXddHVNV6khupqvmv4wJMWtiqLMspQGN4P/rU11D9Bv3d4IZAL0XAZ3Qcx3MRWbXRZjYGTh4gSZJlCGFvZjsze7R4biKy9gAhhL1zblMUxWHIhutQGOAJuws9bfdnMH0AAAAASUVORK5CYII="],
       tooltip: "Show the comment",
       iconSelector: function (item) {
           return item.notes ? item.notes.length > 0 : false;
       },
       shortcutKey: { key: 65 /* A */, ctrl: true, alt: true },
       command: ShowComment
   });

   // 데이터에 첨부파일이 있으면 첨부 플래그 표시
   options.push({
       name: 'attachment',
       icons: ["data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAAmJLR0QA/4ePzL8AAADYSURBVBgZVcEtS4NhGIbha7KyGZZMZifIDA4/GCgWP7pYRQTv834MhoFhYnmwW4ZJmEwQRCxaDIaBNs268b4q6j9xKmPuODTI13nli5oGeeApjJK3xzCrPtvzBwrq4sZW1UO0OytuL0i+y33M6lfGjuzaJ2j7su3TsqKdqStjdS6YJLElIrc74zz7muKQn/uJzZB6xep2FUp0WJFEjVOvkFKmQTNMkTCvH7xvDJNS9kuOmSP1af3ho5qjxSfRFklCST0c0qjmyLNJx8fUF7Mc8MIbza0R/fMNfN1QmAjSSbsAAAAASUVORK5CYII="],
       tooltip: "Attachment",
       iconSelector: function (item) {
           return item.photoUrl ? item.photoUrl.length > 0 : false;
       }
   });

   sheet.rowActionOptions(options);
}