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

收藏 · 2020-10-29 15:55 上传

本帖最后由 DerrickJiao 于 2020-10-29 15:57 编辑

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

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

首先我们来讲名称框，名称框是用于显示当前的活动单元格。
实现效果:
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);

复制代码

下载附件可查看完整代码

		自动登录	找回密码
密码			立即注册

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

0 个回复

SpreadJS 高级认证

讲师达人

GrapeCity

悬赏达人

SpreadJS 认证