在之前我使用的for循环和layui的重载对数据进行计算,但是这样的话是对所有数据都进行重载,相当于电脑而且就会慢一点,而且会使表格抖动,对用户的体验感较差。所有尝试着新方法。
我现在使用的这个方法就是避开了layui的重载,直接改变数据表格的数据,并且不用tool的监听事件了,直接使用edit监听事件中的修改方法update进行修改,而update修改后的数据为缓存数据,可以直接保存进重载后的数据中,方便后面保存

要求,当我输入数量的时候,金额会根据数量和单价的乘积而改变。而且不可以输入””和字母
因为使用的是layui数据表格插件,所以会使用到layui中的edit监听事件

图中的obj.data是修改的当前行的所有数据,trim是一个去空格的方法,isNaN用于判断用户输入的是否是数字
在这里$.(this).val()是获取到用户当前修改的单元格的数据,但是这个方法只是改变了页面中的数据,并没有改变缓存中的数据
而且$.(this)这个就是LoanQuantity获取的这个字段的数据,所以在使用update方法的时候就需要将改行的这个字段重置一下
前面的都是对用户输入的做判断,判断是否能进行计算
然后就是对金额进行处理了

如果用户输入的数据通过了前面的判断,那么就开始计算,然后直接使用后update进行改变,是不是很方便,比起之前的重载就不会那么麻烦了
代码:
layuiTable.on('edit(tabInsertLoan)', function (obj) {
var editData = obj.data
var A = $.trim(editData.LoanQuantity);
if (A == "") {
$(this).val(0);
layer.msg("数量输入的格式有误,只能输入数字", { icon: 0, title: "提示", skin: "layui-layer-molv", time: 1500 });
obj.update({
LoanMoney: 0,
LoanQuantity:0
});
return;
}
else if (!isNaN(editData.LoanQuantity)&& editData.LoanQuantity < 1 && editData.LoanQuantity != 0)
{
$(this).val(0);
layer.msg("数量输入的格式有误,只能输入数字", { icon: 0, title: "提示", skin: "layui-layer-molv", time: 1500 });
obj.update({
LoanMoney: 0,
LoanQuantity: 0
});
tabInsertLoan.reload();
return;
}
else {
var Money = editData.SalePrice *editData.LoanQuantity;
obj.update({
LoanMoney: Money
});
}
});
本文介绍了如何在layui数据表格中避免使用重载来实时计算表格数据,以提高性能并减少用户体验问题。通过监听edit事件,直接更新表格数据并利用update方法保存缓存数据,实现了在用户输入数量时自动计算金额的功能。同时,对用户输入进行了有效性检查,确保只能输入数字。这种方法简化了之前依赖重载的复杂流程。
2693

被折叠的 条评论
为什么被折叠?



