layui单元格编辑监听

开发工具与关键技术：MVC

作者：Mr_恺

撰写时间：2019年7月26日

 

Layui数据表格有一个edit属性，只要我们在表格初始化把这个属性设置好了就能进行编辑了，修改数据

关键：edit: 'text' 把设置上

   { field: 'StockQuantity', title: '数量', align: 'center', edit: 'text', rowspan: 2, totalRow: true,},

就可以编辑啦

 

             我们想改变了数量，成本合计也要跟着改变，这样子的话，我们就要视图获取它当前编辑的值去控制器进行操作，因为 成本合计 = 进货价 * 数量

 

这样子的话我们就要用到单元格编辑监听事件：

视图获取当前编辑的值传到控制器：

//单元格被编辑，且值发生改变时触发

                layuiTable.on('edit(tabPurchasingstock)', function (obj) { //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"

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

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

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

                    var field = obj.field;

                    if (field == 'StockQuantity') {

                        var Moditynymber = obj.data.Moditynymber;//商品编码

                        var StockQuantity = obj.value;//进货数量

                    }

//提交到控制器

                    $.post("/EverydayAffair/Purchasingstock/Updatecaigoushu", {

                        Moditynymber: Moditynymber,

                        StockQuantity: StockQuantity,                     

                    }, function (data) {

                        if (data != "") {

                            tabPurchasingstock = layuiTable.reload('tabPurchasingstock', {

                                url: "/EverydayAffair/Purchasingstock/SelectSession",

                            })

                        } else {

                            layer.alert(data.Text, { icon: 0, title: "三易通" });

                        }

                    })

在控制器这边：

只要我修改一下数量，它成本合计就跟着它改变：