테이블 시트의 보기를 사용자 정의하려면 다음 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.clearSheets();
spread.options.autoFitType = GC.Spread.Sheets.AutoFitType.cellWithHeader;
//init a data manager
var tableName = "Supplier";
var baseApiUrl = getBaseApiUrl();
var apiUrl = baseApiUrl + "/" + tableName;
var dataManager = spread.dataManager();
var myTable = dataManager.addTable("myTable", {
remote: {
read: {
url: apiUrl
}
}
});
//init a table sheet
var sheet = spread.addSheetTab(0, "TableSheet1", GC.Spread.Sheets.SheetType.tableSheet);
sheet.options.allowAddNew = false; //hide new row
//column headers style
var headerStyle = {
font: "italic 10pt Calibri"
};
var headerStyle2 = {
font: "12pt Calibri",
backColor : "#F7A711",
foreColor:"white",
hAlign:"left",
borderTop: {
color: "black",
style: "thick"
},
borderLeft: {
color: "black",
style: "thick"
},
borderRight: {
color: "black",
style: "thick"
},
};
var headerStyle3 = {
font: "bold 14pt Calibri",
borderTop: {
color: "blue",
style: "thick"
},
borderLeft: {
color: "blue",
style: "thin"
},
borderRight: {
color: "blue",
style: "thin"
},
};
//bind a view to the table sheet
myTable.fetch().then(function () {
var view = myTable.addView("myView", [
{ value: "Id", width: 80, headerStyle: headerStyle },
{ value: "CompanyName", width: 200, caption :"Company Name", headerStyle: headerStyle },
{ value: "ContactName", width: 150, caption :"Contact", headerStyle: headerStyle2 },
{ value: "ContactTitle", width: 200, caption :"Title", headerStyle: headerStyle2 },
{ value: "Address", width: 200, headerStyle: headerStyle3 },
{ value: "City", width: 150, caption :"City", headerStyle: headerStyle3 },
{ value: "State", width: 100, caption :"State" },
{ value: "Region", width: 100, caption :"Region" }
]);
sheet.setDataView(view);
});
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="optionContainer" class="optionContainer">
</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;
}