Layui表格的修改

最新推荐文章于 2024-10-24 14:15:23 发布

原创最新推荐文章于 2024-10-24 14:15:23 发布 · 879 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Layui #表格修改 #MVC

本文介绍了在Layui表格中实现数据修改的方法。通过设置cols中的edit为true允许编辑，然后定义更新数据的后台方法，遍历session并修改值。在前端使用layuiTable的edit事件监听单元格修改，并通过POST请求调用更新方法，实现表格数据的实时同步。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

								Layui表格的修改

开发工具与关键技术： Visual Studio 2015 – jQuery
作者：廖亚星
撰写时间：2019年 7 月 20日
当数据在Layui在表格上显示的时候，我们可以对表格中的数据进行修改，只需要在cols中设置
edit: true就可以修改了，默认选择商品的数量为1，现在我将其中一条数据的数量修改为10，可以发现，虽然表格中的数据修改了，但是下面的合计并没有进行修改，那是因为页面上选择的数据只是一个session，我们还要写修改的方法
在这里插入图片描述
现在我们来定义修改数据的方法，首先定义需要修改的参数，然后获取session，最后通过foreach遍历循环修改值
public ActionResult UpdateShuangliang(int CommodityManagementID, decimal SalesDiscount, string SalesRemarks,decimal SellingPrices,decimal SellQuantity,decimal TotalAmount)
{
List listMingxi = new List();
if (Session[“IsOptions”] != null)
{
listMingxi = Session[“IsOptions”] as List;
}
foreach (var item in listMingxi)
{
if (item.CommodityManagementID == CommodityManagementID)
{
item.SalesDiscount = SalesDiscount;
item.SalesRemarks = SalesRemarks;
item.SellQuantity = SellQuantity;
item.SellingPrices = SalesDiscount * item.TagPrice;
item.TotalAmount = SalesDiscount * SellQuantity * item.TagPrice;

            }
        }
        return Json(listMingxi, JsonRequestBehavior.AllowGet);
    }

然后在Layui页面中引用方法
layuiTable.on(‘edit(employee)’, function (obj) {
//注：edit是固定事件名，test是table原始容器的属性 lay-filter=“对应的值”
var CommodityManagementID = obj.data.CommodityManagementID;
var SalesDiscount = obj.data.SalesDiscount;
var SellQuantity = obj.data.SellQuantity;
var SellingPrices = obj.data.SellingPrices;
var SalesRemarks = obj.data.SalesRemarks;
var TotalAmount = obj.data.TotalAmount;
$.post(“UpdateShuangliang”, {TotalAmount:TotalAmount, CommodityManagementID: CommodityManagementID, SalesDiscount: SalesDiscount, SellQuantity: SellQuantity, SellingPrices: SellingPrices, SalesRemarks: SalesRemarks }, function (data) {
if (data != “”) {
TabTitles = layuiTable.reload(‘employee’, {
url: “commoditylistselect”,
})
} else {
layer.alert(data.Text, { icon: 0, title: “三易通” });
}
})
});
这样当我修改表格中的值，合计区域也会对应的进行更改