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

81次阅读

共计 3801 个字符，预计需要花费 10 分钟才能阅读完成。

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

=1024.01+528+9603.54

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

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

提交后的数据，在数据表格页面的效果如下：

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

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

实现方法

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

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

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

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

2、表单 input 输出

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

1
2
<input type=“text” name=“financial_money_received” id=“financial_money_received” autocomplete=“off” class=“layui-input” placeholder=“￥0.00” value=“{$info.financial_money_received}”>
<input type=“hidden” name=“temp_financial_money_received” id=“temp_financial_money_received” value=“{$info.temp_financial_money_received}”>

如上，第二行是隐藏域。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var temp_financial_money_received = $(“#temp_financial_money_received”).val();
// 实收点击事件
      $(“#financial_money_received”).click(function(){
        console.log(temp_financial_money_received);
        $(“#financial_money_received”).val(temp_financial_money_received);
      });
      // 实收
      $(“#financial_money_received”).blur(function () {
        financial_money_receivable = $(“#financial_money_receivable”).val();
        financial_money_received = $(“#financial_money_received”).val();
        temp_financial_money_received = $(“#financial_money_received”).val();
        var pattern = new RegExp(“=”);
        if(pattern.exec(financial_money_received)){
          financial_money_received = eval(financial_money_received.replace(“=”,“”));
          console.log(temp_financial_money_received);
          $(“#financial_money_received”).val(financial_money_received.toFixed(2));
          $(“#temp_financial_money_received”).val(temp_financial_money_received);
          $(‘#financial_money_received’).addClass(‘animated flash’);
          setTimeout(function(){
              $(‘#financial_money_received’).removeClass(‘flash’);
          }, 1000);
          differences();
          return;
        }
        differences();
      });

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

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

3、数据表格动态呈现

首先我们的要绑定事件，绑定方法如下：

1
2
3
4
5
6
7
8
9
           {
              field: ‘financial_money_received’,
              title: ‘ 实收金额 ’,
              event: ‘received’,
              align: ‘center’,
              totalRow:true,
              width: 120,
              sort: true
            }

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

给事件添加逻辑代码：