Layui数据表格不使用重载计算下个表格

本文介绍了如何在layui数据表格中避免使用重载来实时计算表格数据,以提高性能并减少用户体验问题。通过监听edit事件,直接更新表格数据并利用update方法保存缓存数据,实现了在用户输入数量时自动计算金额的功能。同时,对用户输入进行了有效性检查,确保只能输入数字。这种方法简化了之前依赖重载的复杂流程。
摘要由CSDN通过智能技术生成

在之前我使用的for循环和layui的重载对数据进行计算,但是这样的话是对所有数据都进行重载,相当于电脑而且就会慢一点,而且会使表格抖动,对用户的体验感较差。所有尝试着新方法。

我现在使用的这个方法就是避开了layui的重载,直接改变数据表格的数据,并且不用tool的监听事件了,直接使用edit监听事件中的修改方法update进行修改,而update修改后的数据为缓存数据,可以直接保存进重载后的数据中,方便后面保存
在这里插入图片描述

要求,当我输入数量的时候,金额会根据数量和单价的乘积而改变。而且不可以输入””和字母

因为使用的是layui数据表格插件,所以会使用到layui中的edit监听事件

在这里插入图片描述

图中的obj.data是修改的当前行的所有数据,trim是一个去空格的方法,isNaN用于判断用户输入的是否是数字

在这里$.(this).val()是获取到用户当前修改的单元格的数据,但是这个方法只是改变了页面中的数据,并没有改变缓存中的数据

而且$.(this)这个就是LoanQuantity获取的这个字段的数据,所以在使用update方法的时候就需要将改行的这个字段重置一下

前面的都是对用户输入的做判断,判断是否能进行计算

然后就是对金额进行处理了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值