通过代码实现公式栏

问题：如何实现公式栏和名称框？

背景：

有用户拿到SpreadJS之后打开之后会有这样一个疑惑：上面的工具栏去哪了？上面的公式栏去哪了？怎么和我看的在线表格编辑器不一样呢？相信你也有过这样的疑问。

在线表格编辑器是用SpreadJS进行二次开发出来的产品，两者都是具有相同的能力。只不过SpreadJS是以接口的形式暴露给开发者进行开发，而在线表格编辑器是以源码的方式进行出售。因此，在线表格编辑器的工具栏、公示栏也是基于SpreadJS进行二次开发呈现的。

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

名称框

首先我们来讲名称框，名称框是用于显示当前的活动单元格。

实现效果:

1、当我们点击某一个单元格的时候名称框显示对应的

2、当我们在名称框输入“A1”，活动单元格会跳转到A1单元格上

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

实现该功能需要配合三个事件的监听，分别为：

CellClick事件，处理点击单元格时名称框显对应的名称

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

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

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

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

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

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

b.onkeydown = function (eve) {
  var e = eve || window.event;
  if (e.keyCode == 13) {
    e.preventDefault();
    var sheet = spread.getActiveSheet();
    var a = document.getElementById("cellBox").innerText;
    let cellRef = GC.Spread.Sheets.CalcEngine.formulaToRanges(sheet, a);
    var row = cellRef[0].ranges[0].row;
    var col = cellRef[0].ranges[0].col;
    sheet.setActiveCell(row, col);
  }
};

公示栏

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

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

完整代码请参考该链接中的内容。

作者: GrapeCity China | 审核：ElliaDuan | 更新时间：2023.11.29