layui表格的编辑与合计

作者：HZY
在我们使用layui表格的时候，有时候需要修改表格中的数据，还有表格中的合计效果，
先来说一下修改表格中的数据，在阅读layui文档时会发现layui表格中有一个参数 edit,
Edit：单元格编辑类型 ，目前只支持：text。
这个属性就是用来编辑表格中的数据的。
下面展示代码

   { title: '商品名称', field: 'CommodityName', align: 'center', edit: true,},
   { title: '款号', field: 'CommodityStyleNumber', align: 'center', edit: true, },
   { title: '颜色', field: 'ColorName', align: 'center', rowspan: 2, edit: true, },
   {title: '尺码', field: 'SizeName', align: 'center', rowspan: 2, edit: true, },
   { title: '吊牌价', field: 'TagPrice', align: 'center', rowspan: 2, edit: true, },
   { title: '单位', field: 'UnitName', align: 'center', rowspan: 2, edit: true, },
   { title: '数量', field: 'StockAmount', align: 'center', rowspan: 2, edit: true,},

在表格参数中放入一个 edit: true，便可以开启单元格编辑。
看一下效果图

开启单元格编辑之后，就变成了一个输入框，就可以修改表格了。
不过修改之后并没有保存的这条数据中，只是看起来修改了，这条数据并没有修改，所以还需要几步操作，到控制器中写修改代码，然后在到页面上写代码，把修改的值传入控制器进行修改就可以了。下面展示一下页面修改表格的代码。

layuiTable.on('edit(Stock)', function (obj) {
                var data = obj.data;               
                var Aount = obj.data.StockAmount;
                var CommodityDetailID = obj.data.CommodityDetailID;
                //console.log(data)
                $.post("xg", { Aount: Aount, CommodityDetailID: CommodityDetailID }, function (data) {
                    if (data != "") {
                        Stock.reload({
                            url: "getstock"
                        });
                    }

写一个表格的监听事件，修改之后就到把修改的数据传入控制器，进行修改数据保存。这样表格的数据就能真正修改了。

当我们需要更加直观的看到数据的总数时，就可以把那列数据开启合计。
下面来说一下layui表格如何开启合计。
Layui文档中也有一个属性开启合计的属性 totalRow: 开启该列的自动合计功能。
totalRowText：用于显示自定义的合计文本。
{ type: ‘numbers’, title: ‘序号’, rowspan: 2, totalRowText: “合计”, },
{ title: ‘商品明细ID’, field: ‘CommodityDetailID’, align: ‘center’, hide: true, },
{ title: ‘商品条码（编码）’, field: ‘CommodityCode’, align: ‘center’, rowspan: 2, },
{ title: ‘商品名称’, field: ‘CommodityName’, align: ‘center’, rowspan: 2, },
{ title: ‘款号’, field: ‘CommodityStyleNumber’, align: ‘center’, rowspan: 2, },
{ title: ‘数量’, field: ‘StockAmount’, align: ‘center’, rowspan: 2, totalRow: true, }

在表格参数中加入，totaRow :true；就可以合计该列的数据。

数量下面开启了合计，便把这一列的数据加起来了。

这个便是开启了自定义的合计文本。

标签：center,表格,title,layui,align,field,合计,true
来源： https://blog.csdn.net/weixin_44546855/article/details/96312414