개요

TableSheet는 고객이 손쉽게 표를 디자인할 수 있도록 의미 있는 열 유형(숫자, 텍스트, 수식, 조회, 날짜, 체크박스, 선택, 통화, 퍼센트, 전화, 이메일, URL, 생성시간, 수정시간, 첨부파일, 바코드)을 표에 추가, 업데이트 및 제거하는 기능을 제공합니다.

설명
app.js
index.html
styles.css

사용자는 TableSheet를 사용해 열 추가 버튼, 열 수정, 열 제거 및 열 헤더의 기본 키 컨텍스트 메뉴 설정의 표시 여부를 전환하는 옵션으로 열을 정의할 수 있습니다.

interface GC.Spread.Sheets.TableSheet.ITableSheetOptions {
  // other properties...
  enableDefineColumn?: boolean;
}

열 유형

interface GC.Data.IColumn {
    type: string, // the built-in column types: Number, Text, Formula, Checkbox, Date, Currency, Percent, Phone, Email, URL, Lookup, CreatedTime, ModifiedTime, Attachment, Select, Barcode
}

지원되는 열 유형에 대한 설명입니다.

열 유형 데이터 유형 설명
숫자 숫자 지정된 서식이 있는 대부분의 숫자 값에 사용
텍스트 문자열 일반적인 텍스트에 사용
수식 결과에 따라 다름 레코드의 다른 필드에 따라 컴퓨팅
조회 관련 항목에 따라 다름 관련 레코드에서 특정 필드 조회
날짜 날짜 날짜 값 쉽게 입력하기
체크박스 부울 TRUE/FALSE 데이터 유형이 있는 check/uncheck에 유용함
선택 옵션에 따라 다름 사전에 정해진 목록에서 옵션을 선택하는 데 유용함
통화 숫자 문화권 서식으로 통화를 표시함
퍼센트 숫자 퍼센트 서식으로 숫자를 표시함
Phone 문자열 마스크 유효성 검사를 적용한 숫자의 숫자 문자열을 표시함
Email 문자열 마스크 유효성 검사를 적용한 이메일 주소를 표시함
URL 문자열 URL 텍스트를 표시함
생성일 날짜 레코드를 생성한 날짜를 설정함
수정일 날짜 레코드에서 필드를 업데이트한 날짜를 설정함
첨부 대상 파일을 레코드에 직접 첨부함
바코드 입력에 따라 다름 지정된 바코드를 필드에서 생성함

구성

표와 통신하려면 원격 API를 구성해야 합니다.

열 API 설명
getColumns 표에서 열을 회수함
addColumn 표에 열을 추가함
updateColumn 열의 속성을 표에 업데이트함
removeColumn 표에서 열을 삭제함
batch 변경 사항을 일괄 모드에서 함께 게시함
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, // the name of the field
    dataType: 'number' | 'string' | 'boolean', // the data type could be converted to another data type on the remote storage source
    defaultValue?: 'number' | 'string' | 'boolean' | 'undefined', // the static default value for remote storage source
    isPrimaryKey?: boolean, // indicates the field could be the primary
}
type ColumnData = {
    column: Column,
}
type ColumnWithDefaultData = {
    column: Column,
    data?: any[], // in some cases, the data provided by the client should sync to the remote storage source, for example, the column with a formula default value is added to the table has some records
}
type ModifiedColumnData = {
    column: Column,
    originalColumn: Column,
}
type BatchItemData = {
    type: "updateColumn" | "addColumn" | "removeColumn", // it only shows the options about the column changes, the whole changes include the column and data if exited
    column: Column,
    data?: any[],
    originalColumn?: Column,
}
type BatchResultData = {
    succeed: boolean,
    reason?: string,
}
작업 요청 데이터 응답 데이터
getColumns None Column[]
addColumn ColumnWithDefaultData ColumnData
updateColumn ModifiedColumnData ModifiedColumnData
removeColumn ColumnData ColumnData
batch BatchItemData[] BatchResultData[]

명령

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}
 * Represents the command used to define the column.
 * @property {boolean} canUndo - indicates whether the command supports undo and redo operations.
 * @property {function} execute - performs an execute or undo operation.
 * The arguments of the execute method are as follows.
 * @param {GC.Spread.Sheets.Workbook} context The context of the operation.
 * @param {Object} options The options of the operation.
 * @param {string} options.sheetName The sheet name.
 * @param {number} [options.col] The specified col for inserting, optional.
 * @param {GC.Data.IColumn} options.column The defined column.
 * @param {boolean} isUndo `true` if this is an undo operation; otherwise, `false`.
 */
