列の定義

SpreadJSのテーブルシートでは、実行時にユーザーが組み込みの書式やセル型が定義された列を追加、更新、あるいは削除をすることができます。

最後の列の後ろに [+（列の追加）]ボタンを表示するには、テーブルシートのenableDefineColumnオプションを true に設定します。[+]ボタンを左クリックすると、組み込みの書式やセル型が定義された列を追加できます。列ヘッダーを右クリックすると、列を変更、削除、あるいは主キーを設定するためのオプションを含むコンテキストメニューが表示されます。

ts-definecolumn

次のサンプルコードは、テーブルシートの [+] ボタンを有効にする方法を示しています。

tableSheet.options.enableDefineColumn = true;

組み込みの列タイプ

テーブルシートでは、列のタイプに応じて分類された定義済みの列プロパティを使用して、列タイプを定義できます。

次は組み込みの列タイプの一覧です：数値、テキスト、数式、チェックボックス、日付、通貨、パーセント、電話番号、電子メール、URL、ルックアップ、作成日時、更新日時、添付ファイル、選択肢、バーコード。

次は列タイプに定義される主なプロパティです。

値 (必須): 列の値が含まれます。タイプが [数式] または [ルックアップ] でない場合、このプロパティには数式またはリレーションを保持できません。
キャプション (オプション): 列ヘッダーの表示名が含まれます。
タイプ(必須):組み込みの列タイプを選択できます。次は組み込みの列タイプの一部を示します。

次はサポートされているすべての列タイプのデータ型と列オプションのサンプルを示します。

