테이블 시트에는 대화형 테이블 시트 패널이 있습니다.
테이블 시트 패널 만들기:
테이블 시트 패널의 생성자에는 다음과 같은 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
자체 필드이든 관련 필드이든 계산된 필드이든 관계없이 열 값을 표시합니다.
테이블 시트 패널을 테이블 시트에 첨부:
테이블 시트 패널을 테이블 시트에서 분리:
테이블 시트 패널 삭제:
호스트 요소로 테이블 시트 패널 찾기:
<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
</gc-spread-sheets>
<div id="panel" class="container">
</div>
</div>
</template>
<script>
import Vue from "vue";
import "@mescius/spread-sheets-vue";
import GC from "@mescius/spread-sheets";
import "@mescius/spread-sheets-tablesheet";
import '@mescius/spread-sheets-resources-ko';
GC.Spread.Common.CultureManager.culture("ko-kr");
import "./styles.css";
let App = Vue.extend({
name: "app",
methods: {
initSpread: function (spread) {
spread.suspendPaint();
spread.clearSheets();
spread.options.autoFitType = GC.Spread.Sheets.AutoFitType.cellWithHeader;
//init a data manager
var baseApiUrl = getBaseApiUrl();
var dataManager = spread.dataManager();
//add order table
var orderTable = dataManager.addTable("orderTable", {
remote: {
read: {
url: baseApiUrl + "/Order"
}
}
});
//add customer table
var customerTable = dataManager.addTable("customerTable", {
remote: {
read: {
url: baseApiUrl + "/Customer"
}
}
});
//add relationship between order table and customer table
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 },
]); //the View has all default columns of the Table
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"
);
}
new Vue({
render: (h) => h(App),
}).$mount("#app");
</script>
<!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" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/vue/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<!-- SystemJS -->
<script src="$DEMOROOT$/ko/vue/node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('./src/app.vue');
System.import('$DEMOROOT$/ko/lib/vue/license.js');
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 303px);
height: 100%;
overflow: hidden;
float: left;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0;
}
.container {
width: 300px;
height: 100%;
float: left;
border: 1px solid lightgrey;
}
(function (global) {
System.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
meta: {
'*.css': { loader: 'css' },
'*.vue': { loader: 'vue-loader' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-tablesheet': 'npm:@mescius/spread-sheets-tablesheet/index.js',
'@mescius/spread-sheets-resources-ko': 'npm:@mescius/spread-sheets-resources-ko/index.js',
'@mescius/spread-sheets-vue': 'npm:@mescius/spread-sheets-vue/index.js',
'@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js',
'jszip': 'npm:jszip/dist/jszip.js',
'css': 'npm:systemjs-plugin-css/css.js',
'vue': 'npm:vue/dist/vue.min.js',
'vue-loader': 'npm:systemjs-vue-browser/index.js',
'tiny-emitter': 'npm:tiny-emitter/index.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
"node_modules": {
defaultExtension: 'js'
}
}
});
})(this);