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

편집 상태

SpreadJS는 스프레드시트 하단에 위치한 상태 표시줄(status bar) 을 통해 셀의 편집 상태에 대한 정보를 제공합니다.

셀과 상호작용하는 동안 다음과 같은 편집 상태를 확인할 수 있습니다:

  • 준비(Ready): 일반적인 상태를 나타냅니다. 아직 셀과 상호작용 하지 않은 상태입니다.

  • 들어감(Enter): 비어 있는 셀에 데이터 입력 모드로 진입한 상태입니다.

    이 상태에서 사용자가 이동 또는 선택 작업을 수행하면, Spread는 현재 입력을 커밋한 뒤 다른 셀로 이동하거나 선택합니다.

  • 편집(Edit): 비어 있지 않은 셀에서 셀 내부 편집 모드로 진입한 상태입니다. 이 상태에서는 방향키(커서 키)를 사용하여 다른 셀로 이동할 수 없습니다.

편집기는 셀의 편집 상태가 Enter 또는 Edit일 때 편집 모드로 전환됩니다. 빈 셀에서 타이핑하거나 더블 클릭하면 셀이 Enter 상태로 진입하고, 값이 있는 셀을 더블 클릭하면 셀이 Edit 상태로 진입합니다. 또한, 기본적으로 키보드 단축키 F2 키를 누르면 셀은 Edit 상태로 전환됩니다.

만약 셀이 Enter 상태일 때 편집기 영역을 마우스 왼쪽 버튼으로 클릭하면 상태는 Edit로 변경됩니다. 편집 모드에서도 방향키를 사용하여 이동할 수 있습니다.

SpreadJS는 코드상에서 셀의 편집 상태를 가져오거나 변경할 수 있도록 지원합니다.

아래 섹션들을 참조하여 자세한 정보를 확인하세요:

  • 편집 상태 가져오기

  • 편집 상태 변경

편집 상태 가져오기

SpreadJS는 Worksheet 클래스의 editorStatus 메서드를 통해 셀의 편집 상태 정보를 가져올 수 있도록 지원합니다. 이 메서드는 셀의 편집 상태가 변경될 때 특정 동작을 트리거하거나 이벤트를 발생시키는 데 사용할 수 있습니다. 또한 SpreadJS는 더블 클릭과 유사한 동작을 수행하는 startEdit 메서드도 제공합니다.

다음 예제는 현재 셀의 편집 상태를 표시하고, 그 상태에 따라 셀의 값을 변경하는 방법을 보여줍니다:


<script>
    $(document).ready(function () {

        var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
        var activeSheet = spread.getActiveSheet();
        spread.commandManager().register("startEditing", { 
        canUndo: false, execute: function (context, options) {
            var sheet = context.getSheetFromName(options.sheetName);
            if (sheet && !sheet.isEditing()) {
                sheet.startEdit();
            }
        }
        }, 113, false, false, false, false);
        
        setstatus(activeSheet);
        activeSheet.bind(GC.Spread.Sheets.Events.EditorStatusChanged, function (e, args) {
            setstatus(activeSheet, args.status);
        });
    });

    function setstatus(activeSheet, status) {
        var statusnow = status || activeSheet.editorStatus();
        if (statusnow === GC.Spread.Sheets.EditorStatus.ready) {
            activeSheet.setValue(0, 0, "Editor Status: Ready!");
            $("#status").text("Ready");
        } else if (statusnow === GC.Spread.Sheets.EditorStatus.enter) {
            activeSheet.setValue(0, 0, "Editor Status: Enter!");
            $("#status").text("Enter");
        } else if (statusnow === GC.Spread.Sheets.EditorStatus.edit) {
            activeSheet.setValue(0, 0, "Editor Status: Edit!");
            $("#status").text("Edit");
        }
    }
</script>
</head>
<body>
    <div id="ss" style="height:700px;width:900px"></div>
    <label id="status" style="margin: 10px" />
</body>

편집 상태 변경

SpreadJS는 셀을 편집할 때 changeEditorStatus 명령어를 사용하여 프로그래밍 방식으로 셀의 편집 상태를 변경할 수 있도록 지원합니다. 이 명령어는 Enter와 Edit 상태 간을 전환합니다.

또한, 기본 키보드 단축키인 F2 키를 통해서도 셀의 편집 상태를 변경할 수 있습니다.

SpreadJS는 startEdit 명령어도 제공하며, 이를 사용하면 현재 활성 셀에서 Edit 모드로 편집을 시작할 수 있습니다.

기본적으로 F2 키를 눌러도 활성 셀에서 Edit 모드로 편집이 시작됩니다.

changeEditorStatus 명령어로 편집 상태를 변경하려면, 먼저 startEdit 명령어를 사용해 활성 셀을 Edit 모드로 시작한 후, EditStarting 이벤트를 트리거해야 합니다.

다음 예제는 편집 상태를 표시하고, 활성 셀을 편집하기 시작할 때 상태를 직접 Enter 모드로 설정하는 방법을 보여줍니다:

image

<body>
    <script src="./scripts/gc.spread.sheets.all.0.0.0.min.js" type="text/javascript"></script>
    
    // 편집 시작 명령을 실행하는 버튼을 추가
    <button id="btn1">Start Edit Command</button>
    
    <div class="sample-container">
        <div id="ss" class="sample-spreadsheets"></div>
        <div id="statusBar"></div>
    </div>
    <script>
		let spread = new GC.Spread.Sheets.Workbook("ss");
        
        // 상태 표시줄 표시
        let statusBar = new GC.Spread.Sheets.StatusBar.StatusBar(
            document.getElementById('statusBar')
        );
        statusBar.bind(spread);
        
        // 활성 워크시트 접근
        let sheet = spread.getActiveSheet();

        // 워크시트에 값 추가
        sheet.setArray(1, 1, [
            ['Id', 'Name', 'Age', 'Grade'],
            [1000, 'Tom', 23, 98],
            [1001, 'Bob', 22, 80],
            [1002, 'Tony', 23, 99]
        ]);
        
        // 열 너비 설정
        sheet.setColumnWidth(1, 80);
        sheet.setColumnWidth(2, 80);
        sheet.setColumnWidth(3, 80);
        sheet.setColumnWidth(4, 80);

        // click 버튼 함수 정의
        document.getElementById("btn1").onclick = () => {

            // startEdit 명령 수행
            // EditStarting 이벤트 트리거
            spread.commandManager().execute({ cmd: "startEdit", sheetName: "Sheet1" });

            // 셀을 편집할 때 편집 상태를 Enter로 전환하기 위해 changeEditorStatus 명령을 실행
            // 이 동작은 EditorStatusChanged 이벤트를 트리거
            spread.commandManager().execute({cmd: "changeEditorStatus", sheetName: "Sheet1"});
        }
    </script>
</body>