列タイプ	データ型	サンプル列オプション
数値	number	{ value: "Number", type: "Number", caption: "Number", dataType: "number", defaultValue: 0, style: {formatter: "0.00", mask: { pattern: "0{0,}" } } }
テキスト	string	{ value: "Text", type: "Text", caption: "Text", dataType: "string" }
数式	計算結果に依存	{ name: "NamedFormula", // it's a name of the formula for the Referencing Calculated Fields which will be a named formula value: "=[@Amount]*[@UnitPrice]", type: "Formula", caption: "Total Sales", dataType: "formula", style: {formatter: "0.00"} readonly: true, }
ルックアップ	関連データに依存	{ value: "customer.ContactName", type: "Lookup", caption: "Customer", readonly: true, }
日付	date	type DateTimePickerOptions = { showTime: boolean; calendarPage: "year" \| "month" \| "day"; startDay: "monday" \| "tuesday" \| "wednesday" \| "thursday" \| "friday" \| "saturday" \| "sunday"; }; { value: "Date", type: "Date", caption: "Date", dataType: "date", style: { formatter: "m/d/yyyy", cellButtons:[{ buttonBackColor: "transparent", command: "openDateTimePicker", enabled: true, visibility: 'always', imageType: "dropdown", useButtonStyle: false, }], dropDowns:[{ type: "dateTimePicker", // The cell type is DateTimePickerOptions option: { calendarPage: "day", showTime: false, startDay: "sunday", } }] } }
チェックボックス	boolean	type CheckboxOptions = { type: "checkbox"; caption: string; textTrue: string; textIndeterminate: string; textFalse: string; textAlign: "top" \| "bottom" \| "left" \| "right"; isThreeState: boolean; boxSize: number; }; { value: "Checkbox", type: "Checkbox", caption: "Checkbox", dataType: "boolean", style: { // The cell type is CheckboxOptions cellType: { type: "checkbox" } } }
選択肢	選択肢に依存	type ItemOptions = { text: string; value: any; }; type ComboBoxOptions = { type: "combobox"; editorValueType: "text" \| "index" \| "value"; items: string[] \| ItemOptions[]; itemHeight: number; maxDropDownItems: number; editable: boolean; }; { value: "Select", type: "Select", caption: "Select", dataType: "number", style: { // The cell type is ComboBoxOptions cellType: { type: "combobox", } } }
通貨	number	{ value: "Currency", type: "Currency", caption: "Currency", dataType: "number", style: {formatter: "[$$-409]#,##0.00"} }
パーセント	number	{ value: "Percent", type: "Percent", caption: "Percent", dataType: "number", style: {formatter: "0%"} }
電話番号	string	{ value: "Phone", type: "Phone", caption: "Phone", dataType: "string", style: { mask: { pattern: "1 $0{3}$ 0{3}-0{4}" } } }
電子メール	string	{ value: "Email", type: "Email", caption: "Email", dataType: "string", style: { mask: { pattern: "[a0.\-]{1,}@[a0.\\-]{1,}.(com\|cn\|gov\|edu)" } } }
URL	string	type HyperlinkOptions = { type: "hyperlink"; linkColor: ColorString; visitedLinkColor: ColorString; text: string; linkToolTip: string; target: "blank" \| "self" \| "parent" \| "top"; activeOnClick: boolean; }; { value: "URL", type: "URL", caption: "URL", dataType: "string", style: { // The cell type is HyperlinkOptions cellType: { type: "hyperlink" } } }
作成日時	date	{ value: "CreatedTime", type: "CreatedTime", caption: "CreatedTime", dataType: "date", defaultValue: "=NOW()", readonly: true, trigger: { when: "onNew", formula: "=NOW()", }, style: { formatter: "m/d/yyyy", // not necessary options(cell buttons and dropDowns) cellButtons:[{ buttonBackColor: "transparent", command: "openDateTimePicker", enabled: true, visibility: 'always', imageType: "dropdown", useButtonStyle: false, }], dropDowns:[{ type: "dateTimePicker", option: { calendarPage: "day", showTime: false, startDay: "sunday", } }] } }
更新日時	date	{ value: "ModifiedTime", type: "ModifiedTime", caption: "ModifiedTime", dataType: "date", readonly: true, trigger: { when: "onNewAndUpdate", formula: "=NOW()", fields: "*", }, style: { formatter: "m/d/yyyy", // not necessary options(cell buttons and dropDowns) cellButtons:[{ buttonBackColor: "transparent", command: "openDateTimePicker", enabled: true, visibility: 'always', imageType: "dropdown", useButtonStyle: false, }], dropDowns:[{ type: "dateTimePicker", option: { calendarPage: "day", showTime: false, startDay: "sunday", } }] } }
添付ファイル	object	type FileUploadOptions = { type: "fileUpload"; maxSize?: number; accept?: string; isPreviewEnabled?: boolean; isDownloadEnabled?: boolean; isClearEnabled?: boolean; marginTop?: number; marginRight?: number; marginBottom?: number; marginLeft?: number; valuePath?: string; }; { value: "Attachment", type: "Attachment", caption: "Attachment", style: { // The cell type is FileUploadOptions cellType: { type: "fileUpload" } } }
バーコード	入力データに依存	{ value: "Barcode", type: "Barcode", caption: "Barcode", defaultValue: 0, style: { formatter: "=BC_QRCODE([@Barcode],\"#000000\",\"#FFFFFF\",\"L\",2,\"auto\",\"auto\",false,0,,\"UTF-8\",,,,)" } }

リモート設定

SpreadJSでは、以下のカスタム関数を使用してリモートテーブルと通信できます。

カスタム関数	説明	サンプル定義
getColumns	テーブルから列を取得します。	getColumns: { url: apiColumnUrl }
addColumn	テーブルに列を追加します。	addColumn: { url: apiColumnUrl, method: 'POST' }
updateColumn	テーブルの列のプロパティを更新します。	updateColumn: { url: apiColumnUrl, method: 'PUT' }
removeColumn	テーブルの列を削除します。	removeColumn: { url: apiColumnUrl, method: 'DELETE' }
batch	バッチモードで変更箇所を一括送信します。	batch: { url: apiUrl + 'Collection' }

次はカスタム関数とデータ構造との対話中に適切なリクエストとレスポンスを示します。

カスタム関数	リクエストデータ	レスポンスデータ
getColumns	None	Column[]
addColumn	ColumnWithDefaultData	ColumnData
updateColumn	ModifiedColumnData	ModifiedColumnData
removeColumn	ColumnData	ColumnData
batch	BatchItemData[]	BatchResultData[]

列リモート API は、autoSyncモードおよびbatchモードの要求処理に類似した自己定義関数によって処理できます。

var orderTable = dataManager.addTable("orderTable", {
        remote: {
            read: function(): Promise<any[]>{
                return Promise.resolve([...])
            },
            getColumns: function(): Promise<Column[]>{
                return Promise.resolve([...])
            },
            addColumn: function(change): Promise<any>{
                return Promise.resolve()
            },
            updateColumn: function(change): Promise<any>{
                return Promise.resolve();
            },
            removeColumn: function(change): Promise<any>{
                return Promise.resolve();
            },
            // batch: function(changes): Promise<any>{
            //   return Promise.resolve([...]);
            // },
        },
        autoSync: true,
        // batch: true
 });

autoSyncモードが有効になっている場合、テーブルシートの列に対する変更はすぐにリモートテーブルに同期されます。

batch モードが有効になっている場合、列の変更はローカルに保存されます。その後、submitChangeコマンドを呼び出すと、変更された列情報と変更されたデータ情報が一緒にリモートテーブルに送信します。

[
    { "type": "updateColumn", "column": { field: 'columnName', dataType: 'number', ...otherproperties }, "originalColumn": { field: 'columnName0', ...otherproperties } },
    { "type": "addColumn", "column": { field: 'columnName1', dataType: 'number', ...otherproperties }, },
    { "type": "removeColumn", "column": { field: 'columnName2', ...otherproperties }, },
   
    { "type": "delete", "dataItem": { ...} },
    { "type": "insert", "dataItem": { ...} },
    { "type": "update", "dataItem": { ...}, "oldDataItem": { ...}, "sourceIndex": 1 }
]

cancelChangeコマンドを呼び出すと、すべての変更がキャンセルされます。batchモードでは、テーブルシートのgetChangesコマンドを使用して列とデータの変更を一緒に取得できます。

列を定義するコマンド

SpreadJSでは、DefineColumn、ModifyColumn、RemoveColumnなどのコマンドを使用して列を追加、更新、削除できます。これらのコマンドを使用する際、IColumn インターフェイスから value、dataType、defaultValue、isPrimaryKey、type、name などのプロパティを実装することで、テーブルから列を追加、更新、および削除できます。

列の定義

次のサンプルコードは、DefineColumnコマンドを実装する方法を示します。

spread.commandManager().execute({
  cmd: "DefineColumn",
  sheetName: spread.getActiveSheetTab().name(),
  // col: 3, // optional
  column: {
    type: 'Number', // 列タイプを指定する。
    value: 'Number1', // 列タイプからの列インスタンスの列識別子。
    caption: '# Number1', // カルチャの列の表示。
    style: { formatter: '#,##0.00_);[Red](#,##0.00)' } // フォーマッタは、UI操作から指定または変換できます。
  } as GC.Data.IColumn,
});

列の編集

次のサンプルコードは、 ModifyColumnコマンドを実装する方法を示します。

spread.commandManager().execute({
  cmd: "ModifyColumn",
  sheetName: spread.getActiveSheetTab().name(),
  col: 3,
  column: {
    type: 'Text', // 列タイプを指定する。
    value: 'Text1', // 列タイプからの列インスタンスの列識別子。
    caption: 'A Text1', //カルチャーの列の表示
  } as GC.Data.IColumn,
});

列の削除

次のサンプルコードは、RemoveColumnコマンドを実装する方法を示します。

spread.commandManager().execute({
  cmd: "RemoveColumn",
  sheetName: spread.getActiveSheetTab().name(),
  col: 3,
});

カスタム列の定義

テーブルシートでは、defineColumnCommand や submitDefineColumnCommand などの自己定義コマンドを使用して列タイプをカスタマイズしたり、特別な列タイプを追加したり、またはcolumnTypeItems コマンドを使用して組み込み列を更新したりする機能を提供します。

次のサンプルコードは、特別な列タイプを追加する方法、または組み込みの列タイプを更新する方法を示します。

// 表示する列タイプを選択
const items = tableSheet.options.columnTypeItems.filter((item)=>item.name === 'Select' || item.name === 'Attachment' || item.name === 'Barcode' || item.name === 'CreatedTime' || item.name === 'ModifiedTime' || item.name === 'Currency')

tableSheet.options.columnTypeItems = tableSheet.options.columnTypeItems.slice(0, 4).concat(items);

// 自己定義の列タイプを追加
tableSheet.options.columnTypeItems.unshift({ name: 'CustomizingType', text: 'Progress', iconClass: 'gc-defined-column-type-icon-number'
});

defineColumnCommand は、 [+（列の追加）]ボタンまたは「列の変更」コンテキストメニュー項目で定義された列のポップアップを開くデフォルトのコマンドを置き換えるコマンドです。

次のサンプルコードは、defineColumnCommand を実装する方法を示します。

//  定義された列ポップアップを開く
const defineCommand = tableSheet.options.defineColumnCommand;
tableSheet.options.defineColumnCommand = 'defineColumnCustom';
  spread.commandManager().register('defineColumnCustom', {
    canUndo: false,
    execute: function (context, options) {
    // it could build self-defined UI on the modify/add column triggered
    // デフォルトのUIを開く
       options.cmd = defineCommand;
       spread.commandManager().execute(options);
    }
});

submitDefineColumnCommandは、列で定義されたポップアップに対して送信ボタンが選択されている場合に、定義された列オプションを送信するためのコマンドを指定します。

次のサンプルコードは、submitDefineColumnCustom を実装する方法を示します。

//  定義された列オプションを送信する
tableSheet.options.submitDefineColumnCommand = 'submitDefineColumnCustom';
spread.commandManager().register('submitDefineColumnCustom', {
  canUndo: false,
  execute: function (context, options) {
    if (options.command === 'DefineColumn' && options.column.type === 'CustomizingType') {
        options.column.defaultValue = 0.1;
        options.column.style = {
          formatter: "=HBARSPARKLINE([@"+options.column.value+"], \"#66B032\")"
        };
}
  options.cmd = options.command;
  spread.commandManager().execute(options);
}
});

デザイナの使用

SpreadJSデザイナでは、「デザイン」>「オプション」グループからEnable Define Column チェックボックスを選択して、列を定義できます。

Enable Define Column checkbox

リモートデータテーブルがサポートしている場合は、SpreadJSデザイナの[データ]>[データソース]>[テーブル]セクションからリモートデータテーブルと通信するリモートAPIを設定できます。

ts-definecolumn-remoteConfiguration