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

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


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

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

1. spread.options.allowInvalidFormula = true;

复制代码

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

1. sheet.setActiveCell(sheetSelection.row, sheetSelection.col);
   
2. sheet.setValue(sheetSelection.row, sheetSelection.col, "=SUM()")

复制代码

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

1. // 通过索引控制光标位置
   
2. function setCaretCharIndex(containerEl, index) {
   
3.     var node;
   
4.     var treeWalker = document.createTreeWalker(containerEl, NodeFilter.SHOW_TEXT, function (node) {
   
5.         var nodeRange = document.createRange();
   
6.         nodeRange.selectNodeContents(node);
   
7. 
   
8.         if (index > nodeRange.endOffset) {
   
9.             index -= nodeRange.endOffset;
   
10.             return NodeFilter.FILTER_REJECT;
    
11.         } else {
    
12.             return NodeFilter.FILTER_ACCEPT;
    
13.         }
    
14.     });
    
15. 
    
16.     while (treeWalker.nextNode()) {
    
17.         node = treeWalker.currentNode;
    
18.         break;
    
19.     }
    
20. 
    
21.     var range = document.createRange();
    
22.     var sel = window.getSelection();
    
23.     range.setStart(node, index);
    
24.     range.collapse(true);
    
25.     sel.removeAllRanges();
    
26.     sel.addRange(range);
    
27.     containerEl.focus();
    
28. }

复制代码