如何在SpreadJS中实现一键插入公式

收藏 · 2023-12-29 11:21 上传

背景
大家对于在线表格编辑器和Excel的自动求和按钮赞美有加，但是很多用户希望在SpreadJS上也能实现这样的功能，方便他们的用户能够很方便的使用它们的系统。
image.png963473205.png

解释
如果不借助designer的话，则需要借助原生js来进行实现，而我们的每个单元格实际上可以通过类似dom元素进行获取，获取之后我们可以借助window.getSelection等原生js来控制光标的位置。

解决方法
为了完整写入“=SUM()”这个公式，我们首先需要把允许非法公式打开

复制代码

接着我们往单元格中填入的必须是value而非formula，只有用户输入结束后才能视作formula

复制代码

控制光标位置：
实际上每个dom元素会被js视作一颗树，dom元素中的内容则是这棵树上的节点，因此我们需要解析这棵树并将光标放在括号内

// 通过索引控制光标位置
function setCaretCharIndex(containerEl, index) {
var node;
var treeWalker = document.createTreeWalker(containerEl, NodeFilter.SHOW_TEXT, function (node) {
var nodeRange = document.createRange();
nodeRange.selectNodeContents(node);
if (index > nodeRange.endOffset) {
index -= nodeRange.endOffset;
return NodeFilter.FILTER_REJECT;
} else {
return NodeFilter.FILTER_ACCEPT;
}
});
while (treeWalker.nextNode()) {
node = treeWalker.currentNode;
break;
}
var range = document.createRange();
var sel = window.getSelection();
range.setStart(node, index);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
containerEl.focus();
}

复制代码

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

0 个回复