SpreadJS 公式栏以及名称框的实现

背景：有很多新朋友拿到SpreadJS之后打开之后会有这样一个疑惑：上面的工具栏去哪了？上面的公式栏去哪了？怎么和我看的在线表格编辑器不一样呢？相信你也有过这样的疑问。
其实，咱们的在线表格编辑器是用SpreadJS进行二次开发出来的产品，两者都是具有相同的能力。只不过SpreadJS是以接口的形式暴露给开发者进行开发，而在线表格编辑器是以源码的方式进行出售。因此，在线表格编辑器的工具栏、公示栏也是基于SpreadJS进行二次开发呈现的。

那么，这个帖子就来教大家如何实现简单的名称框和公式栏


首先我们来讲名称框，名称框是用于显示当前的活动单元格。
实现效果:
1、当我们点击某一个单元格的时候名称框显示对应的
2、当我们在名称框输入“A1”，活动单元格会跳转到A1单元格上

实现原理是利用rangeToFormula将点击的行号列号转换为名称。

实现该功能需要配合三个事件的监听，分别为：
CellClick事件，处理点击单元格时名称框显对应的名称

1.     spread.bind(GC.Spread.Sheets.Events.CellClick, function (sender, args) {
   
2.         var sheet = spread.getActiveSheet();
   
3.         var range = new GC.Spread.Sheets.Range(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex(), 1,1)
   
4.         var value = GC.Spread.Sheets.CalcEngine.rangeToFormula(range, 0, 0, GC.Spread.Sheets.CalcEngine.RangeReferenceRelative.allRelative);
   
5.         document.getElementById("cellBox").innerHTML = value ;
   
6.     });

复制代码

ActiveSheetChanged事件，当表单切换后单元格能正确显示

1.     spread.bind(GC.Spread.Sheets.Events.ActiveSheetChanged, function (sender, args) {
   
2.         var sheet = spread.getActiveSheet();
   
3.         var range = new GC.Spread.Sheets.Range(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex(), 1,1)
   
4.         var value = GC.Spread.Sheets.CalcEngine.rangeToFormula(range, 0, 0, GC.Spread.Sheets.CalcEngine.RangeReferenceRelative.allRelative);
   
5.         document.getElementById("cellBox").innerHTML = value ;
   
6.     });

复制代码

SelectionChanged事件，当使用键盘切换活动单元格时也能正确响应单元格名称

1.     spread.bind(GC.Spread.Sheets.Events.SelectionChanged, function (e, info) {
   
2.         var sheet = spread.getActiveSheet();
   
3.         var range = new GC.Spread.Sheets.Range(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex(), 1,1)
   
4.         var value = GC.Spread.Sheets.CalcEngine.rangeToFormula(range, 0, 0, GC.Spread.Sheets.CalcEngine.RangeReferenceRelative.allRelative);
   
5.         document.getElementById("cellBox").innerHTML = value ;
   
6.     });

复制代码

那么如何实现单元格跳转呢，这时候需要利用js的onkeydown事件，关键代码如下：

1. b.onkeydown = function(eve){
   
2.         var e = eve || window.event;
   
3.         if(e.keyCode==13){
   
4.             e.preventDefault();         
   
5.             var sheet = spread.getActiveSheet();
   
6.             var a = document.getElementById("cellBox").innerText;
   
7.             let cellRef = GC.Spread.Sheets.CalcEngine.formulaToRanges(sheet,a);
   
8.             var row = cellRef[0].ranges[0].row;
   
9.             var col = cellRef[0].ranges[0].col;
   
10.             sheet.setActiveCell(row,col);
    
11.         }
    
12.     }

复制代码

最后一部分是公式栏的实现，利用FormulaTextBox即可完成，直接上关键代码

1. var fbx = new spreadNS.FormulaTextBox.FormulaTextBox(document.getElementById('formulaBar'));
   
2.     fbx.workbook(spread);

复制代码

下载附件可查看完整代码