Layui table 实现增加行与删除行

Posted 2021-05-18 lovoo

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   // 将新数据重新载入表格
        });
    },