Layui table 实现增加行与删除行

1、效果图:

在这里插入图片描述

2、toolbar代码

<script type="text/html" id="headToolbarTpl">
    <div class="layui-input-inline">
        <input name="keyword" id="keyword" class="layui-input layui-input-large" type="text" placeholder="扫码或输入货号或名称,回车查询" autocomplete="off"/>
    </div>
    <button class="layui-btn layui-btn-sm layui-btn-normal layui-btn-large" lay-event="addRow" id="addRow">新增行</button>
    <button class="layui-btn layui-btn-sm layui-btn-danger layui-btn-large" lay-event="delRow" id="delRow">删除行</button>
</script>

3、表格代码

<div class="layui-card-body">
     <table class="layui-table" id="editTable" lay-filter="editTable"></table>
 </div>

4、加载表格数据

此时不能像传统方式加载,必须使用ajax加载,完成后把数据填充到表格中
4.1、定义数组,获取数据

//1、定义属性
var tableId = 'editTable';
 var $tableId = '#editTable';
var tableData = []
        $.ajax({
            url: api.stock.purchase.listItem
            ,type: "get"
            ,async: false
            ,dataType: "json"
            , success: function(result){
                if(result && result.data){
                    tableData = result.data;
                }
            }
        });

4.2、初始化表格

  var tb = table.render($.extend(config.layui.childTable, {
        elem: $tableId,
        height: 'full-230',
        toolbar: '#headToolbarTpl',
        data: tableData,
        defaultToolbar: ['filter', 'exports', 'print'],
        cols: [
            [
                {type:'checkbox'},
                {field: 'id',  title: 'ID', hide: true},
                {field: 'productCode',  title: '产品编码', width: 100, align: 'center', sort: true, edit: 'text'},
                {field: 'productName',  title: '产品名称', minWidth:200, sort: true, edit: 'text'},
                {field: 'unit',  title: '单位', minWidth:80, align: 'center', sort: true, edit: 'text'},
                {field: 'stockCount',  title: '库存数量', minWidth:100, sort: true, totalRow: true, edit: 'text'},
                {field: 'purchaseCount',  title: '采购数量', minWidth:100, sort: true, totalRow: true, edit: 'text'},
                {field: 'purchasePrice',  title: '采购价格', minWidth:100, sort: true, edit: 'text'},
                {field: 'barCode',  title: '条码', minWidth:150, align: 'center', sort: true, edit: 'text'},
                {field: 'batchCode',  title: '生产批号', minWidth:100, align: 'center', sort: true, edit: 'text'},
                {field: 'lotCode',  title: '批次号', minWidth:100, align: 'center', sort: true, edit: 'text'},
                {field: 'produceDate',  title: '生产日期', minWidth:100, align: 'center', sort: true, edit: 'text'},
                {field: 'expiriedDate',  title: '有效期', minWidth:100, align: 'center', sort: true, edit: 'text'},
                {field: 'standard',  title: '规格', minWidth:150, sort: true, edit: 'text'},
                {field: 'producingArea',  title: '生产地址', minWidth:200, align: 'center', sort: true, edit: 'text'},
                {field: 'produceFactory',  title: '产家', minWidth:150, align: 'center', sort: true, edit: 'text'},
                {fixed: 'right', width:150, align:'center', toolbar: '#rowOpration', hide: true} //这里的toolbar值是模板元素的选择器
            ]
        ],
    }));

4.3、表格选项

childTable: {
            cellMinWidth: 60,
            response: {statusName: 'code', statusCode: 200, msgName: 'msg', dataName: 'data', countName: 'total'},
            height: '300',
            limit: Number.MAX_VALUE,
            defaultToolbar: [],
            toolbar: '',
            layout: [],
            hash:'',
            page:'',
            url: '',
        },

5、工具栏功能实现

5.1、添加一行与删除一行

