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

收藏 · 2023-11-29 11:01 上传

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

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

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

GC.Spread.CalcEngine.ExcelCompatibleCalcMode = true;

复制代码

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

本文将实现这一效果。

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

TipCellType.prototype.processMouseDown = function (hitinfo) {
const {x, y, value, sheet, row, col} = hitinfo;
let imgTop = y, imgLeft = x - 20, menuTop = y + 20, menuLeft = x - 100;
if(col===0){
imgLeft = x+sheet.getColumnWidth(col)
menuLeft = x+sheet.getColumnWidth(col)
}
if (typeof (value) == "string" && /^[0-9]+\.?[0-9]*$/.test(value)) {
if (!this._imgElement && !this._menuElement) {
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>");
let $menuElement = $("<div id='menuList'><ul><li id='changeNum'>转换为数字</li></ul></div>")
console.log('x=', x, 'y=', y)
$imgElement.css("top", imgTop).css("left", imgLeft);
$menuElement.css("top", menuTop).css("left", menuLeft);
$("body").append($imgElement, null);
$("body").append($menuElement, null);
this._imgElement = document.getElementById('imgContainer');
this._menuElement = document.getElementById('menuList');
$menuElement.hide()
$imgElement.click(function () {
$menuElement.show()
})
$("#changeNum").unbind('click');
$("#changeNum").bind('click', function () {
console.log('changeNumClick')
sheet.setValue(row, col, parseFloat(hitinfo.value))
$imgElement.hide();
$menuElement.hide()
})
} else {
let $imgElement = $(this._imgElement)
let $menuElement = $(this._menuElement);
$imgElement.css("top", imgTop).css("left", imgLeft);
$menuElement.css("top", menuTop).css("left", menuLeft);
$imgElement.show()
$menuElement.hide()
$("#changeNum").unbind('click');
$("#changeNum").bind('click', function () {
console.log('changeNumClick')
sheet.setValue(row, col, parseFloat(hitinfo.value))
$menuElement.hide()
$imgElement.hide();
})
}
} else {
if (this._imgElement) {
$(this._imgElement).hide();
}
if (this._menuElement) {
$(this._menuElement).hide();
}
GC.Spread.Sheets.CellTypes.Base.prototype.processMouseDown.apply(this, hitinfo);
}
};

复制代码

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

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

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

0 个回复

SpreadJS 认证

SpreadJS 高级认证