Web Components Spreadsheet の構成

Web Components Spreadsheet コンポネントは、セルの編集、グリッド線とヘッダーの表示、保護、ズームレベル、および Excel ワークシートに関連するその他のさまざまなプロパティなど、コントロールのさまざまな側面を設定できます。

Web Components Spreadsheet の構成の例

import { saveAs } from "file-saver";
import { Workbook } from 'igniteui-webcomponents-excel';
import { WorkbookFormat } from 'igniteui-webcomponents-excel';
import { WorkbookSaveOptions } from 'igniteui-webcomponents-excel';
import { WorkbookLoadOptions } from 'igniteui-webcomponents-excel';
import { IgcExcelXlsxModule } from 'igniteui-webcomponents-excel';
import { IgcExcelCoreModule } from 'igniteui-webcomponents-excel';
import { IgcExcelModule } from 'igniteui-webcomponents-excel';

IgcExcelCoreModule.register();
IgcExcelModule.register();
IgcExcelXlsxModule.register();

export class ExcelUtility {

    public static getExtension(format: WorkbookFormat) {
        switch (format) {
            case WorkbookFormat.StrictOpenXml:
            case WorkbookFormat.Excel2007:
                return ".xlsx";
            case WorkbookFormat.Excel2007MacroEnabled:
                return ".xlsm";
            case WorkbookFormat.Excel2007MacroEnabledTemplate:
                return ".xltm";
            case WorkbookFormat.Excel2007Template:
                return ".xltx";
            case WorkbookFormat.Excel97To2003:
                return ".xls";
            case WorkbookFormat.Excel97To2003Template:
                return ".xlt";
        }
    }

    public static load(file: File): Promise<Workbook> {
        return new Promise<Workbook>((resolve, reject) => {
            ExcelUtility.readFileAsUint8Array(file).then((a) => {
                Workbook.load(a, new WorkbookLoadOptions(), (w) => {
                    resolve(w);
                }, (e) => {
                    reject(e);
                });
            }, (e) => {
                reject(e);
            });
        });
    }

    public static loadFromUrl(url: string): Promise<Workbook> {
        return new Promise<Workbook>((resolve, reject) => {
            const req = new XMLHttpRequest();
            req.open("GET", url, true);
            req.responseType = "arraybuffer";
            req.onload = (d) => {
                const data = new Uint8Array(req.response);
                Workbook.load(data, new WorkbookLoadOptions(), (w) => {
                    resolve(w);
                }, (e) => {
                    reject(e);
                });
            };
            req.send();
        });
    }

    public static save(workbook: Workbook, fileNameWithoutExtension: string): Promise<string> {
        return new Promise<string>((resolve, reject) => {
            const opt = new WorkbookSaveOptions();
            opt.type = "blob";

            workbook.save(opt, (d) => {
                const fileExt = ExcelUtility.getExtension(workbook.currentFormat);
                const fileName = fileNameWithoutExtension + fileExt;
                saveAs(d as Blob, fileName);
                resolve(fileName);
            }, (e) => {
                reject(e);
            });
        });
    }

    private static readFileAsUint8Array(file: File): Promise<Uint8Array> {
        return new Promise<Uint8Array>((resolve, reject) => {
            const fr = new FileReader();
            fr.onerror = (e) => {
                reject(fr.error);
            };

            if (fr.readAsBinaryString) {
                fr.onload = (e) => {
                    const rs = (fr as any).resultString;
                    const str: string = rs != null ? rs : fr.result;
                    const result = new Uint8Array(str.length);
                    for (let i = 0; i < str.length; i++) {
                        result[i] = str.charCodeAt(i);
                    }
                    resolve(result);
                };
                fr.readAsBinaryString(file);
            } else {
                fr.onload = (e) => {
                    resolve(new Uint8Array(fr.result as ArrayBuffer));
                };
                fr.readAsArrayBuffer(file);
            }
        });
    }
}
ts

