layui表格编辑单元格之后合并该列

layui表格编辑单元格之后合并该列

开发工具与关键技术:VS   MVC
撰写时间:2019/7/26

关于layui数据表格的监听编辑事件,相信很多人都会;但是简单的监听编辑就没有其他操作的是不会更新你所编辑过的数据,并且不会合并你编辑过的数据列;当然也可以编辑完成就更新缓存,但是我所用的方法是直接更新session数据;对于session数据的操作,也有很多种操作,比如:有一些人是修改session数据之后再从新查询数据在重载表格;有一些是,在查询数据的时候把数据保存到session中去,在监听编辑的时候获取当前编辑的数据,在从session中提取数据修改,就可以更新session数据,这样就不用在中新查询session数据重载表格。
下面我分享一下我所用的方法,编辑完就自动合计该列的数据了。下面截图是我要操作的原始数据:
在这里插入图片描述
一、 先把所要操作的数据查询出来保存到session中,接下来对session的数据进行操作
1、把查询的数据方法到session中。

layui表格编辑单元格之后合并该列_第1张图片
2、 提取session数据进行修改



public ActionResult UpdateSessionTwo(int SupSetDetailId, decimal ThisPayment, decimal ThePreferential, string Remark)
{
        Session.Remove("ListSessionData");//移除session
      List ListSessionData= new List();
           if (Session["mysession"] != null)
           {
                ListSessionData = Session["mysession"] as List;
            }
            for (var i = 0; i 

二、页面获取要编辑的数据,控制器传参,获取修改session数据的方法。请求完修改的session数据的之后就获取修改后的单元格值。

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

                    var field = obj.field; //得到字段

                    var elem = "tabSettleDetail"; //表id

                    var Updatevalue =obj.value; //得到修改后的值

var data = obj.data;//获取选中行的数据

                        var SupSetDetailId =data.SupSetDetailID;//结算明细ID

                        var ThisPayment =data.PaymentAmount;//本次付款金额

                        var ThePreferential =data.NowPreferential;//本次优惠金额    

                        var Remark =data.Remark;//备注

                         $.post("UpdateSessionTwo", { SupSetDetailId:SupSetDetailId, ThisPayment: ThisPayment, ThePreferential: ThePreferential,
Remark: Remark }, function (date) {});

//修改之后合并该列的数据 

                                var total = 0;                              
                          layui.each(layuiTable.cache[elem],

                                function (inex, item) {

                                    total +=Number(item[field]);

                                });

                                layui.$("#" + elem).next().find('.layui-table-total').find('td[data-field="' + [field] + '"] div').text(Number(total).toFixed(2));//修改完之后 合并该列所有数据

});

页面传到控制器的数据:如下截图:
layui表格编辑单元格之后合并该列_第2张图片

修改之后的数据,就可以更新session数据,在下一部操作的时候,就可以直接提取session数据就可以使用了,即可以获取到刚才你所修改个的明细信息了。

最后是,返回的页面结果:如下截图:
layui表格编辑单元格之后合并该列_第3张图片

你可能感兴趣的:(layui表格编辑单元格之后合并该列)