사용자는 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;
}