import { IgcSpreadsheetModule } from 'igniteui-webcomponents-spreadsheet';
import { IgcSpreadsheetComponent } from 'igniteui-webcomponents-spreadsheet';
import { ModuleManager } from 'igniteui-webcomponents-core';
import { SpreadsheetEnterKeyNavigationDirection } from 'igniteui-webcomponents-spreadsheet';
import { SpreadsheetCellSelectionMode } from 'igniteui-webcomponents-spreadsheet';
import { ExcelUtility } from './ExcelUtility';

ModuleManager.register(IgcSpreadsheetModule);

export class SpreadsheetConfiguring {

    private spreadsheet: IgcSpreadsheetComponent;

    constructor() {

        this.onGridlinesVisibleChanged = this.onGridlinesVisibleChanged.bind(this);
        this.onTabBarAreaVisibleChanged = this.onTabBarAreaVisibleChanged.bind(this);
        this.onIsProtectedChanged = this.onIsProtectedChanged.bind(this);
        this.onSpreadsheetZoomLevelChange = this.onSpreadsheetZoomLevelChange.bind(this);

        this.onHeadersVisibleChanged = this.onHeadersVisibleChanged.bind(this);
        this.onFormulaBarVisibleChanged = this.onFormulaBarVisibleChanged.bind(this);
        this.onEnterKeyNavEnabledChanged = this.onEnterKeyNavEnabledChanged.bind(this);

        this.onEnterKeyNavDirectionChanged = this.onEnterKeyNavDirectionChanged.bind(this);
        this.onSelectionModeChanged = this.onSelectionModeChanged.bind(this);

        this.spreadsheet = document.getElementById('spreadsheet') as IgcSpreadsheetComponent;

        let path = 'https://static.infragistics.com/xplatform/excel/SalesData.xlsx';
        ExcelUtility.loadFromUrl(path).then((w) => {
            this.spreadsheet.workbook = w;
        });

        (document.getElementById('selectionModeDropDown') as any).value = 'Normal';

        document.getElementById('areGridlinesVisibleCheckbox')!.addEventListener('change', this.onGridlinesVisibleChanged);
        document.getElementById('isTabBarAreaVisibleCheckbox')!.addEventListener('change', this.onTabBarAreaVisibleChanged);
        document.getElementById('isProtectedCheckbox')!.addEventListener('change', this.onIsProtectedChanged);
        document.getElementById('spreadsheetZoomLevelRange')!.addEventListener('input', this.onSpreadsheetZoomLevelChange);

        document.getElementById('areHeadersVisibleCheckbox')!.addEventListener('change', this.onHeadersVisibleChanged);
        document.getElementById('isFormulaBarVisibleCheckbox')!.addEventListener('change', this.onFormulaBarVisibleChanged);
        document.getElementById('isEnterKeyNavEnabledCheckbox')!.addEventListener('change', this.onEnterKeyNavEnabledChanged);

        document.getElementById('enterKeyNavDirectionDropDown')!.addEventListener('change', this.onEnterKeyNavDirectionChanged);
        document.getElementById('selectionModeDropDown')!.addEventListener('change', this.onSelectionModeChanged);
    }

    onGridlinesVisibleChanged(e: any) {
        this.spreadsheet.areGridlinesVisible = e.target.checked;
    }

    onTabBarAreaVisibleChanged(e: any) {
        const checked: boolean = e.target.checked;
        if (checked) {
            this.spreadsheet.workbook.windowOptions.tabBarVisible = true;
        }
        else {
            this.spreadsheet.workbook.windowOptions.tabBarVisible = false;
        }
    }

    onIsProtectedChanged(e: any) {
        const checked: boolean = e.target.checked;
        if (checked) {
            this.spreadsheet.activeWorksheet.protect();
        }
        else {
            this.spreadsheet.activeWorksheet.unprotect();
        }
    }

