概要と基本的な使い方

テーブルシートでは、enableDefineColumnプロパティを設定することで、列ヘッダーに「+」（列の追加）ボタン、列ヘッダーのコンテキストメニューに「列を修正」、「列を削除」および「主キーの設定/解除」を表示に切り替えることができます：

interface GC.Spread.Sheets.TableSheet.ITableSheetOptions {
  // その他のプロパティ...
  enableDefineColumn?: boolean;
}

列のタイプ

interface GC.Data.IColumn {
    type: string, // 組込みの列タイプ: 数値、テキスト、数式、チェックボックス、日付、通貨、パーセント、電話番号、メールアドレス、URL、ルックアップ、作成日時、更新日時、添付ファイル、選択、バーコード
}

列のタイプの説明は以下の通りです:

構成

リモートテーブルと通信するためには、APIを設定する必要があります。

var apiForDataUrl = './orders', apiForColumnUrl = './tables/order/columns';
var orderTable = dataManager.addTable("orderTable", {
        remote: {
            read: {
                url: apiForDataUrl,
            },
            update: {
                url: apiForDataUrl,
                method: 'PUT'
            },
            create: {
                url: apiForDataUrl,
            },
            delete: {
                url: apiForDataUrl,
            },
            getColumns: {
                url: apiForColumnUrl
            },
            addColumn: {
                url: apiForColumnUrl,
                method: 'POST'
            },
            updateColumn: {
                url: apiForColumnUrl,
                method: 'PUT'
            },
            removeColumn: {
                url: apiForColumnUrl,
                method: 'DELETE'
            },
            // batch: {
            //     url: './batch',
            // }
        },
        autoSync: true,
        // batch: true
    });

列のリモートAPIは、 要求の処理の自己定義関数のように構成されます。

要求と応答

type Column = {
    field: string, // フィールド
    dataType: 'number' | 'string' | 'boolean', // リモートデータソースで別のデータ型に変換される可能性がある
    defaultValue?: 'number' | 'string' | 'boolean' | 'undefined', // デフォルト値
    isPrimaryKey?: boolean, // 主キーかどうかを設定
}
type ColumnData = {
    column: Column,
}
type ColumnWithDefaultData = {
    column: Column,
    data?: any[], // 場合によっては、クライアントからのデータをリモートデータソースに同期する必要がある
}
type ModifiedColumnData = {
    column: Column,
    originalColumn: Column,
}
type BatchItemData = {
    type: "updateColumn" | "addColumn" | "removeColumn", // 列の変更項目に関するオプションのみを表示し、全体の変更は列とデータが含まれる（存在する場合）
    column: Column,
    data?: any[],
    originalColumn?: Column,
}
type BatchResultData = {
    succeed: boolean,
    reason?: string,
}

コマンド

UI操作以外、コマンドを実行して列を定義することができます。

DefineColumn

DefineColumnコマンドで列を追加できます：

/**
 * GC.Spread.Sheets.Commands.DefineColumn: { canUndo: boolean, execute(context: GC.Spread.Sheets.Workbook, options: {sheetName: string, col?: number, column: GC.Data.IColumn}): any}
 * 列を定義するために使用されるコマンド。
 * @property {boolean} canUndo - コマンドが元に戻す (Undo) とやり直す (Redo) 操作をサポートしているかどうかを示します。
 * @property {function} execute - 実行または元に戻す操作を行います。
 * executeメソッドの引数は以下の通りです。
 * @param {GC.Spread.Sheets.Workbook} context 操作のワークブック。
 * @param {Object} options 操作のオプション。
 * @param {string} options.sheetName シート名。
 * @param {number} [options.col] 挿入列の列番号 (オプション)。
 * @param {GC.Data.IColumn} options.column 定義された列。
 * @param {boolean} isUndo 元に戻す操作が実行された場合は `true`、そうでない場合は `false`。
 */

spread.commandManager().execute({
  cmd: "DefineColumn",
  sheetName: spread.getActiveSheetTab().name(),
  // col: 3, // 列番号（オプション）
  column: {
    type: 'Number', // 列のタイプを指定
    value: 'Number1', // 値
    caption: '# Number1', // 列のキャプション
    style: { 
      formatter: '#,##0.00_);[Red](#,##0.00)' // 列の書式設定、UI操作から変更可能
    }
  } as GC.Data.IColumn,
});

ModifyColumn

ModifyColumnコマンドで列を変更できます：

/**
 * field GC.Spread.Sheets.Commands.ModifyColumn: { canUndo: boolean, execute(context: GC.Spread.Sheets.Workbook, options: {sheetName: string, col: number, column: GC.Data.IColumn}): any}
 * 列を変更するために使用されるコマンド。
 * @property {boolean} canUndo - コマンドが元に戻す (Undo) とやり直す (Redo) 操作をサポートしているかどうかを示します。
 * @property {function} execute - 実行または元に戻す操作を行います。
 * execute メソッドの引数は以下の通りです。
 * @param {GC.Spread.Sheets.Workbook} context 操作のワークブック。
 * @param {Object} options 操作のオプション。
 * @param {string} options.sheetName シート名。
 * @param {number} options.col 指定された列番号。
 * @param {GC.Data.IColumn} options.column 変更された列。
 * @param {boolean} isUndo 元に戻す操作が実行された場合は `true`、そうでない場合は `false`。
 */
spread.commandManager().execute({
  cmd: "ModifyColumn",
  sheetName: spread.getActiveSheetTab().name(),
  col: 3,
  column: {
    type: 'Text', // 列のタイプを指定
    value: 'Text1', // 値
    caption: 'A Text1', // 列のキャプション
  } as GC.Data.IColumn,
});

RemoveColumn

RemoveColumnコマンドで列を削除できます：

/**
 * field GC.Spread.Sheets.Commands.RemoveColumn: { canUndo: boolean, execute(context: GC.Spread.Sheets.Workbook, options: {sheetName: string, col: number}): any}
 * 列を削除するために使用されるコマンド。
 * @property {boolean} canUndo - コマンドが元に戻す (Undo) とやり直す (Redo) 操作をサポートしているかどうかを示します。
 * @property {function} execute - 実行または元に戻す操作を行います。
 * execute メソッドの引数は以下の通りです。
 * @param {GC.Spread.Sheets.Workbook} context 操作のワークブック。
 * @param {Object} options 操作のオプション。
 * @param {string} options.sheetName シート名。
 * @param {number} options.col 指定された列番号。
 * @param {GC.Data.IColumn} options.column 変更された列。
 * @param {boolean} isUndo 元に戻す操作が実行された場合は `true`、そうでない場合は `false`。
 */
spread.commandManager().execute({
  cmd: "RemoveColumn",
  sheetName: spread.getActiveSheetTab().name(),
  col: 3,
});