spread.commandManager().execute({
  cmd: "DefineColumn",
  sheetName: spread.getActiveSheetTab().name(),
  // col: 3, // optional
  column: {
    type: 'Number', // specify the column type
    value: 'Number1', // the column identifier of the column instance from the column type
    caption: '# Number1', // the display of the column for the culture
    style: { formatter: '#,##0.00_);[Red](#,##0.00)' } // the formatter could be specified or be converted from the UI operations
  } 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}
 * Represents the command used to modify the column.
 * @property {boolean} canUndo - indicates whether the command supports undo and redo operations.
 * @property {function} execute - performs an execute or undo operation.
 * The arguments of the execute method are as follows.
 * @param {GC.Spread.Sheets.Workbook} context The context of the operation.
 * @param {Object} options The options of the operation.
 * @param {string} options.sheetName The sheet name.
 * @param {number} options.col The specified col.
 * @param {GC.Data.IColumn} options.column The modified column.
 * @param {boolean} isUndo `true` if this is an undo operation; otherwise, `false`.
 */
spread.commandManager().execute({
  cmd: "ModifyColumn",
  sheetName: spread.getActiveSheetTab().name(),
  col: 3,
  column: {
    type: 'Text', // specify the column type
    value: 'Text1', // the column identifier of the column instance from the column type
    caption: 'A Text1', // the display of the column for the culture
  } 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}
 * Represents the command used to remove the column.
 * @property {boolean} canUndo - indicates whether the command supports undo and redo operations.
 * @property {function} execute - performs an execute or undo operation.
 * The arguments of the execute method are as follows.
 * @param {GC.Spread.Sheets.Workbook} context The context of the operation.
 * @param {Object} options The options of the operation.
 * @param {string} options.sheetName The sheet name.
 * @param {number} options.col The specified col.
 * @param {boolean} isUndo `true` if this is an undo operation; otherwise, `false`.
 */
spread.commandManager().execute({
  cmd: "RemoveColumn",
  sheetName: spread.getActiveSheetTab().name(),
  col: 3,
});
사용자는 TableSheet를 사용해 열 추가 버튼, 열 수정, 열 제거 및 열 헤더의 기본 키 컨텍스트 메뉴 설정의 표시 여부를 전환하는 옵션으로 열을 정의할 수 있습니다. 열 유형 지원되는 열 유형에 대한 설명입니다. 열 유형 데이터 유형 설명 숫자 숫자 지정된 서식이 있는 대부분의 숫자 값에 사용 텍스트 문자열 일반적인 텍스트에 사용 수식 결과에 따라 다름 레코드의 다른 필드에 따라 컴퓨팅 조회 관련 항목에 따라 다름 관련 레코드에서 특정 필드 조회 날짜 날짜 날짜 값 쉽게 입력하기 체크박스 부울 TRUE/FALSE 데이터 유형이 있는 check/uncheck에 유용함 선택 옵션에 따라 다름 사전에 정해진 목록에서 옵션을 선택하는 데 유용함 통화 숫자 문화권 서식으로 통화를 표시함 퍼센트 숫자 퍼센트 서식으로 숫자를 표시함 Phone 문자열 마스크 유효성 검사를 적용한 숫자의 숫자 문자열을 표시함 Email 문자열 마스크 유효성 검사를 적용한 이메일 주소를 표시함 URL 문자열 URL 텍스트를 표시함 생성일 날짜 레코드를 생성한 날짜를 설정함 수정일 날짜 레코드에서 필드를 업데이트한 날짜를 설정함 첨부 대상 파일을 레코드에 직접 첨부함 바코드 입력에 따라 다름 지정된 바코드를 필드에서 생성함 구성 표와 통신하려면 원격 API를 구성해야 합니다. 열 API 설명 getColumns 표에서 열을 회수함 addColumn 표에 열을 추가함 updateColumn 열의 속성을 표에 업데이트함 removeColumn 표에서 열을 삭제함 batch 변경 사항을 일괄 모드에서 함께 게시함 그리고 열 원격 API는 요청 처리와 유사한 자체 정의 함수로 처리할 수 있습니다. 요청 및 응답 작업 요청 데이터 응답 데이터 getColumns None Column[] addColumn ColumnWithDefaultData ColumnData updateColumn ModifiedColumnData ModifiedColumnData removeColumn ColumnData ColumnData batch BatchItemData[] BatchResultData[] 명령 UI를 통해 정의하는 방식 말고, 명령을 사용해 열을 정의하는 방법도 있습니다. DefineColumn DefineColumn 명령은 열을 추가할 수 있습니다. ModifyColumn ModifyColumn 명령은 열 속성을 변경할 수 있습니다. RemoveColumn RemoveColumn 명령은 열을 제거할 수 있습니다.
/*REPLACE_MARKER*/ /*DO NOT DELETE THESE COMMENTS*/ window.onload = function() { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 0 }); initSpread(spread); }; function initSpread(spread) { spread.suspendPaint(); spread.options.autoFitType = GC.Spread.Sheets.AutoFitType.cellWithHeader; spread.clearSheets(); var dataManager = spread.dataManager(); initDefineOrderTable(spread, dataManager); spread.resumePaint(); } function initDefineOrderTable(spread, dataManager) { spread.options.allowDynamicArray = true; var apiUrl = getApiUrl("DefineOrder"), apiColumnUrl = getColumnApiUrl("DefineOrder"); var orderTable = dataManager.addTable("orderTable", { remote: { read: { url: apiUrl, }, update: { url: apiUrl, method: 'PUT' }, create: { url: apiUrl, }, delete: { url: apiUrl, }, getColumns: { url: apiColumnUrl }, addColumn: { url: apiColumnUrl, method: 'POST' }, updateColumn: { url: apiColumnUrl, method: 'PUT' }, removeColumn: { url: apiColumnUrl, method: 'DELETE' }, // batch: { // url: apiUrl + 'Collection' // } }, schema: { // テーブルに存在している列のオプションを定義できます columns: { Id: { isPrimaryKey: true }, OrderDate: { dataType: 'date' }, RequiredDate: { dataType: 'date' }, ShippedDate: { dataType: 'date' }, ShipVia: { dataType: 'number', type: 'Select', style: { cellType: { type: 'combobox', editorValueType: 'value', items: [ { text: 'Speedy Express', value: 1 }, { text: 'United Package', value: 2 }, { text: 'Federal Shipping', value: 3 } ] } }, }, Freight: { dataType: 'number', type: 'Currency', style: { formatter: '[$$-409]#,##0.00' }, }, CreatedTime: { type: "CreatedTime", dataType: 'date', trigger: { when: "onNew", formula: "=NOW()" }, readonly: true, defaultValue: '=NOW()', style: { formatter: "m/d/yy h:mm;@" }, }, ModifiedTime: { type: "ModifiedTime", dataType: 'date', trigger: { when: "onNewAndUpdate", formula: "=NOW()", fields: "*" }, readonly: true, style: { formatter: "[$-409]m/d/yy h:mm AM/PM;@" }, }, OrderAttachment: { type: 'Attachment', style: { cellType: { type: 'fileUpload' } }, }, OrderCode: { type: 'Barcode', defaultValue: '=FLOOR.MATH(RAND()*100000000)', style: { formatter: '=BC_GS1_128([@OrderCode],"#000000","#FFFFFF",false,,,,,,,,,,,)' }, }, } }, autoSync: true, // batch: true, }); var employeeTable = dataManager.addTable("employeeTable", { remote: { read: { url: getApiUrl("Employee") } }, schema: { columns: { Id: { isPrimaryKey: true }, BirthDate: { dataType: 'date' }, HireDate: { dataType: 'date' }, } }, autoSync: true }); var customerTable = dataManager.addTable("customerTable", { remote: { read: { url: getApiUrl("Customer") } }, schema: { columns: { Id: { isPrimaryKey: true }, } }, autoSync: true }); dataManager.addRelationship(orderTable, "EmployeeId", "employee", employeeTable, "Id", "orders"); dataManager.addRelationship(orderTable, "CustomerId", "customer", customerTable, "Id", "orders"); var tableSheet = spread.addSheetTab(0, "Orders", GC.Spread.Sheets.SheetType.tableSheet); tableSheet.options.allowAddNew = true; tableSheet.options.enableDefineColumn = true; var rowActions = GC.Spread.Sheets.TableSheet.BuiltInRowActions; var options = tableSheet.rowActionOptions(); options.push( rowActions.removeRow, rowActions.saveRow, rowActions.resetRow, ); tableSheet.rowActionOptions(options); var orderView = orderTable.addView("orderView", [ { value: "Id", width: 50 }, { value: "CustomerId", defaultValue: 'ALFKI', visible: false }, { value: "EmployeeId", defaultValue: 1, visible: false }, { value: "customer.ContactName", caption: 'Contact', width: 100 }, { value: '=CONCAT([@employee.FirstName], " ", [@employee.LastName])', caption: 'Employee', width: 110 }, { value: "OrderDate", width: 100, style: { formatter: "m/d/yyyy" } }, { value: "ShipVia", width: 140 }, { value: "Freight", width: 80, defaultValue: 0 }, { value: "ShipName" }, { value: '=CONCAT([@ShipState], ", ", [@ShipCity], ", ", [@ShipRegion])', caption: 'Ship State', visible: false }, { value: 'OrderAttachment', caption: 'Attachment', visible: false }, { value: 'OrderCode', caption: 'Logistic Code', width: 160, visible: false }, { value: 'CreatedTime', caption: 'Created Time', width: 160, visible: false }, { value: 'ModifiedTime', caption: 'Modified Time', width: 160, visible: false }, ], null, { defaultColumnWidth: 120 }); orderView.fetch().then(function () { tableSheet.setDataView(orderView); }); } function getBaseApiUrl() { return window.location.href.match(/http.+spreadjs\/learn-spreadjs\//)[0] + 'server/api'; } function getApiUrl(tableName) { return getBaseApiUrl() + "/" + tableName; } function getColumnApiUrl(tableName) { return getBaseApiUrl() + "/tables/" + tableName + "/columns"; }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="spreadjs culture" content="ko-kr" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <!-- Promise Polyfill for IE, https://www.npmjs.com/package/promise-polyfill --> <script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script> <script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-barcode/dist/gc.spread.sheets.barcode.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-tablesheet/dist/gc.spread.sheets.tablesheet.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-resources-ko/dist/gc.spread.sheets.resources.ko.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div id="ss" class="sample-spreadsheets"></div> </div> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .sample-spreadsheets { width: 100%; height: 100%; overflow: hidden; float: left; }