    onSpreadsheetZoomLevelChange(e: any) {
        this.spreadsheet.zoomLevel = e.target.value;
        document.getElementById('zoomLevelLabel')!.textContent = 'Zoom Level: ' + e.target.value.toString() + '%';
    }

    onHeadersVisibleChanged(e: any) {
        this.spreadsheet.areHeadersVisible = e.target.checked;
    }

    onFormulaBarVisibleChanged(e: any) {
        this.spreadsheet.isFormulaBarVisible = e.target.checked;
    }

    onEnterKeyNavEnabledChanged(e: any) {
        this.spreadsheet.isEnterKeyNavigationEnabled = e.target.checked;
    }

    onEnterKeyNavDirectionChanged(e: any) {
        const selection: string = e.target.value;

        switch (selection) {
            case 'Down': {
                this.spreadsheet.enterKeyNavigationDirection = SpreadsheetEnterKeyNavigationDirection.Down;
                break;
            }
            case 'Up': {
                this.spreadsheet.enterKeyNavigationDirection = SpreadsheetEnterKeyNavigationDirection.Up;
                break;
            }
            case 'Left': {
                this.spreadsheet.enterKeyNavigationDirection = SpreadsheetEnterKeyNavigationDirection.Left;
                break;
            }
            case 'Right': {
                this.spreadsheet.enterKeyNavigationDirection = SpreadsheetEnterKeyNavigationDirection.Right;
                break;
            }
        }
    }

    onSelectionModeChanged(e: any) {
        const selection: string = e.target.value;

        switch (selection) {
            case 'AddToSelection': {
                this.spreadsheet.selectionMode = SpreadsheetCellSelectionMode.AddToSelection;
                break;
            }
            case 'ExtendSelection': {
                this.spreadsheet.selectionMode = SpreadsheetCellSelectionMode.ExtendSelection;
                break;
            }
            case 'Normal': {
                this.spreadsheet.selectionMode = SpreadsheetCellSelectionMode.Normal;
                break;
            }
        }
    }
}

new SpreadsheetConfiguring();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>SpreadsheetConfiguring</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample">
    <div class="options horizontal">
        <span class="options-label">Selection Mode: </span>
        <select id="selectionModeDropDown">
            <option>AddToSelection</option>
            <option>ExtendSelection</option>
            <option>Normal</option>
        </select>

        <span class="options-label">Enter Key Navigation Direction: </span>
        <select id="enterKeyNavDirectionDropDown">
            <option>Down</option>
            <option>Left</option>
            <option>Right</option>
            <option>Up</option>
        </select>
    </div>
    <div class="options horizontal">
        <label class="options-label" style="width: 145px"><input id="areHeadersVisibleCheckbox" type="checkbox" checked="true" /> Enable Headers</label>
        <label class="options-label" style="width: 175px"><input id="isFormulaBarVisibleCheckbox" type="checkbox" checked="true"  /> Enable Formula Bar</label>
        <label class="options-label" style="width: 225px"><input id="isEnterKeyNavEnabledCheckbox" type="checkbox" checked="true"  />Enable Enter Key Navigation</label>
        <label id="zoomLevelLabel" class="options-label">Zoom Level: 100% </label>
    </div>
    <div class="options horizontal">
        <label class="options-label" style="width: 145px"><input type="checkbox" id="areGridlinesVisibleCheckbox" checked="true" /> Enable Gridlines</label>
        <label class="options-label" style="width: 175px"><input type="checkbox" id="isTabBarAreaVisibleCheckbox" checked="true" /> Enable Tab Bar Area</label>
        <label class="options-label" style="width: 225px"><input type="checkbox" id="isProtectedCheckbox" /> Enable Protected Mode</label>
        <input id="spreadsheetZoomLevelRange" type="range" min="50" max="150" step="5" />
    </div>
    <igc-spreadsheet id="spreadsheet" width="100%" height="calc(100% - 7.5rem)">

    </igc-spreadsheet>

</div>

    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

