테이블 시트 패널

테이블 시트 패널은 테이블 시트의 열 표시/숨기기 및 순서 변경을 지원합니다.

설명
app.vue
index.html
styles.css

테이블 시트에는 대화형 테이블 시트 패널이 있습니다.

테이블 시트 패널 만들기:

//init a table sheet panel
var host = document.getElementById("panel");
var panel = new GC.Spread.Sheets.TableSheet.TableSheetPanel("myPanel", myTableSheet, host);
//init a table sheet panel with options
var host = document.getElementById("panel");
var options = { showSource: GC.Spread.Sheets.TableSheet.ShowSourceOptions.all };
var panel = new GC.Spread.Sheets.TableSheet.TableSheetPanel("myPanel", myTableSheet, host, options);

테이블 시트 패널의 생성자에는 다음과 같은 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 자체 필드이든 관련 필드이든 계산된 필드이든 관계없이 열 값을 표시합니다.

테이블 시트 패널을 테이블 시트에 첨부:

/**
  * Attaches a table sheet into current table sheet panel.
  * @param {GC.Spread.Sheets.TableSheet.TableSheet} tableSheet The table sheet.
  * @example
  * //This example attaches a table sheet.
  * panel.attach(tableSheet);
  */
 attach(tableSheet: GC.Spread.Sheets.TableSheet.TableSheet): void;

테이블 시트 패널을 테이블 시트에서 분리:

/**
  * Detaches a table sheet from current table sheet panel.
  * @example
  * //This example detaches a table sheet.
  * panel.detach();
  */
 detach(): void;

테이블 시트 패널 삭제:

/**
  * Destroys current table sheet panel.
  * @example
  * //This example destroys current table sheet panel.
  * panel.destroy();
  */
 destroy(): void;

호스트 요소로 테이블 시트 패널 찾기:

/**
  * Finds a table sheet panel by a DOM element.
  * @param {HTMLElement | string} host The host element.
  * @example
  * //This example finds a table sheet panel by a DOM element.
  * GC.Spread.Sheets.TableSheet.TableSheetPanel.findControl(document.getElementById("sampleDiv"));
  */
 static findControl(host: HTMLElement|string): GC.Spread.Sheets.TableSheet.TableSheetPanel;
테이블 시트에는 대화형 테이블 시트 패널이 있습니다. 테이블 시트 패널 만들기: 테이블 시트 패널의 생성자에는 다음과 같은 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);