table.on('toolbar(' + tableId + ')', function (obj) {
    switch (obj.event) {
        case 'addRow':
            var oldDatas = layui.table.cache[tableId];
            var newData = {
                purchaseId : '', purchaseCode : '', productId : '', productCode : '', productName : '',
                pinyin : '', standard : '', unit : '', producingArea : '', produceFactory : '',
                approvalCode : '', dosageForm : '', batchCode : '', produceDate : '', expiriedDate : '',
                purchaseCount : '', purchasePrice : '', purchaseAmount : '', headKeyCode : '',
                categoryName : '', guidePrice : '0', localSalePrice : '0',
                oldMemberPrice : '0', newMemberPrice : '0'
            };
            oldDatas.push(newData);
            table.reload(tableId, {
                data : oldDatas,
            })
            break;
        case 'delRow':
            var oldDatas = layui.table.cache[tableId];
            var checkDatas = table.checkStatus(tableId);
            var data =  checkDatas.data;
            if (data.length < 1 ) {
                return adminKit.warningMsg('请至少选择一条数据!');
            }
            adminKit.dialogConfirm('您确定要删除这些行吗!', function (isConfirm) {
                if(isConfirm){
                    formKit.delRow(table, tableId, oldDatas)
                }
                layer.close(layer.index);
            });
            break;
    }
});

5.2、具体删除代码

delRow : function(table, tableId, oldDatas){
        var tableArr = [];
        for (var i = 0; i < oldDatas.length; i++) {//遍历表格缓存数组
            var item = oldDatas[i];
            if (item.LAY_CHECKED) {//条件:选中
                oldDatas.splice(i, 1);//移除后后造成数组下标索引发生变化,所以下面需要i--
                i--;
            }
        }
        tableArr = oldDatas;
        table.reload(tableId, {
            data: tableArr   // 将新数据重新载入表格
        });
    },
要在layui-table实现合计,可以按照以下步骤进操作: 1. 在HTML中创建一个空的table元素,如下所示: ```html <table id="dynamicTable" lay-filter="dynamicTable"></table> ``` 2. 在JavaScript中,使用layuitable模块初始化表格,并设置表头数据和数据: ```javascript layui.use('table', function(){ var table = layui.table; // 设置表头数据 var cols = [ {field: 'id', title: 'ID'}, {field: 'name', title: '姓名'}, {field: 'age', title: '年龄'} // 添加更多字段... ]; // 设置数据 var data = [ {id: 1, name: '张三', age: 20}, {id: 2, name: '李四', age: 25}, {id: 3, name: '王五', age: 30} // 添加更多数据... ]; // 渲染表格 table.render({ elem: '#dynamicTable', cols: [cols], data: data }); }); ``` 3. 添加合计的处理逻辑: ```javascript layui.use('table', function(){ var table = layui.table; // 设置表头数据 var cols = [ {field: 'id', title: 'ID'}, {field: 'name', title: '姓名'}, {field: 'age', title: '年龄'} // 添加更多字段... ]; // 设置数据 var data = [ {id: 1, name: '张三', age: 20}, {id: 2, name: '李四', age: 25}, {id: 3, name: '王五', age: 30} // 添加更多数据... ]; // 渲染表格 table.render({ elem: '#dynamicTable', cols: [cols], data: data, done: function(res, curr, count){ // 计算合计数据 var totalAge = 0; for(var i = 0; i < res.data.length; i++){ totalAge += res.data[i].age; } // 创建合计的HTML var totalHtml = '<tr><td colspan="' + cols.length + '">合计:年龄总和为' + totalAge + '</td></tr>'; // 添加合计 $('#dynamicTable').next('.layui-table-view').find('tbody').append(totalHtml); } }); }); ``` 通过以上步骤,你可以在layui-table实现合计。在`done`回调函数中,可以计算需要合计的数据,并创建合计的HTML,然后将其添加到表格中。注意要根据实际情况调整合计的内容和样式。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

lovoo

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值