このサンプルが気に入りましたか? 完全な Ignite UI for Web Componentsツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

セル編集の構成

ユーザーがセルの値を編集して新しい入力を確認すると、スプレッドシートの構成に応じて、IgcSpreadsheetComponent コントロールに Enter キーを押すと現在アクティブなセルに隣接するセルに移動できます。

この Enter キーナビゲーションを有効にするために、isEnterKeyNavigationEnabled プロパティを true に設定できます。false に設定すると、Enter キーを押してもアクティブセルは変わりません。

Enter キーを押したときに移動する隣接セルの方向は、enterKeyNavigationDirection プロパティを Down、Up、Left、Right に設定して構成することもできます。

以下のコードスニペットは上記のデモです。

<igc-spreadsheet is-enter-key-navigation-enabled="true"
    enter-key-navigation-direction="Left">
</igc-spreadsheet>
html

import { SpreadsheetEnterKeyNavigationDirection } from 'igniteui-webcomponents-spreadsheet';
ts

this.spreadsheet.isEnterKeyNavigationEnabled = true;
this.spreadsheet.enterKeyNavigationDirection = SpreadsheetEnterKeyNavigationDirection.Left;
ts

数式バーの構成

Web Components IgcSpreadsheetComponent は、コントロールの isFormulaBarVisible プロパティを設定して数式バーの表示/非表示を設定できます。

以下のコードスニペットは上記のデモです。

<igc-spreadsheet is-formula-bar-visible="true"></igc-spreadsheet>
html

this.spreadsheet.isFormulaBarVisible = true;
ts

ガイドラインの設定

IgcSpreadsheetComponent は、コントロールの areGridlinesVisible プロパティを設定して数式バーの表示/非表示を設定できます。

以下のコードスニペットは上記のデモです。

<igc-spreadsheet are-gridlines-visible="true"></igc-spreadsheet>
html

this.spreadsheet.areGridlinesVisible = true;
ts

ヘッダーの構成

IgcSpreadsheetComponent は、areHeadersVisible プロパティを設定してへッダーの可視性を設定できます。

以下のコードスニペットは上記のデモです。

<igc-spreadsheet are-headers-visible="false"></igc-spreadsheet>
html

this.spreadsheet.areHeadersVisible = false;
ts

ナビゲーションの構成

IgcSpreadsheetComponent コントロールは、コントロールが「終了モード」にあるかどうかを構成することによって、ワークシートのセル間のナビゲーションを構成できます。終了モードは、矢印キーを押すと、アクティブなセルが、押された矢印キーの方向に応じて、現在のセルからデータが隣接するセルの行または列の末尾に移動する機能です。この機能は、大規模なデータブロックの最後まですばやく移動する際に役立ちます。

たとえば、終了モードになっているときに、100x100 の大きなデータブロックをクリックして右矢印キーを押すと、現在の行の右端に移動し、データのある一番右の列に移動します。この操作の後、IgcSpreadsheetComponent は終了モードから飛び出します。

ユーザーが End キーを押すと、実行時に終了モードが有効になりますが、スプレッドシートコントロールの isInEndMode プロパティを設定することでプログラムで設定できます。

以下のコードスニペットは、IgcSpreadsheetComponent を終了モードで開始させる方法を示しています。

<igc-spreadsheet is-in-end-mode="true"></igc-spreadsheet>
html

this.spreadsheet.isInEndMode = true;
ts

保護の設定

IgcSpreadsheetComponent は、ワークシートごとにブックを保護します。ワークシートの保護の設定は、ワークシートの Protect() メソッドを呼び出して保護し、Unprotect() メソッドを呼び出して保護解除することで設定できます。

以下のコードは、IgcSpreadsheetComponent コントロールの現在アクティブなワークシートの保護を有効または無効にすることができます。

this.spreadsheet.activeWorksheet.protect();
this.spreadsheet.activeWorksheet.unprotect();
ts

選択の設定

