sheetnext 0.1.8 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/DOCS.md DELETED
@@ -1,826 +0,0 @@
1
- # SheetNext API 文档
2
-
3
- > 详细的类、方法和属性说明
4
-
5
- ---
6
-
7
- ## 目录
8
-
9
- - [SheetNext Class](#SheetNext) - 工作簿管理:实例化编辑器、添加/删除/切换工作表、导入/导出 Excel、多实例支持等
10
- - [Sheet Class](#Sheet) - 工作表管理:行列管理、合并单元格、区域遍历、排序、批量插入数据、图形对象管理等
11
- - [Cell Class](#Cell) - 单元格管理:读写值/公式、样式设置、数字格式、超链接、数据验证等
12
- - [Row Class](#Row) - 行管理:行高、批量行样式、获取行内单元格、显示/隐藏等
13
- - [Col Class](#Col) - 列管理:列宽、批量列样式、获取列内单元格、显示/隐藏等
14
- - [Drawing Class](#Drawing) - 图形管理:图表、图形、图片的增删改查、设置位置和尺寸、调整图层顺序等
15
- - [Layout Class](#Layout) - 布局管理:显示/隐藏菜单栏、工具栏、公式栏、AI 聊天面板等界面元素
16
- - [Utils Class](#Utils) - 坐标转换:单元格字符串与数字坐标互转、列字母与数字互转、范围格式转换等
17
- - [UndoRedo Class](#UndoRedo) - 历史管理:撤销/重做操作
18
-
19
- ---
20
-
21
- ## SheetNext
22
-
23
- SheetNext 是主入口类,管理整个电子表格应用。
24
-
25
- ### 构造函数
26
-
27
- ```javascript
28
- const SN = new SheetNext(dom: HTMLElement, options?: object)
29
- // 下面所有示例使用此实例进行操作
30
- ```
31
-
32
- **参数:**
33
- - `dom`: 容器 DOM 元素(必需)
34
- - `options`: 可选配置对象(详见 [README 初始化配置](https://github.com/wyyazlz/sheetnext/blob/master/README.md#初始化配置))
35
-
36
- ### 核心属性
37
-
38
- | 属性 | 类型 | 说明 |
39
- |------|------|------|
40
- | `activeSheet` | `Sheet` | 当前激活的工作表(可读写) |
41
- | `sheets` | `Sheet[]` | 所有工作表数组 |
42
- | `sheetNames` | `string[]` | 工作表名称列表(只读) |
43
- | `containerDom` | `HTMLElement` | 编辑器容器元素 |
44
- | `namespace` | `string` | 实例的全局命名空间(如 `SN_0`) |
45
- | `locked` | `boolean` | 是否锁定工作表切换 |
46
-
47
- ### 工作表管理方法
48
-
49
- #### `addSheet(name?: string): Sheet`
50
- 添加新工作表,名称可选(自动生成 Sheet1、Sheet2 等)。
51
-
52
- ```javascript
53
- const newSheet = SN.addSheet("销售数据");
54
- const autoSheet = SN.addSheet(); // 自动命名
55
- ```
56
-
57
- **规则:** 名称不重复、长度1-31字符、不含特殊符号 `: / \ * ? [ ]`
58
-
59
- #### `delSheet(name: string): void`
60
- 删除指定工作表(至少保留一个可见工作表)。
61
-
62
- ```javascript
63
- SN.delSheet("Sheet2");
64
- ```
65
-
66
- #### `getSheetByName(name: string): Sheet | null`
67
- 根据名称获取工作表。
68
-
69
- ```javascript
70
- const sheet = SN.getSheetByName("Sheet1");
71
- ```
72
-
73
- #### `getVisibleSheetByIndex(index: number): Sheet`
74
- 获取可见工作表(按索引,隐藏工作表不计入)。
75
-
76
- ```javascript
77
- const firstSheet = SN.getVisibleSheetByIndex(0);
78
- ```
79
-
80
- ### 文件操作
81
-
82
- #### `import(file: File): Promise<void>`
83
- 导入 Excel 文件(.xlsx 格式)。
84
-
85
- ```javascript
86
- fileInput.addEventListener('change', (e) => {
87
- SN.import(e.target.files[0]);
88
- });
89
- ```
90
-
91
- #### `export(type: string): void`
92
- 导出电子表格(目前支持 `"XLSX"`)。
93
-
94
- ```javascript
95
- SN.export('XLSX');
96
- ```
97
-
98
- ### 其他方法
99
-
100
- #### `r(): void`
101
- 手动触发画布重新渲染(批量修改后使用)。
102
-
103
- ```javascript
104
- // 批量修改后刷新
105
- for (let i = 0; i < 100; i++) {
106
- sheet.getCell(i, 0).editVal = i;
107
- }
108
- SN.r();
109
- ```
110
-
111
- #### `getLicenseInfo()`
112
- 获取 License 信息。
113
-
114
- ```javascript
115
- const info = SN.getLicenseInfo();
116
- ```
117
-
118
- ### 多实例支持
119
-
120
- SheetNext 支持同一页面创建多个独立实例:
121
-
122
- ```javascript
123
- const editor1 = new SheetNext(document.querySelector('#container1'));
124
- const editor2 = new SheetNext(document.querySelector('#container2'));
125
-
126
- console.log(editor1.namespace); // "SN_0"
127
- console.log(editor2.namespace); // "SN_1"
128
- ```
129
-
130
- ---
131
-
132
- ## Sheet
133
-
134
- Sheet 类代表一个工作表。
135
-
136
- ### 属性
137
-
138
- | 属性 | 类型 | 说明 |
139
- |------|------|------|
140
- | `name` | `string` | 工作表名称 |
141
- | `hidden` | `boolean` | 是否隐藏 |
142
- | `merges` | `RangeNum[]` | 合并单元格区域列表 |
143
- | `defaultColWidth` | `number` | 默认列宽(像素) |
144
- | `defaultRowHeight` | `number` | 默认行高(像素) |
145
- | `showGridLines` | `boolean` | 是否显示网格线 |
146
- | `showRowColHeaders` | `boolean` | 是否显示行列标题 |
147
- | `activeCell` | `CellNum` | 当前活动单元格 |
148
- | `activeAreas` | `RangeNum[]` | 当前选中区域 |
149
- | `rows` | `Row[]` | 所有行 |
150
- | `cols` | `Col[]` | 所有列 |
151
- | `xSplit` | `number` | 冻结列数 |
152
- | `ySplit` | `number` | 冻结行数 |
153
- | `drawings` | `Drawing[]` | 图形对象列表(图表、图片等) |
154
-
155
- ### 基础方法
156
-
157
- #### `getRow(r: number): Row`
158
- 获取指定行对象。
159
-
160
- ```javascript
161
- const row = sheet.getRow(0); // 获取第一行
162
- ```
163
-
164
- #### `getCol(c: number): Col`
165
- 获取指定列对象。
166
-
167
- ```javascript
168
- const col = sheet.getCol(0); // 获取第一列(A列)
169
- ```
170
-
171
- #### `getCell(r: number, c: number): Cell`
172
- 获取指定单元格。
173
-
174
- ```javascript
175
- const cell = sheet.getCell(0, 0); // 获取 A1 单元格
176
- ```
177
-
178
- #### `getCellByStr(cellStr: string): Cell`
179
- 通过字符串引用获取单元格。
180
-
181
- ```javascript
182
- const cell = sheet.getCellByStr("A1");
183
- ```
184
-
185
- #### `rangeStrToNum(rangeStr: string): RangeNum`
186
- 将字符串范围转换为数字范围对象。
187
-
188
- ```javascript
189
- const rangeNum = sheet.rangeStrToNum("A1:C3");
190
- // 返回: {s:{r:0,c:0}, e:{r:2,c:2}}
191
- ```
192
-
193
- ### 区域遍历
194
-
195
- #### `eachArea(rangeRef: RangeRef, callback: (r, c, index) => void, reverse?: boolean): void`
196
- 遍历指定区域的每个单元格。
197
-
198
- ```javascript
199
- // 正向遍历
200
- sheet.eachArea("A1:C3", (r, c, index) => {
201
- const cell = sheet.getCell(r, c);
202
- console.log(cell.showVal);
203
- });
204
-
205
- // 反向遍历(用于删除操作,避免索引混乱)
206
- sheet.eachArea("A:A", (r, c) => {
207
- if (sheet.getCell(r, c).showVal === "") {
208
- sheet.delRows(r, 1);
209
- }
210
- }, true);
211
- ```
212
-
213
- ### 行列操作
214
-
215
- #### `showAllHidRows(): void`
216
- 显示所有隐藏的行。
217
-
218
- ```javascript
219
- sheet.showAllHidRows();
220
- ```
221
-
222
- #### `showAllHidCols(): void`
223
- 显示所有隐藏的列。
224
-
225
- ```javascript
226
- sheet.showAllHidCols();
227
- ```
228
-
229
- #### `addRows(startR: number, num: number): void`
230
- 在指定位置插入行。
231
-
232
- ```javascript
233
- sheet.addRows(5, 3); // 在第 5 行位置插入 3 行
234
- ```
235
-
236
- **注意**:多个同时调用时,应反向遍历以避免索引混乱。
237
-
238
- #### `addCols(startC: number, num: number): void`
239
- 在指定位置插入列。
240
-
241
- ```javascript
242
- sheet.addCols(2, 2); // 在第 2 列位置插入 2 列
243
- ```
244
-
245
- #### `delRows(startR: number, num: number): void`
246
- 删除指定行。
247
-
248
- ```javascript
249
- sheet.delRows(5, 3); // 删除从第 5 行开始的 3 行
250
- ```
251
-
252
- #### `delCols(startC: number, num: number): void`
253
- 删除指定列。
254
-
255
- ```javascript
256
- sheet.delCols(2, 2); // 删除从第 2 列开始的 2 列
257
- ```
258
-
259
- ### 合并单元格
260
-
261
- #### `mergeCells(rangeRef: RangeRef): void`
262
- 合并指定区域的单元格。
263
-
264
- ```javascript
265
- sheet.mergeCells("A1:C3");
266
- // 或
267
- sheet.mergeCells({s:{r:0,c:0}, e:{r:2,c:2}});
268
- ```
269
-
270
- #### `unMergeCells(cellRef: CellRef): void`
271
- 取消合并(传入区域内任意单元格引用)。
272
-
273
- ```javascript
274
- sheet.unMergeCells("A1"); // 取消包含 A1 的合并区域
275
- ```
276
-
277
- ### 排序
278
-
279
- #### `rangeSort(sortItems: SortItem[], range?: RangeRef): void`
280
- 对指定区域进行排序。
281
-
282
- **SortItem 接口:**
283
-
284
- ```typescript
285
- interface SortItem {
286
- type: "column" | "row" | "custom";
287
- order?: "asc" | "desc" | "value"; // type="custom" 时省略
288
- index: string; // 列/行标签,行从 1 开始,列从 A 开始
289
- sortData?: any[]; // order="value" 时使用,基于此数据排序
290
- cb?: (rowsArray: Cell[][], sortIndex: number) => Cell[][]; // type="custom" 时使用
291
- }
292
- ```
293
-
294
- **示例:按自定义顺序排序**
295
-
296
- ```javascript
297
- const sheet = SN.activeSheet;
298
- // 除标题外,按 C 列字母顺序排序:A V U T
299
- sheet.rangeSort(
300
- [{
301
- type: 'column',
302
- order: 'value',
303
- index: 'C',
304
- sortData: ["A", "V", "U", "T"]
305
- }],
306
- {s:{c:0,r:1}, e:{c:sheet.colCount, r:sheet.rowCount}}
307
- );
308
- ```
309
-
310
- ### 批量插入数据
311
-
312
- #### `insertTable(data: (ICellConfig | string | number)[][], startCell: CellRef, globalConfig?: object): RangeNum`
313
- 在指定位置插入表格数据。
314
-
315
- **ICellConfig 接口:**
316
-
317
- ```typescript
318
- interface ICellConfig {
319
- v?: string; // 单元格值
320
- w?: number; // 列宽(像素),仅在首行设置
321
- h?: number; // 行高(像素),仅在首列设置
322
- b?: boolean; // 是否粗体
323
- s?: number; // 字体大小
324
- fg?: string; // 背景色
325
- a?: 'l' | 'r' | 'c'; // 对齐方式(left/right/center)
326
- c?: string; // 文本颜色
327
- mr?: number; // 向右合并单元格数(不包括自身)
328
- mb?: number; // 向下合并单元格数(不包括自身)
329
- }
330
- ```
331
-
332
- **globalConfig 参数:**
333
- - `a`: 对齐方式
334
- - `border`: 是否显示边框
335
- - `w`: 默认列宽
336
- - `h`: 默认行高
337
- - `fg`: 背景色
338
- - `c`: 文本颜色
339
-
340
- **示例:生成会议记录模板**
341
-
342
- ```javascript
343
- const t = [
344
- [
345
- { v: "Meeting Minutes", s: 16, mr: 3, fg: "#eee", h: 45, b: true },
346
- { w: 160 }, "", { w: 160 }
347
- ],
348
- ["Time", "", "Location", ""],
349
- ["Host", "", "Recorder", ""],
350
- ["Expected", "", "Present", ""],
351
- ["Absent Members", { mr: 2 }, "", ""],
352
- ["Topic", { mr: 2 }, "", ""],
353
- [{ v: "Content", h: 280 }, { mr: 2 }, "", ""],
354
- [{ v: "Remarks", h: 80 }, { mr: 2 }, "", ""]
355
- ]; // 必须是矩形矩阵
356
-
357
- SN.activeSheet.insertTable(t, "A1", {
358
- border: true,
359
- a: "c",
360
- h: 35,
361
- w: 140
362
- });
363
- ```
364
-
365
- **注意**:
366
- - 对于合并单元格(`mr`/`mb`),需要添加相同数量的空字符串占位符,保持二维数组的矩形结构。
367
- - 例如:`{ mr: 2 }, "", ""`
368
-
369
- ### 图形对象
370
-
371
- #### `addDrawing(config: object): Drawing`
372
- 添加图形对象(图表、图片等)。
373
-
374
- **示例:添加图表**
375
-
376
- ```javascript
377
- SN.activeSheet.addDrawing({
378
- type: 'chart',
379
- startCell: 'B2',
380
- option: {
381
- title: { text: '销售趋势图' },
382
- legend: {
383
- data: ['销量'] // 或使用引用: `${sheet.name}!B3`
384
- },
385
- xAxis: {
386
- type: 'category',
387
- data: ['一月', '二月', '三月'] // 或引用: `${sheet.name}!C2:E2`
388
- },
389
- yAxis: { type: 'value' },
390
- series: [
391
- {
392
- name: '销量',
393
- type: 'line',
394
- data: [820, 932, 901] // 或引用: `${sheet.name}!C3:E3`
395
- }
396
- ]
397
- }
398
- });
399
- ```
400
-
401
- #### `getDrawingsByCell(cellRef: CellRef): Drawing[]`
402
- 获取指定单元格位置的所有图形对象。
403
-
404
- ```javascript
405
- const drawings = sheet.getDrawingsByCell("B2");
406
- ```
407
-
408
- #### `removeDrawing(id: string): void`
409
- 删除指定 ID 的图形对象。
410
-
411
- ```javascript
412
- sheet.removeDrawing("drawing-id");
413
- ```
414
-
415
- ---
416
-
417
- ## Cell
418
-
419
- Cell 类代表单个单元格。
420
-
421
- ### 属性
422
-
423
- | 属性 | 类型 | 说明 |
424
- |------|------|------|
425
- | `isMerged` | `boolean` | 是否为合并单元格 |
426
- | `master` | `CellNum \| null` | 如果是合并单元格,指向主单元格 |
427
- | `hyperlink` | `object` | 超链接:`{target, location, tooltip}` |
428
- | `dataValidation` | `object` | 数据验证规则 |
429
- | `editVal` | `string` | 编辑值或公式(可写) |
430
- | `calcVal` | `any` | 计算值(只读) |
431
- | `showVal` | `string` | 显示值(只读) |
432
- | `numFmt` | `string` | 数字格式 |
433
- | `font` | `object` | 字体样式 |
434
- | `alignment` | `object` | 对齐方式 |
435
- | `border` | `object` | 边框样式 |
436
- | `fill` | `object` | 填充样式 |
437
-
438
- ### dataValidation 对象结构
439
-
440
- ```typescript
441
- {
442
- type: string; // 验证类型
443
- operator: string; // 操作符
444
- allowBlank: boolean; // 是否允许空白
445
- formula1: any; // 公式1(type=list 时为数组)
446
- formula2: any; // 公式2
447
- showInputMessage: boolean; // 是否显示输入提示
448
- promptTitle: string; // 提示标题
449
- prompt: string; // 提示内容
450
- showErrorMessage: boolean; // 是否显示错误提示
451
- errorTitle: string; // 错误标题
452
- error: string; // 错误内容
453
- errorStyle: string; // 错误样式
454
- showDropDown: boolean; // 是否显示下拉框
455
- }
456
- ```
457
-
458
- ### 示例
459
-
460
- ```javascript
461
- const cell = sheet.getCell(0, 0);
462
-
463
- // 设置单元格值
464
- cell.editVal = "Hello World";
465
-
466
- // 设置公式
467
- cell.editVal = "=SUM(A1:A10)";
468
-
469
- // 读取显示值
470
- console.log(cell.showVal);
471
-
472
- // 设置样式
473
- cell.fill = { fgColor: '#FFFF00' };
474
- cell.font = { bold: true, size: 14 };
475
- ```
476
-
477
- ---
478
-
479
- ## Row
480
-
481
- Row 类代表行,提供行级别的属性和操作。
482
-
483
- ### 属性
484
-
485
- | 属性 | 类型 | 说明 |
486
- |------|------|------|
487
- | `cells` | `Cell[]` | 该行的所有单元格 |
488
- | `height` | `number` | 行高(像素) |
489
- | `hidden` | `boolean` | 是否隐藏 |
490
- | `rIndex` | `number` | 行索引 |
491
- | `numFmt` | `string` | 数字格式 |
492
- | `font` | `object` | 字体样式 |
493
- | `alignment` | `object` | 对齐方式 |
494
- | `border` | `object` | 边框样式 |
495
- | `fill` | `object` | 填充样式 |
496
-
497
- ### 方法
498
-
499
- #### `getCell(c: number): Cell`
500
- 获取该行的指定列单元格。
501
-
502
- ```javascript
503
- const row = sheet.getRow(0); // 获取第一行
504
- const cell = row.getCell(0); // 获取该行第一列的单元格
505
- ```
506
-
507
- ### 示例
508
-
509
- ```javascript
510
- const row = sheet.getRow(5);
511
-
512
- // 设置行高
513
- row.height = 30;
514
-
515
- // 隐藏行
516
- row.hidden = true;
517
-
518
- // 设置行样式
519
- row.fill = { fgColor: '#F0F0F0' };
520
- row.font = { bold: true };
521
- ```
522
-
523
- ---
524
-
525
- ## Col
526
-
527
- Col 类代表列,提供列级别的属性和操作。
528
-
529
- ### 属性
530
-
531
- | 属性 | 类型 | 说明 |
532
- |------|------|------|
533
- | `cells` | `Cell[]` | 该列的所有单元格 |
534
- | `hidden` | `boolean` | 是否隐藏 |
535
- | `width` | `number` | 列宽(像素) |
536
- | `cIndex` | `number` | 列索引 |
537
- | `numFmt` | `string` | 数字格式 |
538
- | `font` | `object` | 字体样式 |
539
- | `alignment` | `object` | 对齐方式 |
540
- | `border` | `object` | 边框样式 |
541
- | `fill` | `object` | 填充样式 |
542
-
543
- ### 方法
544
-
545
- #### `getCell(r: number): Cell`
546
- 获取该列的指定行单元格。
547
-
548
- ```javascript
549
- const col = sheet.getCol(0); // 获取第一列(A列)
550
- const cell = col.getCell(0); // 获取该列第一行的单元格
551
- ```
552
-
553
- ### 示例
554
-
555
- ```javascript
556
- const col = sheet.getCol(2); // 获取 C 列
557
-
558
- // 设置列宽
559
- col.width = 120;
560
-
561
- // 隐藏列
562
- col.hidden = true;
563
-
564
- // 设置列样式
565
- col.fill = { fgColor: '#E0E0E0' };
566
- col.alignment = { horizontal: 'center' };
567
- ```
568
-
569
- ---
570
-
571
- ## Drawing
572
-
573
- Drawing 类代表图表、图片、连接线或形状等图形对象。
574
-
575
- ### 属性
576
-
577
- | 属性 | 类型 | 说明 |
578
- |------|------|------|
579
- | `id` | `string` | 唯一标识符 |
580
- | `type` | `string` | 类型:`chart`、`image`、`connector`、`shape` |
581
- | `startCell` | `CellNum` | 起始单元格位置 |
582
- | `offsetX` | `number` | X 轴偏移(默认 0) |
583
- | `offsetY` | `number` | Y 轴偏移(默认 0) |
584
- | `width` | `number` | 宽度(默认 480) |
585
- | `height` | `number` | 高度(默认 288) |
586
- | `option` | `object` | 图表配置(type=chart 时,与 ECharts 配置相同) |
587
- | `imageBase64` | `string` | Base64 图片数据(type=image 时) |
588
- | `updRender` | `boolean` | 是否更新渲染 |
589
-
590
- ### 方法
591
-
592
- #### `updIndex(direction: string): void`
593
- 更新图层顺序。
594
-
595
- 参数值:`"up"` | `"down"` | `"top"` | `"bottom"`
596
-
597
- ```javascript
598
- drawing.updIndex("top"); // 移到最上层
599
- ```
600
-
601
- ---
602
-
603
- ## Layout
604
-
605
- Layout 类管理编辑器的界面布局,包括菜单栏、工具栏、公式栏、Sheet 标签栏和 AI 聊天面板等界面元素的显示与隐藏。
606
-
607
- ### 构造函数
608
-
609
- Layout 类由 SheetNext 自动创建,通过 `SN.Layout` 访问。
610
-
611
- ```javascript
612
- const SN = new SheetNext(dom, {
613
- menuList: [...], // 自定义菜单配置(可选)
614
- menuRight: {...} // 自定义右侧菜单(可选)
615
- });
616
- ```
617
-
618
- **注意:** `menuList` 和 `menuRight` 只能在初始化时传入,后续无法修改。
619
-
620
- ### 属性
621
-
622
- | 属性 | 类型 | 说明 |
623
- |------|------|------|
624
- | `showMenuBar` | `boolean` | 是否显示菜单栏(可读写) |
625
- | `showToolbar` | `boolean` | 是否显示工具栏(可读写) |
626
- | `showFormulaBar` | `boolean` | 是否显示公式栏(可读写) |
627
- | `showSheetTabBar` | `boolean` | 是否显示 Sheet 标签栏(可读写) |
628
- | `showAIChat` | `boolean` | 是否显示 AI 聊天面板(可读写) |
629
- | `showAIChatWindow` | `boolean` | 是否显示 AI 聊天小窗口模式(可读写) |
630
- | `isSmallWindow` | `boolean` | 当前是否为小窗口模式(宽度 < 900px)(只读) |
631
- | `menuConfig` | `object` | 菜单配置对象(只读) |
632
-
633
- ### 菜单配置(初始化时)
634
-
635
- #### menuList 配置
636
-
637
- `menuList` 用于自定义顶部菜单栏,只能在初始化时传入。
638
-
639
- **MenuList 结构:**
640
-
641
- ```typescript
642
- interface MenuItem {
643
- label: string; // 菜单项标签
644
- handler?: () => void; // 点击处理函数
645
- disabled?: boolean; // 是否禁用
646
- tip?: string; // 提示信息(右侧显示)
647
- divider?: boolean; // 是否为分隔线
648
- }
649
-
650
- interface Menu {
651
- label: string; // 菜单标签
652
- items: MenuItem[]; // 菜单项列表
653
- }
654
-
655
- type MenuList = Menu[];
656
- ```
657
-
658
- **完整示例:**
659
-
660
- ```javascript
661
- const SN = new SheetNext(document.querySelector('#container'), {
662
- // 配置后覆盖原配置
663
- menuList: [
664
- {
665
- label: '文件',
666
- items: [
667
- { label: '导入 XLSX', handler: () => SN.containerDom.querySelector('.sn-upload').click() },
668
- { divider: true },
669
- { label: '导出 XLSX', handler: () => SN.export('XLSX') }
670
- ]
671
- },
672
- {
673
- label: '插入',
674
- items: [
675
- { label: '插入行', handler: () => SN.AI.chatInput('在表最后新插入10行') },
676
- { label: '插入列', handler: () => SN.AI.chatInput('在表最后新插入10列') },
677
- { label: '超链接', handler: () => SN.AI.chatInput('在A1插入超链接,文本:SN 地址:https://www.sheetnext.com') },
678
- { label: '图片', disabled: true, tip: '待开放' },
679
- { label: '图表', handler: () => SN.AI.chatInput('根据表中数据生成柱状图') },
680
- { label: '图形', disabled: true, tip: '待开放' },
681
- { label: '数据透视表', disabled: true, tip: '待开放' },
682
- { label: '公式', handler: () => SN.AI.chatInput('在A1编写公式,求F18:G21的平均值') }
683
- ]
684
- },
685
- {
686
- label: '视图',
687
- items: [
688
- { label: '显示行列标', handler: () => { SN.activeSheet.showRowColHeaders = true; SN.r(); } },
689
- { label: '隐藏行列标', handler: () => { SN.activeSheet.showRowColHeaders = false; SN.r(); } },
690
- { label: '显示网格线', handler: () => { SN.activeSheet.showGridLines = true; SN.r(); } },
691
- { label: '隐藏网格线', handler: () => { SN.activeSheet.showGridLines = false; SN.r(); } },
692
- { label: '冻结首行', handler: () => { SN.activeSheet.ySplit = 1; SN.r(); } },
693
- { label: '冻结首列', handler: () => { SN.activeSheet.xSplit = 1; SN.r(); } }
694
- ]
695
- },
696
- {
697
- label: '更多',
698
- items: [
699
- { label: 'SheetNext Pro', handler: () => window.open('https://www.sheetnext.com/pro') },
700
- { label: '开发文档', handler: () => window.open('https://www.github.com/wyyazlz/sheetnext') },
701
- ]
702
- }
703
- ]
704
- });
705
- ```
706
-
707
- **默认菜单:**
708
-
709
- 如果不传入 `menuList`,将使用默认菜单配置(包含:文件、插入、视图、更多)。
710
-
711
- #### menuRight 配置
712
-
713
- `menuRight` 用于自定义菜单栏右侧区域,只能在初始化时传入。
714
-
715
- **MenuRight 结构:**
716
-
717
- ```typescript
718
- interface MenuRight {
719
- html: string; // HTML 内容
720
- handler?: () => void; // 点击处理函数
721
- }
722
- ```
723
-
724
- **示例:**
725
-
726
- ```javascript
727
- const SN = new SheetNext(document.querySelector('#container'), {
728
- menuRight: {
729
- html: '<span style="color: #666;">我的应用 v1.0</span>',
730
- handler: () => {
731
- alert('欢迎使用!');
732
- }
733
- }
734
- });
735
- ```
736
-
737
- ---
738
-
739
- ## Utils
740
-
741
- Utils 类提供坐标转换等实用方法。
742
-
743
- ### 方法
744
-
745
- #### `numToChar(num: number): string`
746
- 数字转字母列标。
747
-
748
- ```javascript
749
- SN.Utils.numToChar(0); // "A"
750
- SN.Utils.numToChar(25); // "Z"
751
- SN.Utils.numToChar(26); // "AA"
752
- ```
753
-
754
- #### `charToNum(char: string): number`
755
- 字母列标转数字。
756
-
757
- ```javascript
758
- SN.Utils.charToNum("A"); // 0
759
- SN.Utils.charToNum("Z"); // 25
760
- SN.Utils.charToNum("AA"); // 26
761
- ```
762
-
763
- #### `rangeNumToStr(rangeNum: RangeNum): string`
764
- 范围对象转字符串。
765
-
766
- ```javascript
767
- SN.Utils.rangeNumToStr({s:{r:0,c:0}, e:{r:2,c:2}}); // "A1:C3"
768
- ```
769
-
770
- #### `cellStrToNum(cellStr: string): CellNum`
771
- 单元格字符串转数字对象。
772
-
773
- ```javascript
774
- SN.Utils.cellStrToNum("A1"); // {r:0, c:0}
775
- ```
776
-
777
- #### `cellNumToStr(cellNum: CellNum): string`
778
- 单元格数字对象转字符串。
779
-
780
- ```javascript
781
- SN.Utils.cellNumToStr({r:0, c:0}); // "A1"
782
- ```
783
-
784
- ---
785
-
786
- ## UndoRedoClass
787
-
788
- 管理操作历史,支持撤销和重做功能。
789
-
790
- ### 方法
791
-
792
- #### `undo(): void`
793
- 撤销上一步操作。
794
-
795
- ```javascript
796
- SN.UndoRedo.undo();
797
- ```
798
-
799
- #### `redo(): void`
800
- 重做上一步操作。
801
-
802
- ```javascript
803
- SN.UndoRedo.redo();
804
- ```
805
-
806
- ### 示例
807
-
808
- ```javascript
809
- // 执行一些操作
810
- sheet.getCell(0, 0).editVal = "Hello";
811
- sheet.mergeCells("A1:B1");
812
-
813
- // 撤销合并操作
814
- SN.UndoRedo.undo();
815
-
816
- // 撤销编辑操作
817
- SN.UndoRedo.undo();
818
-
819
- // 重做编辑操作
820
- SN.UndoRedo.redo();
821
- ```
822
-
823
- **注意**:
824
- - 撤销/重做会自动记录大部分用户操作
825
- - 通过 API 修改的内容也会被记录
826
- - 历史记录栈有大小限制,过旧的操作会被清除