編集モードと入力モード

SpreadJSは、Spreadの下部にあるステータスバーにセルのエディタモードに関する情報を提供します。セルを操作しているときに、次の種類のセルのエディタモードになる可能性があります。

Ready（準備完了） ：セルの一般的な状態を示します。セルを選択してアクティブセルにしたときに表示されます。
Enter（入力） ：空白セルにデータを入力するモードを示します。ユーザーが移動または選択を実行すると、現在の入力が確定されて移動または他のセルの選択が行われます。
Edit（編集） ：空白でないセル内で編集を行うモードを示します。セル内で編集中は、カーソルキーで他のセルに移動することはできません。

セルモードがEnter（入力）やEdit（編集）の場合は、エディタが編集モードになります。

空白セルに値を入力するか、ダブルクリックすると、このセルは入力モードに切り替わります。空白以外のセルをダブルクリックすると、このセルは編集モードに切り替わります。さらに、デフォルトでは、キーボードショートカットのF2キーを押すと、セルが編集モードになります。

入力モードのセルで、マウスの左ボタンを使用してエディタをクリックすると、セルモードが編集モードに変わります。編集モードのシート上では、矢印キーを使用してセル内を移動できます。

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, "セルモード：準備完了");
            $("#status").text("準備完了");
        } else if (statusnow === GC.Spread.Sheets.EditorStatus.enter) {
            activeSheet.setValue(0, 0, "セルモード：入力");
            $("#status").text("入力");
        } else if (statusnow === GC.Spread.Sheets.EditorStatus.edit) {
            activeSheet.setValue(0, 0, "セルモード：編集");
            $("#status").text("編集");
        }
    }
</script>
<body>
    <div id="ss" style="height:700px;width:900px"></div>
    <label id="status" style="margin: 10px" />
</body>

エディタモードの変更

SpreadJSでは、changeEditorStatusコマンドを使用してセルのエディタモードを変更できます。このコマンドを使用して、セルを編集するときにEnter（入力）とEdit（編集）を切り替えます。また、セルのエディタモードを変更するには、デフォルトのキーボードショートカットであるF2キーも使用できます。

SpreadJS には、編集モードでアクティブセルの編集を開始できるstartEditコマンドも用意されています。また、編集モードでアクティブセルの編集を開始するには、デフォルトのキーボードショートカットであるF2キーも使用できます。

changeEditorStatusコマンドを使用してエディタのモードを変更するには、編集モードでアクティブセルの編集を開始し、startEditコマンドを使用してEditStartingイベントをトリガーする必要があります。

次の例では、エディタのモードを表示しています。アクティブセルの編集を開始したときにEnterモードに変更しました。

startedit

<body>
    <script src="./scripts/gc.spread.sheets.all.0.0.0.min.js" type="text/javascript"></script>
    
    <!-- StartEditコマンドを実行するボタンを追加します。 -->
    <button id="btn1">startEditコマンドを実行</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);

        //ボタンクリック関数を定義します。
        document.getElementById("btn1").onclick = () => {

            //startEditコマンドを実行します。
            //これによりEditStartingイベントがトリガーされます。
            spread.commandManager().execute({ cmd: "startEdit", sheetName: "Sheet1" });

            //changeEditorStatusコマンドを実行して、セルを編集する際にエディタモードをEnterに切り替えます。
            //これによりEditorStatusChangedイベントがトリガーされます。
            spread.commandManager().execute({cmd: "changeEditorStatus", sheetName: "Sheet1"});
        }
    </script>
</body>