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

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

=1024.01+528+9603.54

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

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

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

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

实现方法

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

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

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

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

2、表单input输出

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

<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中声明变量并处理逻辑：

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();
      });

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、数据表格动态呈现

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

           {
              field: 'financial_money_received',
              title: '实收金额',
              event: 'received',
              align: 'center',
              totalRow:true,
              width: 120,
              sort: true
            }

{

field: 'financial_money_received',

title: '实收金额',

event: 'received',

align: 'center',

totalRow:true,

width: 120,

sort: true

}

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

给事件添加逻辑代码：

table.on('edit(test)', function(obj){ //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
  if (obj.event === 'received') {
          if(data.temp_financial_money_received){
            layer.alert(data.temp_financial_money_received,{
              shade: 0.1,
              shadeClose: true,
              title :'实收金额（点击空白处关闭）',
              skin: 'layui-layer-lan',
              closeBtn: 2,
              icon: 1
            });
          }
        }
});