让layui表单input元素支持填写数学运算式并自动计算

开发系统过程中,财务对表单input元素提出了自己的需求,要求支持Excel形式的数学计算式,如:

=1024.01+528+9603.54

输入上方的运算式后,我们的input元素输出结果效果如下所示。

让layui表单input元素支持填写数学运算式并自动计算
粘贴运算式后自动计算结果,点击后重新展示运算式

提交后的数据,在数据表格页面的效果如下:

让layui表单input元素支持填写数学运算式并自动计算
数据表格中点击这个有运算式的数据,弹出运算式

实际效果还不错,也得到了财务同事的认可,这里分享出来。

实现方法

实现的方式很简单,只要弄懂逻辑之后,会觉得非常浅显。

1、数据段增加表达式作为存储

这么做的好处是,你不至于通过很复杂的转换,或者在某处调用数据时需要进行额外操作。

通过创建表达式,我们将表达式存储在数据中,读取即可,非常方便,唯一的问题就是怎么呈现了。

2、表单input输出

通过你熟知的方式,将数据渲染到前端页面,并且创建一个隐藏域用于提交这个数据的更新。

如上,第二行是隐藏域。

在JS中声明变量并处理逻辑:

我们需要两个事件,一个事件是点击进来,呈现这个运算式,一个事件是丢失后运算这个运算符。

OK,上方多余代码自行删除,逻辑上稍作整理即可调整。

3、数据表格动态呈现

首先我们的要绑定事件,绑定方法如下:

event: ‘received’就是绑定的事件。

给事件添加逻辑代码:

弹出窗口,显示运算符数据即可。

以上,就是全部的分享内容。

原创文章,作者:蓝洛水深,如若转载,请注明出处:https://blog.lanluo.cn/10752

(3)
蓝洛水深的头像蓝洛水深管理员
上一篇 2022年2月22日 下午2:37
下一篇 2022年3月2日 下午9:15

相关推荐

发表回复

登录后才能评论
联系QQ