类Excel处理字符串类型的数值

由于JavaScript是一个弱语言，SpreadJS基于 HTML5 标准的纯前端表格组件，依托于JavaScript 。所以字符串类型的数值参与公式计算，如下图所示：

在上图中，A1单元格是字符串，B1单元格是数值，但是C1单元格计算结果是3。
在Excel中，对A1单元格设置'1 ，B1单元格设置2 ，C1的结果为2：

有用户希望可以SpreadJS可以与Excel保持一致：即C1的计算结果为2
可以参考这篇文章：
https://gcdn.grapecity.com.cn/fo ... 88140&fromuid=59119
设置

1. GC.Spread.CalcEngine.ExcelCompatibleCalcMode = true;

复制代码

但是还有一部分用户，希望SpreadJS与Excel一致，当出现字符串类型的数值时，可以出现左上角的折角符号，同时可以进行转换。

本文将实现这一效果。


首先实现折角标识，这里有一篇文章可以参考下：
https://gcdn.grapecity.com.cn/showtopic-198411-1-1.html
其次添加感叹号，点击感叹号后出现菜单。这些内容可以写在processMouseDown中
如下代码

1.         TipCellType.prototype.processMouseDown = function (hitinfo) {
   
2.             const {x, y, value, sheet, row, col} = hitinfo;
   
3.             let imgTop = y, imgLeft = x - 20, menuTop = y + 20, menuLeft = x - 100;
   
4.             if(col===0){
   
5.                 imgLeft = x+sheet.getColumnWidth(col)
   
6.                 menuLeft = x+sheet.getColumnWidth(col)
   
7.             }
   
8.             if (typeof (value) == "string" && /^[0-9]+\.?[0-9]*$/.test(value)) {
   
9.                 if (!this._imgElement && !this._menuElement) {
   
10.                     let $imgElement = $("<div id='imgContainer'> <svg t="1700214000636" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="787" width="15" height="15"><path d="M548.355 100.749l455 731C1021.598 861.058 1000.523 899 966 899H56c-34.523 0-55.598-37.942-37.355-67.251l455-731c17.22-27.665 57.49-27.665 74.71 0zM544 361.804C544 344.24 529.897 330 512.5 330S481 344.24 481 361.804v245.392C481 624.76 495.103 639 512.5 639s31.5-14.24 31.5-31.804V361.804zM512 671c-25.405 0-46 20.819-46 46.5s20.595 46.5 46 46.5 46-20.819 46-46.5-20.595-46.5-46-46.5z" fill="#000000" p-id="788"></path></svg>\n</div>");
    
11.                     let $menuElement = $("<div id='menuList'><ul><li id='changeNum'>转换为数字</li></ul></div>")
    
12. 
    
13.                     console.log('x=', x, 'y=', y)
    
14.                     $imgElement.css("top", imgTop).css("left", imgLeft);
    
15.                     $menuElement.css("top", menuTop).css("left", menuLeft);
    
16.                     $("body").append($imgElement, null);
    
17.                     $("body").append($menuElement, null);
    
18. 
    
19.                     this._imgElement = document.getElementById('imgContainer');
    
20.                     this._menuElement = document.getElementById('menuList');
    
21. 
    
22.                     $menuElement.hide()
    
23.                     $imgElement.click(function () {
    
24.                         $menuElement.show()
    
25.                     })
    
26.                     $("#changeNum").unbind('click');
    
27.                     $("#changeNum").bind('click', function () {
    
28.                         console.log('changeNumClick')
    
29.                         sheet.setValue(row, col, parseFloat(hitinfo.value))
    
30.                         $imgElement.hide();
    
31.                         $menuElement.hide()
    
32.                     })
    
33. 
    
34.                 } else {
    
35.                     let $imgElement = $(this._imgElement)
    
36.                     let $menuElement = $(this._menuElement);
    
37. 
    
38.                     $imgElement.css("top", imgTop).css("left", imgLeft);
    
39.                     $menuElement.css("top", menuTop).css("left", menuLeft);
    
40.                     $imgElement.show()
    
41.                     $menuElement.hide()
    
42.                     $("#changeNum").unbind('click');
    
43.                     $("#changeNum").bind('click', function () {
    
44.                         console.log('changeNumClick')
    
45.                         sheet.setValue(row, col, parseFloat(hitinfo.value))
    
46.                         $menuElement.hide()
    
47.                         $imgElement.hide();
    
48.                     })
    
49.                 }
    
50.             } else {
    
51.                 if (this._imgElement) {
    
52.                     $(this._imgElement).hide();
    
53.                 }
    
54.                 if (this._menuElement) {
    
55.                     $(this._menuElement).hide();
    
56.                 }
    
57.                 GC.Spread.Sheets.CellTypes.Base.prototype.processMouseDown.apply(this, hitinfo);
    
58.             }
    
59.         };

复制代码

上述代码，创建了imgElement和menuElement，并为其设置点击事件，设置位置，样式等。
最后实现效果如下：