开发系统过程中，财务对表单input元素提出了自己的需求，要求支持Excel形式的数学计算式，如：
=1024.01+528+9603.54
输入上方的运算式后，我们的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’就是绑定的事件。
给事件添加逻辑代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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 }); } } }); |
弹出窗口，显示运算符数据即可。
以上，就是全部的分享内容。
原创文章，作者：蓝洛水深，如若转载，请注明出处：https://blog.lanluo.cn/10752
微信扫一扫 
支付宝扫一扫 
