이벤트

SpreadJS는 시트의 메모에 대한 이벤트를 제공하여 발생한 이벤트에 반응하도록 합니다.

설명
app.component.ts
index.html
app.component.html
app.data.ts
styles.css

CommentChanged 이벤트는 메모가 변경되면 발생합니다(예: 일부 속성이 변경된 경우).

    sheet.bind(GC.Spread.Sheets.Events.CommentChanged, function(e, args) {
       // do something
    });
CommentChanged 이벤트는 메모가 변경되면 발생합니다(예: 일부 속성이 변경된 경우).
import { Component, NgModule, enableProdMode } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import GC from '@mescius/spread-sheets'; import { SpreadSheetsModule } from '@mescius/spread-sheets-angular'; import '@mescius/spread-sheets-resources-ko'; GC.Spread.Common.CultureManager.culture("ko-kr"); import { getData } from './app.data'; import './styles.css'; @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { autoGenerateColumns = false; spread: GC.Spread.Sheets.Workbook; dataSource: any[]; commentEventMessage: string = ''; hostStyle = { width: 'calc(100% - 280px)', height: '100%', overflow: 'hidden', float: 'left' }; constructor() { } initSpread($event: any) { var self = this; self.spread = $event.spread; let spread = self.spread; let spreadNS = GC.Spread.Sheets; let sheet = spread.getActiveSheet(); sheet.comments.add(1, 1, "new comment!"); sheet.setText(1,1,"Comment"); sheet.bind(spreadNS.Events.CommentChanged, function(e: any, args: any) { var text = self.commentEventMessage; if (text !== "") { text += '\n'; } self.commentEventMessage = text + "CommentChanged: " + " " + args.propertyName; }); // get comment and change some properties to fire event var comment = sheet.comments.get(1, 1); comment.text("Edit the comment, do resize, drag or other actions to fire the CommentChanged event."); comment.backColor("white"); comment.foreColor("#82BC00"); comment.displayMode(spreadNS.Comments.DisplayMode.alwaysShown); } } @NgModule({ imports: [BrowserModule, SpreadSheetsModule], declarations: [AppComponent], exports: [AppComponent], bootstrap: [AppComponent] }) export class AppModule {} enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule);
<!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/angular/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <!-- Polyfills --> <script src="$DEMOROOT$/ko/angular/node_modules/core-js/client/shim.min.js"></script> <script src="$DEMOROOT$/ko/angular/node_modules/zone.js/fesm2015/zone.min.js"></script> <!-- SystemJS --> <script src="$DEMOROOT$/ko/angular/node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.import('@angular/compiler'); System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('$DEMOROOT$/ko/lib/angular/license.ts'); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html>
<div class="sample-tutorial"> <gc-spread-sheets [hostStyle]="hostStyle" (workbookInitialized)="initSpread($event)"> <gc-worksheet></gc-worksheet> </gc-spread-sheets> <div class="options-container"> <textarea id="commentEvent" style="width: 100%; height: 90px" [value]="commentEventMessage"></textarea> </div> </div>
export function getData() { return [ { "Film": "27 Dresses", "Genre": "Comedy", "Lead Studio": "Fox", "Audience Score %": 71, "Profitability": 5.34, "Rating": 40, "Worldwide Gross": 160.30, "Year": 2008 }, { "Film": "(500) Days of Summer", "Genre": "Comedy", "Lead Studio": "Fox", "Audience Score %": 81, "Profitability": 8.09, "Rating": 87, "Worldwide Gross": 60.72, "Year": 2009 }, { "Film": "A Dangerous Method", "Genre": "Drama", "Lead Studio": "Independent", "Audience Score %": 89, "Profitability": 0.44, "Rating": 79, "Worldwide Gross": 8.97, "Year": 2011 }, { "Film": "A Serious Man", "Genre": "Drama", "Lead Studio": "Universal", "Audience Score %": 64, "Profitability": 4.38, "Rating": 89, "Worldwide Gross": 30.68, "Year": 2009 }, { "Film": "Across the Universe", "Genre": "Romance", "Lead Studio": "Independent", "Audience Score %": 84, "Profitability": 0.65, "Rating": 54, "Worldwide Gross": 29.36, "Year": 2007 }, { "Film": "Beginners", "Genre": "Comedy", "Lead Studio": "Independent", "Audience Score %": 80, "Profitability": 4.47, "Rating": 84, "Worldwide Gross": 14.31, "Year": 2011 }, { "Film": "Dear John", "Genre": "Drama", "Lead Studio": "Sony", "Audience Score %": 66, "Profitability": 4.5988, "Rating": 29, "Worldwide Gross": 114.97, "Year": 2010 }, { "Film": "Enchanted", "Genre": "Comedy", "Lead Studio": "Disney", "Audience Score %": 80, "Profitability": 4.00, "Rating": 93, "Worldwide Gross": 340.48, "Year": 2007 }, { "Film": "Fireproof", "Genre": "Drama", "Lead Studio": "Independent", "Audience Score %": 51, "Profitability": 66.93, "Rating": 40, "Worldwide Gross": 33.46, "Year": 2008 }, { "Film": "Four Christmases", "Genre": "Comedy", "Lead Studio": "Warner Bros.", "Audience Score %": 52, "Profitability": 2.02, "Rating": 26, "Worldwide Gross": 161.83, "Year": 2008 }, { "Film": "Ghosts of Girlfriends Past", "Genre": "Comedy", "Lead Studio": "Warner Bros.", "Audience Score %": 47, "Profitability": 2.0444, "Rating": 27, "Worldwide Gross": 102.22, "Year": 2009 }, { "Film": "Gnomeo and Juliet", "Genre": "Animation", "Lead Studio": "Disney", "Audience Score %": 52, "Profitability": 5.38, "Rating": 56, "Worldwide Gross": 193.96, "Year": 2011 }, { "Film": "Going the Distance", "Genre": "Comedy", "Lead Studio": "Warner Bros.", "Audience Score %": 56, "Profitability": 1.31, "Rating": 53, "Worldwide Gross": 42.05, "Year": 2010 }, { "Film": "Good Luck Chuck", "Genre": "Comedy", "Lead Studio": "Lionsgate", "Audience Score %": 61, "Profitability": 2.36, "Rating": 3, "Worldwide Gross": 59.19, "Year": 2007 }, { "Film": "He's Just Not That Into You", "Genre": "Comedy", "Lead Studio": "Warner Bros.", "Audience Score %": 60, "Profitability": 7.15, "Rating": 42, "Worldwide Gross": 178.84, "Year": 2009 }, { "Film": "High School Musical 3: Senior Year", "Genre": "Comedy", "Lead Studio": "Disney", "Audience Score %": 76, "Profitability": 22.91, "Rating": 65, "Worldwide Gross": 252.04, "Year": 2008 }, { "Film": "I Love You Phillip Morris", "Genre": "Comedy", "Lead Studio": "Independent", "Audience Score %": 57, "Profitability": 1.34, "Rating": 71, "Worldwide Gross": 20.1, "Year": 2010 }, { "Film": "It's Complicated", "Genre": "Comedy", "Lead Studio": "Universal", "Audience Score %": 63, "Profitability": 2.64, "Rating": 56, "Worldwide Gross": 224.6, "Year": 2009 }, { "Film": "Jane Eyre", "Genre": "Romance", "Lead Studio": "Universal", "Audience Score %": 77, "Profitability": null, "Rating": 85, "Worldwide Gross": 30.14, "Year": 2011 }, { "Film": "Just Wright", "Genre": "Comedy", "Lead Studio": "Fox", "Audience Score %": 58, "Profitability": 1.79, "Rating": 45, "Worldwide Gross": 21.56, "Year": 2010 }, { "Film": "Killers", "Genre": "Action", "Lead Studio": "Lionsgate", "Audience Score %": 45, "Profitability": 1.24, "Rating": 11, "Worldwide Gross": 93.4, "Year": 2010 }, { "Film": "Knocked Up", "Genre": "Comedy", "Lead Studio": "Universal", "Audience Score %": 83, "Profitability": 6.63, "Rating": 91, "Worldwide Gross": 219.00, "Year": 2007 }, { "Film": "Leap Year", "Genre": "Comedy", "Lead Studio": "Universal", "Audience Score %": 49, "Profitability": 1.71, "Rating": 21, "Worldwide Gross": 32.59, "Year": 2010 }, { "Film": "Letters to Juliet", "Genre": "Comedy", "Lead Studio": "Summit", "Audience Score %": 62, "Profitability": 2.639333333, "Rating": 40, "Worldwide Gross": 79.18, "Year": 2010 }, { "Film": "License to Wed", "Genre": "Comedy", "Lead Studio": "Warner Bros.", "Audience Score %": 55, "Profitability": 1.98, "Rating": 8, "Worldwide Gross": 69.30, "Year": 2007 }, { "Film": "Life as We Know It", "Genre": "Comedy", "Lead Studio": "Independent", "Audience Score %": 62, "Profitability": 2.53, "Rating": 28, "Worldwide Gross": 96.16, "Year": 2010 }, { "Film": "Love & Other Drugs", "Genre": "Comedy", "Lead Studio": "Fox", "Audience Score %": 55, "Profitability": 1.81, "Rating": 48, "Worldwide Gross": 54.53, "Year": 2010 }, { "Film": "Love Happens", "Genre": "Drama", "Lead Studio": "Universal", "Audience Score %": 40, "Profitability": 2.00, "Rating": 18, "Worldwide Gross": 36.08, "Year": 2009 }, { "Film": "Made of Honor", "Genre": "Comedy", "Lead Studio": "Sony", "Audience Score %": 61, "Profitability": 2.64, "Rating": 13, "Worldwide Gross": 105.96, "Year": 2008 }, { "Film": "Mamma Mia!", "Genre": "Comedy", "Lead Studio": "Universal", "Audience Score %": 76, "Profitability": 9.23, "Rating": 53, "Worldwide Gross": 609.47, "Year": 2008 }, { "Film": "Marley and Me", "Genre": "Comedy", "Lead Studio": "Fox", "Audience Score %": 77, "Profitability": 3.746781818, "Rating": 63, "Worldwide Gross": 206.073, "Year": 2008 }, { "Film": "Midnight in Paris", "Genre": "Romance", "Lead Studio": "Sony", "Audience Score %": 84, "Profitability": 8.74, "Rating": 93, "Worldwide Gross": 148.66, "Year": 2011 }, { "Film": "Miss Pettigrew Lives for a Day", "Genre": "Comedy", "Lead Studio": "Independent", "Audience Score %": 70, "Profitability": 0.25, "Rating": 78, "Worldwide Gross": 15.17, "Year": 2008 }, { "Film": "Monte Carlo", "Genre": "Romance", "Lead Studio": "20th Century Fox", "Audience Score %": 50, "Profitability": 1.98, "Rating": 38, "Worldwide Gross": 39.66, "Year": 2011 }, { "Film": "Music and Lyrics", "Genre": "Romance", "Lead Studio": "Warner Bros.", "Audience Score %": 70, "Profitability": 3.64, "Rating": 63, "Worldwide Gross": 145.89, "Year": 2007 }, { "Film": "My Week with Marilyn", "Genre": "Drama", "Lead Studio": "The Weinstein Company", "Audience Score %": 84, "Profitability": 0.82, "Rating": 83, "Worldwide Gross": 8.25, "Year": 2011 }, { "Film": "New Year's Eve", "Genre": "Romance", "Lead Studio": "Warner Bros.", "Audience Score %": 48, "Profitability": 2.53, "Rating": 8, "Worldwide Gross": 142.04, "Year": 2011 }, { "Film": "Nick and Norah's Infinite Playlist", "Genre": "Comedy", "Lead Studio": "Sony", "Audience Score %": 67, "Profitability": 3.35, "Rating": 73, "Worldwide Gross": 33.52, "Year": 2008 }, { "Film": "No Reservations", "Genre": "Comedy", "Lead Studio": "", "Audience Score %": 64, "Profitability": 3.30, "Rating": 39, "Worldwide Gross": 92.60, "Year": 2007 }, { "Film": "Not Easily Broken", "Genre": "Drama", "Lead Studio": "Independent", "Audience Score %": 66, "Profitability": 2.14, "Rating": 34, "Worldwide Gross": 10.7, "Year": 2009 }, { "Film": "One Day", "Genre": "Romance", "Lead Studio": "Independent", "Audience Score %": 54, "Profitability": 3.68, "Rating": 37, "Worldwide Gross": 55.24, "Year": 2011 }, { "Film": "Our Family Wedding", "Genre": "Comedy", "Lead Studio": "Independent", "Audience Score %": 49, "Profitability": null, "Rating": 14, "Worldwide Gross": 21.37, "Year": 2010 }, { "Film": "Over Her Dead Body", "Genre": "Comedy", "Lead Studio": "New Line", "Audience Score %": 47, "Profitability": 2.07, "Rating": 15, "Worldwide Gross": 20.71, "Year": 2008 }, { "Film": "P.S. I Love You", "Genre": "Romance", "Lead Studio": "Independent", "Audience Score %": 82, "Profitability": 5.10, "Rating": 21, "Worldwide Gross": 153.09, "Year": 2007 }, { "Film": "Penelope", "Genre": "Comedy", "Lead Studio": "Summit", "Audience Score %": 74, "Profitability": 1.38, "Rating": 52, "Worldwide Gross": 20.74, "Year": 2008 }, { "Film": "Rachel Getting Married", "Genre": "Drama", "Lead Studio": "Independent", "Audience Score %": 61, "Profitability": 1.38, "Rating": 85, "Worldwide Gross": 16.61, "Year": 2008 }, { "Film": "Remember Me", "Genre": "Drama", "Lead Studio": "Summit", "Audience Score %": 70, "Profitability": 3.49, "Rating": 28, "Worldwide Gross": 55.86, "Year": 2010 }, { "Film": "Sex and the City", "Genre": "Comedy", "Lead Studio": "Warner Bros.", "Audience Score %": 81, "Profitability": 7.22, "Rating": 49, "Worldwide Gross": 415.25, "Year": 2008 }, { "Film": "Sex and the City 2", "Genre": "Comedy", "Lead Studio": "Warner Bros.", "Audience Score %": 49, "Profitability": 2.88, "Rating": 15, "Worldwide Gross": 288.35, "Year": 2010 }, { "Film": "She's Out of My League", "Genre": "Comedy", "Lead Studio": "Paramount", "Audience Score %": 60, "Profitability": 2.44, "Rating": 57, "Worldwide Gross": 48.81, "Year": 2010 }, { "Film": "Something Borrowed", "Genre": "Romance", "Lead Studio": "Independent", "Audience Score %": null, "Profitability": 1.71, "Rating": null, "Worldwide Gross": 60.18, "Year": 2011 }, { "Film": "Tangled", "Genre": "Animation", "Lead Studio": "Disney", "Audience Score %": 88, "Profitability": 1.36, "Rating": 89, "Worldwide Gross": 355.08, "Year": 2010 }, { "Film": "The Back-up Plan", "Genre": "Comedy", "Lead Studio": "CBS", "Audience Score %": 47, "Profitability": 2.20, "Rating": 20, "Worldwide Gross": 77.09, "Year": 2010 }, { "Film": "The Curious Case of Benjamin Button", "Genre": "Fantasy", "Lead Studio": "Warner Bros.", "Audience Score %": 81, "Profitability": 1.78, "Rating": 73, "Worldwide Gross": 285.43, "Year": 2008 }, { "Film": "The Duchess", "Genre": "Drama", "Lead Studio": "Paramount", "Audience Score %": 68, "Profitability": 3.20, "Rating": 60, "Worldwide Gross": 43.30, "Year": 2008 }, { "Film": "The Heartbreak Kid", "Genre": "Comedy", "Lead Studio": "Paramount", "Audience Score %": 41, "Profitability": 2.12, "Rating": 30, "Worldwide Gross": 127.76, "Year": 2007 }, { "Film": "The Invention of Lying", "Genre": "Comedy", "Lead Studio": "Warner Bros.", "Audience Score %": 47, "Profitability": 1.75, "Rating": 56, "Worldwide Gross": 32.4, "Year": 2009 }, { "Film": "The Proposal", "Genre": "Comedy", "Lead Studio": "Disney", "Audience Score %": 74, "Profitability": 7.86, "Rating": 43, "Worldwide Gross": 314.7, "Year": 2009 }, { "Film": "The Time Traveler's Wife", "Genre": "Drama", "Lead Studio": "Paramount", "Audience Score %": 65, "Profitability": 2.59, "Rating": 38, "Worldwide Gross": 101.33, "Year": 2009 }, { "Film": "The Twilight Saga: New Moon", "Genre": "Drama", "Lead Studio": "Summit", "Audience Score %": 78, "Profitability": 14.19, "Rating": 27, "Worldwide Gross": 709.82, "Year": 2009 }, { "Film": "The Ugly Truth", "Genre": "Comedy", "Lead Studio": "Independent", "Audience Score %": 68, "Profitability": 5.40, "Rating": 14, "Worldwide Gross": 205.3, "Year": 2009 }, { "Film": "Twilight", "Genre": "Romance", "Lead Studio": "Summit", "Audience Score %": 82, "Profitability": 10.18, "Rating": 49, "Worldwide Gross": 376.66, "Year": 2008 }, { "Film": "Twilight: Breaking Dawn", "Genre": "Romance", "Lead Studio": "Independent", "Audience Score %": 68, "Profitability": 6.38, "Rating": 26, "Worldwide Gross": 702.17, "Year": 2011 }, { "Film": "Tyler Perry's Why Did I get Married", "Genre": "Romance", "Lead Studio": "Independent", "Audience Score %": 47, "Profitability": 3.72, "Rating": 46, "Worldwide Gross": 55.862886, "Year": 2007 }, { "Film": "Valentine's Day", "Genre": "Comedy", "Lead Studio": "Warner Bros.", "Audience Score %": 54, "Profitability": 4.18, "Rating": 17, "Worldwide Gross": 217.57, "Year": 2010 }, { "Film": "Waiting For Forever", "Genre": "Romance", "Lead Studio": "Independent", "Audience Score %": 53, "Profitability": 0.005, "Rating": 6, "Worldwide Gross": 0.025, "Year": 2011 }, { "Film": "Waitress", "Genre": "Romance", "Lead Studio": "Independent", "Audience Score %": 67, "Profitability": 11.08, "Rating": 89, "Worldwide Gross": 22.17, "Year": 2007 }, { "Film": "WALL-E", "Genre": "Animation", "Lead Studio": "Disney", "Audience Score %": 89, "Profitability": 2.89, "Rating": 96, "Worldwide Gross": 521.28, "Year": 2008 }, { "Film": "Water For Elephants", "Genre": "Drama", "Lead Studio": "20th Century Fox", "Audience Score %": 72, "Profitability": 3.081421053, "Rating": 60, "Worldwide Gross": 117.094, "Year": 2011 }, { "Film": "What Happens in Vegas", "Genre": "Comedy", "Lead Studio": "Fox", "Audience Score %": 72, "Profitability": 6.26, "Rating": 28, "Worldwide Gross": 219.36, "Year": 2008 }, { "Film": "When in Rome", "Genre": "Comedy", "Lead Studio": "Disney", "Audience Score %": 44, "Profitability": 0, "Rating": 15, "Worldwide Gross": 43.04, "Year": 2010 }, { "Film": "You Will Meet a Tall Dark Stranger", "Genre": "Comedy", "Lead Studio": "Independent", "Audience Score %": 35, "Profitability": 1.21, "Rating": 43, "Worldwide Gross": 26.66, "Year": 2010 }, { "Film": "Youth in Revolt", "Genre": "Comedy", "Lead Studio": "The Weinstein Company", "Audience Score %": 52, "Profitability": 1.09, "Rating": 68, "Worldwide Gross": 19.62, "Year": 2010 }, { "Film": "Zack and Miri Make a Porno", "Genre": "Romance", "Lead Studio": "The Weinstein Company", "Audience Score %": 70, "Profitability": 1.74, "Rating": 64, "Worldwide Gross": 41.94, "Year": 2008 } ] }
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: calc(100% - 280px); height:100%; overflow: hidden; float: left; } .options-container { float: right; width: 280px; overflow: auto; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; } label { display: inline-block; min-width: 90px; margin: 6px 0; } input { padding: 4px 6px; box-sizing: border-box; margin-bottom: 6px; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
(function (global) { System.config({ transpiler: 'ts', typescriptOptions: { tsconfig: true }, meta: { 'typescript': { "exports": "ts" }, '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { 'core-js': 'npm:core-js/client/shim.min.js', 'zone': 'npm:zone.js/fesm2015/zone.min.js', 'rxjs': 'npm:rxjs/dist/bundles/rxjs.umd.min.js', '@angular/core': 'npm:@angular/core/fesm2022', '@angular/common': 'npm:@angular/common/fesm2022/common.mjs', '@angular/compiler': 'npm:@angular/compiler/fesm2022/compiler.mjs', '@angular/platform-browser': 'npm:@angular/platform-browser/fesm2022/platform-browser.mjs', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/fesm2022/platform-browser-dynamic.mjs', '@angular/common/http': 'npm:@angular/common/fesm2022/http.mjs', '@angular/router': 'npm:@angular/router/fesm2022/router.mjs', '@angular/forms': 'npm:@angular/forms/fesm2022/forms.mjs', 'jszip': 'npm:jszip/dist/jszip.min.js', 'typescript': 'npm:typescript/lib/typescript.js', 'ts': './plugin.js', 'tslib':'npm:tslib/tslib.js', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js', '@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js', '@mescius/spread-sheets-resources-ko': 'npm:@mescius/spread-sheets-resources-ko/index.js', '@mescius/spread-sheets-angular': 'npm:@mescius/spread-sheets-angular/fesm2020/mescius-spread-sheets-angular.mjs', '@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'ts' }, rxjs: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, "node_modules/@angular": { defaultExtension: 'mjs' }, "@mescius/spread-sheets-angular": { defaultExtension: 'mjs' }, '@angular/core': { defaultExtension: 'mjs', main: 'core.mjs' } } }); })(this);