테이블 시트에는 대화형 테이블 시트 패널이 있습니다.
테이블 시트 패널 만들기:
테이블 시트 패널의 생성자에는 다음과 같은 4개의 매개 변수가 있습니다.
매개 변수
유형
설명
name
string
테이블 시트 패널 이름.
tableSheet
GC.Spread.Sheets.TableSheet.TableSheet
테이블 시트.
host
HTMLElement
호스트 요소.
options
Object
초기화 옵션.
options.showSource
GC.Spread.Sheets.TableSheet.ShowSourceOptions
열 값을 표시하는 방법
enum GC.Spread.Sheets.TableSheet.ShowSourceOptions에는 4개의 옵션이 있습니다.
키
값
설명
none
0
열 값을 표시하지 않습니다.
field
1
자체 필드 또는 관련 필드일 때 열 값을 표시합니다.
formula
2
계산된 필드일 때 열 값을 표시합니다.
all
3
자체 필드이든 관련 필드이든 계산된 필드이든 관계없이 열 값을 표시합니다.
테이블 시트 패널을 테이블 시트에 첨부:
테이블 시트 패널을 테이블 시트에서 분리:
테이블 시트 패널 삭제:
호스트 요소로 테이블 시트 패널 찾기:
/*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;
//init a data manager
var baseApiUrl = getBaseApiUrl();
var dataManager = spread.dataManager();
var orderTable = dataManager.addTable("orderTable", {
remote: {
read: {
url: baseApiUrl + "/Order"
}
}
});
var customerTable = dataManager.addTable("customerTable", {
remote: {
read: {
url: baseApiUrl + "/Customer"
}
}
});
dataManager.addRelationship(orderTable, "CustomerId", "customer", customerTable, "Id", "orders");
//init a table sheet
var sheet = spread.addSheetTab(0, "TableSheet1", GC.Spread.Sheets.SheetType.tableSheet);
sheet.options.allowAddNew = false; //hide new row
//bind a view to the table sheet
var style = { formatter: 'MM/dd/yyyy' };
var view = orderTable.addView("myView", [
{ value: "Id", width: 80 },
{ value: "CustomerId", width: 120 },
{ value: "ShipName", width: 100 },
{ value: "EmployeeId", width: 120 },
{ value: "OrderDate", width: 100, style: style },
{ value: "RequiredDate", width: 120, style: style },
{ value: "ShippedDate", width: 120, style: style },
{ value: "ShipVia", width: 80 },
{ value: "Freight", width: 80 },
{ value: "ShipAddress", width: 120 },
{ value: "ShipCity", width: 100 },
{ value: "ShipRegion", width: 100 },
{ value: "ShipPostalCode", width: 140 },
{ value: "ShipState", width: 120 },
{ value: "customer", width: 120, isRelationship: true, visible: false },
{ value: "customer.Id", width: 120, isRelationship: true, visible: false },
{ value: "customer.CompanyName", width: 120, isRelationship: true, visible: false },
{ value: "customer.ContactName", width: 120, isRelationship: true, visible: false },
{ value: "customer.ContactTitle", width: 120, isRelationship: true, visible: false },
{ value: "customer.Address", width: 120, isRelationship: true, visible: false },
{ value: "customer.City", width: 120, isRelationship: true, visible: false },
{ value: "customer.Region", width: 120, isRelationship: true, visible: false },
{ value: "customer.PostalCode", width: 120, isRelationship: true, visible: false },
{ value: "customer.State", width: 120, isRelationship: true, visible: false },
{ value: "customer.Phone", width: 120, isRelationship: true, visible: false },
]);
view.fetch().then(function() {
sheet.setDataView(view);
//init a table sheet panel
var host = document.getElementById("panel");
var panel = new GC.Spread.Sheets.TableSheet.TableSheetPanel("myPanel", sheet, host);
});
spread.resumePaint();
}
function getBaseApiUrl() {
return window.location.href.match(/http.+spreadjs\/learn-spreadjs\//)[0] + 'server/api';
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta name="spreadjs culture" content="ko-kr" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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-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 id="panel" class="container">
</div>
</div>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0;
}
.sample-spreadsheets {
width: calc(100% - 303px);
height: 100%;
overflow: hidden;
float: left;
}
.container {
width: 300px;
height: 100%;
float: left;
border: 1px solid lightgrey;
}