Layui表格单元个编辑事件

时间:2022-07-25
本文章向大家介绍Layui表格单元个编辑事件,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

Layui表格单元个编辑事件

开发工具与关键技术:MVC

作者:盘洪源

撰写时间:2019年6月26日星期三

在做到一个页面的时候我需要做到一个需求就是改变表格里面的字段为数量的单元格的数量然后后面的金额就会自动刷新。

我做的这个效果可能不是很好,就是因为这个我改变过后的数量一样要保存的这条数据上,数量也是一样,所以我这个效果就是改变数量后然后把数量传到后台再通过一个计算把金额计算出来再刷新表格,从而达到一个刷新金额的效果,就是这个效果可能会有点不怎么好看,就是刷新表格的时候会闪一下,这个效果有点不好。

首先就是要了解laui表格的单元格编辑事件

这是layui官网对单元格编辑的解说。

以下这个是我做的这个例子,就是通过获取到改变后单元格的值,然后通过post提交把数据传到后天,然后进行剩下的操作。

//主页面表表格单元格编辑改变事件

layuiTable.on('edit(Adjustment)', function (obj) {

                    //console.log(obj.value);
//得到修改后的值

                    //console.log(obj.field);
//当前编辑的字段名

                   // console.log(obj.data); //所在行的所有相关数据  

                    var data = obj.data;

                    var CommodityDetailID =
data.CommodityDetailID;

                    var value = obj.value;

                   
$.post("/OtherAffiairs/Adjustment/Savesession", {
CommodityDetailID: CommodityDetailID, value: value }, function (msg) {

                        if (msg.State == true)
{

                            Adjustment =
layuiTable.reload("Adjustment", {

                                url:
"/OtherAffiairs/Adjustment/SessionShop"

                                

                            })

                        }

                    })

                })

把数量改变后的值传到后台,这就简单多了,然后就通过原价剩余数量就可以得到金额了,

item.TotalMoney
= values * item.DropPrice;

然后就是将你的这条数据的数量和金额都需要改变以下,然后再进行一个表格的刷新就行。