Angular Spreadsheet の構成
Angular Spreadsheet コンポネントは、セルの編集、グリッド線とヘッダーの表示、保護、ズーム レベル、および Excel ワークシートに関連するその他のさまざまなプロパティなど、コントロールのさまざまな側面を設定できます。
Angular Spreadsheet の構成の例
EXAMPLE
DATA
MODULES
TS
HTML
SCSS
import { saveAs } from "file-saver";
import { Workbook } from "igniteui-angular-excel";
import { WorkbookFormat } from "igniteui-angular-excel";
import { WorkbookSaveOptions } from "igniteui-angular-excel";
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, null, (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, null, (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 { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { ExcelUtility } from "./ExcelUtility";
import { IgxExcelModule } from "igniteui-angular-excel";
import { IgxSpreadsheetModule } from "igniteui-angular-spreadsheet";
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent,
],
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
FormsModule,
IgxExcelModule,
IgxSpreadsheetModule
],
providers: [ExcelUtility],
schemas: []
})
export class AppModule {}
ts
import { Component, OnInit, ViewChild } from "@angular/core";
import { IgxSpreadsheetComponent } from "igniteui-angular-spreadsheet";
import { ExcelUtility } from "./ExcelUtility";
@Component({
standalone: false,
selector: "app-root",
styleUrls: ["./app.component.scss"],
templateUrl: "./app.component.html"
})
export class AppComponent implements OnInit {
@ViewChild("spreadsheet", { static: true })
public spreadsheet: IgxSpreadsheetComponent;
public spreadsheetSelectionMode: string;
public enterKeyNavDirection: string;
public isProtected: boolean;
public isFormulaBarVisible: boolean;
public areGridlinesVisible: boolean;
public areHeadersVisible: boolean;
public isEnterKeyNavEnabled: boolean;
public spreadsheetZoomLevel: number;
constructor() {
this.spreadsheetSelectionMode = "Normal";
this.isProtected = false;
this.isFormulaBarVisible = true;
this.areGridlinesVisible = true;
this.areHeadersVisible = true;
this.isEnterKeyNavEnabled = false;
this.enterKeyNavDirection = "Down";
this.spreadsheetZoomLevel = 100;
}
public onProtectedChanged(e: any) {
if (e.target.checked) {
this.spreadsheet.activeWorksheet.protect();
} else {
this.spreadsheet.activeWorksheet.unprotect();
}
}
public onTabBarAreaVisibilityChanged(e: any) {
if (e.target.checked) {
this.spreadsheet.workbook.windowOptions.tabBarVisible = true;
} else {
this.spreadsheet.workbook.windowOptions.tabBarVisible = false;
}
}
public spreadsheetSelectionChanged(args: any) {
const value = args.target.value;
switch (value) {
case "Normal": {
this.spreadsheet.selectionMode = 0;
break;
}
case "ExtendSelection": {
this.spreadsheet.selectionMode = 1;
break;
}
case "AddToSelection": {
this.spreadsheet.selectionMode = 2;
break;
}
}
}
public enterKeyNavDirectionChanged(args: any) {
const value = args.target.value;
switch (value) {
case "Down": {
this.spreadsheet.enterKeyNavigationDirection = 0;
break;
}
case "Up": {
this.spreadsheet.enterKeyNavigationDirection = 2;
break;
}
case "Left": {
this.spreadsheet.enterKeyNavigationDirection = 3;
break;
}
case "Right": {
this.spreadsheet.enterKeyNavigationDirection = 1;
break;
}
}
}
public ngOnInit() {
const excelFile = "https://static.infragistics.com/xplatform/excel/SalesData.xlsx";
ExcelUtility.loadFromUrl(excelFile).then((w) => {
this.spreadsheet.workbook = w;
});
}
}
ts
<div class="container vertical">
<div class="options horizontal">
<span class="options-item">Selection Mode: </span>
<select [(ngModel)]="spreadsheetSelectionMode" (change)="spreadsheetSelectionChanged($event)">
<option>AddToSelection</option>
<option>ExtendSelection</option>
<option>Normal</option>
</select>
<span class="options-item">Enter Key Navigation Direction: </span>
<select [(ngModel)]="enterKeyNavDirection" (change)="enterKeyNavDirectionChanged($event)">
<option>Down</option>
<option>Left</option>
<option>Right</option>
<option>Up</option>
</select>
<input type="range" min=50 max=300 [(ngModel)]="spreadsheetZoomLevel" step=10>
<label class="options-item">Zoom Level: {{spreadsheetZoomLevel}}%</label>
</div>
<div class="options horizontal">
<label class="options-item"><input type="checkbox" (change)="onProtectedChanged($event)" /> Is Protected</label>
<label class="options-item"><input type="checkbox" [(ngModel)]="isFormulaBarVisible" /> Is Formula Bar
Visible</label>
<label class="options-item"><input type="checkbox" [(ngModel)]="isEnterKeyNavEnabled" /> Enter Key Navigation
Enabled</label>
</div>
<div class="options horizontal">
<label class="options-item"><input type="checkbox" checked=true
(change)="onTabBarAreaVisibilityChanged($event)" /> Is Tab Bar
Area Visible</label>
<label class="options-item"><input type="checkbox" width="200px" [(ngModel)]="areGridlinesVisible" /> Are
Gridlines
Visible</label>
<label class="options-item"><input type="checkbox" [(ngModel)]="areHeadersVisible" /> Are Headers Visible</label>
</div>
<igx-spreadsheet #spreadsheet height="100%" width="100%"
[isFormulaBarVisible]="isFormulaBarVisible" [areGridlinesVisible]="areGridlinesVisible"
[areHeadersVisible]="areHeadersVisible" [isEnterKeyNavigationEnabled]="isEnterKeyNavEnabled"
[zoomLevel]="spreadsheetZoomLevel">
</igx-spreadsheet>
</div>
html
このサンプルが気に入りましたか? 完全な Ignite UI for Angularツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
セル編集の構成
ユーザーがセルの値を編集して新しい入力を確認すると、スプレッドシートの構成に応じて、IgxSpreadsheetComponent
コントロールに Enter キーを押すと現在アクティブなセルに隣接するセルに移動できます。
この Enter キーナビゲーションを有効にするために、isEnterKeyNavigationEnabled
プロパティを true に設定できます。false に設定すると、Enter キーを押してもアクティブ セルは変わりません。
Enter キーを押したときに移動する隣接セルの方向は、enterKeyNavigationDirection
プロパティを Down
、Up
、Left
、Right
に設定して構成することもできます。
以下のコード スニペットは上記のデモです。
<igx-spreadsheet isEnterKeyNavigationEnabled=true
enterKeyNavigationDirection="Left">
</igx-spreadsheet>
html
this.spreadsheet.isEnterKeyNavigationEnabled = true;
this.spreadsheet.enterKeyNavigationDirection = SpreadsheetEnterKeyNavigationDirection.Left;
ts
数式バーの構成
Angular IgxSpreadsheetComponent
は、コントロールの isFormulaBarVisible
プロパティを設定して数式バーの表示/非表示を設定できます。
以下のコード スニペットは上記のデモです。
<igx-spreadsheet isFormulaBarVisible=true></igx-spreadsheet>
html
this.spreadsheet.isFormulaBarVisible = true;
ts
ガイドラインの設定
IgxSpreadsheetComponent
は、コントロールの areGridlinesVisible
プロパティを設定して数式バーの表示/非表示を設定できます。
以下のコード スニペットは上記のデモです。
<igx-spreadsheet areGridlinesVisible=true></igx-spreadsheet>
html
this.spreadsheet.areGridlinesVisible = true;
ts
ヘッダーの構成
IgxSpreadsheetComponent
は、areHeadersVisible
プロパティを設定してへッダーの可視性を設定できます。
以下のコード スニペットは上記のデモです。
<igx-spreadsheet areHeadersVisible=false></igx-spreadsheet>
html
this.spreadsheet.areHeadersVisible = false;
ts
ナビゲーションの構成
IgxSpreadsheetComponent
コントロールは、コントロールが「終了モード」にあるかどうかを構成することによって、ワークシートのセル間のナビゲーションを構成できます。終了モードは、矢印キーを押すと、アクティブなセルが、押された矢印キーの方向に応じて、現在のセルからデータが隣接するセルの行または列の末尾に移動する機能です。この機能は、大規模なデータ ブロックの最後まですばやく移動する際に役立ちます。
たとえば、終了モードになっているときに、100x100 の大きなデータブロックをクリックして右
矢印キーを押すと、現在の行の右端に移動し、データのある一番右の列に移動します。この操作の後、IgxSpreadsheetComponent
は終了モードから飛び出します。
ユーザーが End キーを押すと、実行時に終了モードが有効になりますが、スプレッドシート コントロールの isInEndMode
プロパティを設定することでプログラムで設定できます。
以下のコード スニペットは、IgxSpreadsheetComponent
を終了モードで開始させる方法を示しています。
<igx-spreadsheet isInEndMode=true></igx-spreadsheet>
html
this.spreadsheet.isInEndMode = true;
ts
保護の設定
IgxSpreadsheetComponent
は、ワークシートごとにブックを保護します。ワークシートの保護の設定は、ワークシートの Protect()
メソッドを呼び出して保護し、Unprotect()
メソッドを呼び出して保護解除することで設定できます。
以下のコードは、IgxSpreadsheetComponent
コントロールの現在アクティブなワークシートの保護を有効または無効にすることができます。
this.spreadsheet.activeWorksheet.protect();
this.spreadsheet.activeWorksheet.unprotect();
ts
選択の設定
IgxSpreadsheetComponent
コントロールは、コントロールで許可されている選択の種類を設定できます。その後、ユーザーが修飾キー (Shift または Ctrl) を押します。これは、スプレッドシートの selectionMode
プロパティを次のいずれかの値に設定することによって行われます。
AddToSelection
: マウスでドラッグするときに Ctrl キーを押す必要はありません。新しいセル範囲が SpreadsheetSelection
オブジェクトの cellRanges
コレクションに追加され、モードに入った後に最初の矢印キーナビゲーションで範囲が追加されます。シフト+F8 を押すとモードに入ります。
ExtendSelection
: SpreadsheetSelection
オブジェクトの cellRanges
コレクション内の選択範囲は、マウスを使用してセルを選択するかキーボードで移動すると更新されます。
Normal
: セルまたはセルの範囲を選択するためにマウスをドラッグすると選択が置き換えられます。同様に、キーボードで移動すると新しい選択範囲が作成されます。Ctrl キーを押したままマウスを使用することで新しい範囲を追加できます。また、Shift キーを押したままマウスでクリックする、あるいはキーボードで移動することでアクティブ セルを含む選択範囲を変更できます。
上記の説明で述べた SpreadsheetSelection
オブジェクトは、IgxSpreadsheetComponent
コントロールの activeSelection
プロパティを使用して取得できます。
次のコード スニペットは、選択モードの設定を示しています。
<igx-spreadsheet selectionMode="ExtendSelection"></igx-spreadsheet>
html
this.spreadsheet.selectionMode = SpreadsheetCellSelectionMode.ExtendSelection;
ts
IgxSpreadsheetComponent
コントロールの選択は、プログラムで設定または取得することもできます。単一選択の場合は、activeCell
プロパティを設定できます。複数選択は、IgxSpreadsheetComponent
コントロールの activeSelection
プロパティによって返される SpreadsheetSelection
オブジェクトを介して行われます。
SpreadsheetSelection
オブジェクトには、新しい SpreadsheetCellRange
オブジェクトの形式でスプレッドシートの選択範囲にプログラムでセルの範囲を追加できる AddCellRange()
メソッドがあります。
次のコード スニペットは、スプレッドシートの選択範囲にセル範囲を追加する方法を示しています。
this.spreadsheet.activeSelection.addCellRange(new SpreadsheetCellRange(2, 2, 5, 5));
ts
タブバー領域の構成
IgxSpreadsheetComponent
コントロールは、TabBarWidth
プロパティと TabBarVisibility
プロパティを介して、現在アクティブな workbook
の WindowOptions
からタブバー領域の表示設定と幅の設定を使用します。
タブバー領域は、ワークシート名をコントロール内のタブとして可視化する領域です。
次のコード スニペットを使用して、タブバーの表示と幅を設定できます。
this.spreadsheet.workbook.windowOptions.tabBarVisible = false;
this.spreadsheet.workbook.windowOptions.tabBarWidth = 200;
ts
ズーム レベルの設定
Angular Spreadsheet コンポーネントは、zoomLevel
プロパティを設定してズームインとズームアウト機能を追加できます。ズーム レベルは最大 400%、最小 10% です。
このプロパティを数値に設定すると、整数としてのパーセンテージが表されるため、zoomLevel
を 100 に設定することは、100% に設定することと同じです。
次のコード スニペットは、スプレッドシートのズームレベルを設定する方法を示しています。
<igx-spreadsheet zoomLevel=200></igx-spreadsheet>
html
this.spreadsheet.zoomLevel = 200;
ts
API リファレンス