IgcSpreadsheetComponent コントロールは、コントロールで許可されている選択の種類を設定できます。その後、ユーザーが修飾キー (Shift または Ctrl) を押します。これは、スプレッドシートの selectionMode プロパティを次のいずれかの値に設定することによって行われます。

AddToSelection: マウスでドラッグするときに Ctrl キーを押す必要はありません。新しいセル範囲が SpreadsheetSelection オブジェクトの cellRanges コレクションに追加され、モードに入った後に最初の矢印キーナビゲーションで範囲が追加されます。シフト+F8 を押すとモードに入ります。
ExtendSelection: SpreadsheetSelection オブジェクトの cellRanges コレクション内の選択範囲は、マウスを使用してセルを選択するかキーボードで移動すると更新されます。
Normal: セルまたはセルの範囲を選択するためにマウスをドラッグすると選択が置き換えられます。同様に、キーボードで移動すると新しい選択範囲が作成されます。Ctrl キーを押したままマウスを使用することで新しい範囲を追加できます。また、Shift キーを押したままマウスでクリックする、あるいはキーボードで移動することでアクティブセルを含む選択範囲を変更できます。

上記の説明で述べた SpreadsheetSelection オブジェクトは、IgcSpreadsheetComponent コントロールの activeSelection プロパティを使用して取得できます。

次のコードスニペットは、選択モードの設定を示しています。

<igc-spreadsheet selection-mode="ExtendSelection"></igc-spreadsheet>
html

import { SpreadsheetCellSelectionMode } from 'igniteui-webcomponents-spreadsheet';
ts

this.spreadsheet.selectionMode = SpreadsheetCellSelectionMode.ExtendSelection;
ts

IgcSpreadsheetComponent コントロールの選択は、プログラムで設定または取得することもできます。単一選択の場合は、activeCell プロパティを設定できます。複数選択は、IgcSpreadsheetComponent コントロールの activeSelection プロパティによって返される SpreadsheetSelection オブジェクトを介して行われます。

SpreadsheetSelection オブジェクトには、新しい SpreadsheetCellRange オブジェクトの形式でスプレッドシートの選択範囲にプログラムでセルの範囲を追加できる AddCellRange() メソッドがあります。

次のコードスニペットは、スプレッドシートの選択範囲にセル範囲を追加する方法を示しています。

this.spreadsheet.activeSelection.addCellRange(new SpreadsheetCellRange(2, 2, 5, 5));
ts

タブバー領域の構成

IgcSpreadsheetComponent コントロールは、TabBarWidth プロパティと TabBarVisibility プロパティを介して、現在アクティブな workbook の WindowOptions からタブバー領域の表示設定と幅の設定を使用します。

タブバー領域は、ワークシート名をコントロール内のタブとして可視化する領域です。

次のコードスニペットを使用して、タブバーの表示と幅を設定できます。

this.spreadsheet.workbook.windowOptions.tabBarVisible = false;

this.spreadsheet.workbook.windowOptions.tabBarWidth = 200;
ts

ズームレベルの設定

Web Components Spreadsheet コンポーネントは、zoomLevel プロパティを設定してズームインとズームアウト機能を追加できます。ズームレベルは最大 400%、最小 10% です。

このプロパティを数値に設定すると、整数としてのパーセンテージが表されるため、zoomLevel を 100 に設定することは、100% に設定することと同じです。

次のコードスニペットは、スプレッドシートのズームレベルを設定する方法を示しています。

<igc-spreadsheet zoom-level="200"></igc-spreadsheet>
html

this.spreadsheet.zoomLevel = 200;
ts

Web Components Spreadsheet の構成

Web Components Spreadsheet の構成の例

セル編集の構成

数式バーの構成

ガイドラインの設定

ヘッダーの構成

ナビゲーションの構成

保護の設定

選択の設定

タブバー領域の構成

ズーム レベルの設定

API リファレンス

ズームレベルの設定