开发系统过程中,财务对表单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