@@ -135,148 +135,90 @@ Get the formula manager
135135 getFormulaManager: () => FormulaManager
136136```
137137
138+
138139## Events
139140
140- Sheet event list, you can listen to the required events according to the actual needs, to achieve customized business .
141+ The list of table events , you can listen to the events you need to implement the custom business according to actual needs .
141142### Usage
142- Specific usage :
143+ VTableSheet provides a unified event system, supporting two types of event listening :
143144
144- ```
145- import { WorkSheetEventType } from '@visactor/vtable-sheet';
146-
147- // Use WorkSheet instance to listen to events
148- worksheet.on(WorkSheetEventType.CELL_CLICK, (args) => {
149- console.log('Cell selected:', args);
150- });
151-
152- ```
145+ 1 . Listen to VTable table events
146+ Use the ` onTableEvent ` method to listen to the events of the underlying VTable instance.
153147
154- Supported event types :
148+ This method listens to the events of the VTable instance, the type and the VTable supported type are completely unified, and the sheetKey property is attached to the VTable event return parameters, which is convenient for business processing. :
155149
156- ```
157- export enum WorkSheetEventType {
158- // Cell event
159- CELL_CLICK = 'cell-click',
160- CELL_VALUE_CHANGED = 'cell-value-changed',
150+ ``` typescript
151+ import * as VTable from ' @visactor/vtable' ;
161152
162- // Selection range event
163- SELECTION_CHANGED = 'selection-changed',
164- SELECTION_END = 'selection-end'
165- }
166- ```
167- ** If you want to listen to the events of the VTable component, you can get the instance of VTable through the interface, and then listen to the events through the instance**
168- Specific usage:
169- ```
170- const tableInstance = sheetInstance.activeWorkSheet.tableInstance;// Get the instance of the active sheet
171- tableInstance.on('mousedown_cell', (args) => console.log(CLICK_CELL, args));
153+ // Listen to the cell click event
154+ sheetInstance .onTableEvent (VTable .TABLE_EVENT_TYPE .CLICK_CELL , (event ) => {
155+ console .log (' The cell was clicked' , event .sheetKey , event .row , event .col );
156+ });
157+
158+ // Listen to the cell value change event
159+ sheetInstance .onTableEvent (VTable .TABLE_EVENT_TYPE .CHANGE_CELL_VALUE , (event ) => {
160+ console .log (' The cell value was changed:' , event .value , ' Position:' , event .row , event .col );
161+ });
172162```
173163
174- ### CELL_CLICK
164+ 2 . Listen to the spreadsheet level events
165+ Use the ` on ` method to listen to the events of the spreadsheet level:
175166
176- Cell click event
167+ ``` typescript
168+ import { VTableSheetEventType } from ' @visactor/vtable-sheet' ;
177169
178- Event return parameters:
170+ // Listen to the formula calculation event
171+ sheetInstance .on (VTableSheetEventType .FORMULA_ADDED , (event ) => {
172+ console .log (' The formula was added' , event .sheetKey );
173+ });
179174
180- ```
181- {
182- /** Row index */
183- row: number;
184- /** Column index */
185- col: number;
186- /** Cell content */
187- value?: CellValue;
188- /** Cell DOM element */
189- cellElement?: HTMLElement;
190- /** Original event object */
191- originalEvent?: MouseEvent | KeyboardEvent;
192- }
175+ // Listen to the sheet switch event
176+ sheetInstance .on (VTableSheetEventType .SHEET_ACTIVATED , (event ) => {
177+ console .log (' The sheet was activated' , event .sheetKey , event .sheetTitle );
178+ });
193179```
194180
195- ### CELL_VALUE_CHANGED
196181
197- Cell value change event
182+ ### Complete event type enumeration
198183
199- Event return parameters:
184+ ``` typescript
185+ export enum VTableSheetEventType {
200186
201- ```
202- {
203- /** Row index */
204- row: number;
205- /** Column index */
206- col: number;
207- /** New value */
208- newValue: CellValue;
209- /** Old value */
210- oldValue: CellValue;
211- /** Cell DOM element */
212- cellElement?: HTMLElement;
213- /** Whether caused by user operation */
214- isUserAction?: boolean;
215- /** Whether caused by formula calculation */
216- isFormulaCalculation?: boolean;
217- }
218- ```
187+ // ===== 数据操作事件 =====
188+ DATA_LOADED = ' data_loaded' ,
189+
190+ // ===== 工作表生命周期事件 =====
191+ ACTIVATED = ' activated' ,
192+
193+ // ===== 电子表格生命周期 =====
194+ SPREADSHEET_READY = ' spreadsheet_ready' ,
195+ SPREADSHEET_DESTROYED = ' spreadsheet_destroyed' ,
196+ SPREADSHEET_RESIZED = ' spreadsheet_resized' ,
197+
198+ // ===== Sheet 管理事件 =====
199+ SHEET_ADDED = ' sheet_added' ,
200+ SHEET_REMOVED = ' sheet_removed' ,
201+ SHEET_RENAMED = ' sheet_renamed' ,
202+ SHEET_ACTIVATED = ' sheet_activated' ,
203+ SHEET_DEACTIVATED = ' sheet_deactivated' ,
204+ SHEET_MOVED = ' sheet_moved' ,
205+ SHEET_VISIBILITY_CHANGED = ' sheet_visibility_changed' ,
206+
207+ // ===== 导入导出事件 =====
208+ IMPORT_START = ' import_start' ,
209+ IMPORT_COMPLETED = ' import_completed' ,
210+ IMPORT_ERROR = ' import_error' ,
211+ EXPORT_START = ' export_start' ,
212+ EXPORT_COMPLETED = ' export_completed' ,
213+ EXPORT_ERROR = ' export_error' ,
219214
220- ### SELECTION_CHANGED
221-
222- Selection range change event
223-
224- Event return parameters:
225-
226- ```
227- {
228- /** Selection range */
229- ranges?: Array<{
230- start: {
231- row: number;
232- col: number;
233- };
234- end: {
235- row: number;
236- col: number;
237- };
238- }>;
239- /** Selected cell data */
240- cells?: Array<
241- Array<{
242- row: number;
243- col: number;
244- value?: CellValue;
245- }>
246- >;
247- /** Original event object */
248- originalEvent?: MouseEvent | KeyboardEvent;
249- }
250- ```
251215
252- ### SELECTION_END
253-
254- Selection end event (triggered when drag selection is completed)
255-
256- Event return parameters:
257-
258- ```
259- {
260- /** Selection range */
261- ranges?: Array<{
262- start: {
263- row: number;
264- col: number;
265- };
266- end: {
267- row: number;
268- col: number;
269- };
270- }>;
271- /** Selected cell data */
272- cells?: Array<
273- Array<{
274- row: number;
275- col: number;
276- value?: CellValue;
277- }>
278- >;
279- /** Original event object */
280- originalEvent?: MouseEvent | KeyboardEvent;
216+ // ===== 公式相关事件 =====
217+ FORMULA_CALCULATE_START = ' formula_calculate_start' ,
218+ FORMULA_CALCULATE_END = ' formula_calculate_end' ,
219+ FORMULA_ERROR = ' formula_error' ,
220+ FORMULA_DEPENDENCY_CHANGED = ' formula_dependency_changed' ,
221+ FORMULA_ADDED = ' formula_added' ,
222+ FORMULA_REMOVED = ' formula_removed' ,
281223}
282224```
0 commit comments