layui表格下拉多选添加一行删除一行基于xm-select

 效果图：

使用之前在html需要引用一下

https://maplemei.gitee.io/xm-select/#/component/install  下载插件

<script type="text/javascript" src="${request.contextPath}/statics/plugins/select/xm-select.js">

         //定义空数据
                vm.tbData = [{
                    tempId: new Date().valueOf(), //生成的唯一id 根据时间
                    llst: [], //不同行被选择的下拉数据
                    suoyou: [] //这里可以是多选下拉的所有动态数据。因为下面我写死了 张三李四王五 所以这个数组没用到
                }],

                    //数据表格实例化
                    tableRes = $("#tableRes"), tbWidth = tableRes.width();
                    //渲染表格
                tableIns = layui.table.render({
                    elem: '#dataTable',
                    data: vm.tbData,
                    id: layTableId,
                    width: tbWidth,
                    loading: true,
                    even: false, //不开启隔行背景
                    text: {none: '无数据，去添加一行~'},
                    cols: [[
                        {title: '序号', type: 'numbers'},
                        {
                            field: 'batchNo', title: '<p class="mandatory">多选名单</p>', width: 240,
                            templet: function(d){
                                return '<a lay-event="batchNo"></a><div id="XM-' + d.tempId + '" lay-filter="batchNo"></>'
                            }
                        },
    {
                            field: 'tempId',
                            width: 100,
                            // fixed: 'right',
                            align: 'center',
                            title: '操作',
                            templet: function (d) {
                                return '<a class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del" lay-id="' +
                                    d.tempId + '"><i class="layui-icon layui-icon-delete"></i>移除</a>';
                            }
                        }
                    ]],
                    done: function(res){
                        //修改一些css样式, 这里虽然能够使用, 但是还是不太友好, 努力中...
                        var cells = document.querySelectorAll('select[lay-id="demo"] .layui-table-cell');
                        for(var i = 0 ; i < cells.length ; i++ ){
                            cells[i].style.overflow = 'unset';
                            cells[i].style.height = 'auto';
                        }
                        //渲染多选
                        res.data.forEach(item =>  {
                            var xm = xmSelect.render({
                                el: '#XM-' + item.tempId,
                                autoRow: true,
                                // on为监听事件
                                on: function(data){
                                    var arr = data.arr;
                                    console.log(JSON.stringify(arr, null, 2))
                                    console.log("可行"+item.tempId) 
                                     //获取表格数据
                                    var rows = layui.table.cache[layTableId];
                                    for (var i = 0, row; i < rows.length; i++) {
                                        row = rows[i];
                                      //for循环更新下拉已选中数据
                                          if (row.tempId == item.tempId) {
                                            console.log(row)
                                            $.extend(row,{llst: arr});
                                            console.log(JSON.stringify(arr, null, 2))
                                            console.log(JSON.stringify(row.llst, null, 2))
                                            break;
                                            //成功把不同行选中的存到了数据中
                                        }
                                    }
                                
                                },
                                data: [
                                    {name: '张三', value: '张三'},
                                    {name: '李四', value: '李四',},
                                    {name: '王五', value: '王五',},
                                ]
                            })

                            item.__xm = xm;
                        //添加一行或删除一行后 回显之前已经选择的数据
                        var rows = layui.table.cache[layTableId];
                        for (var i = 0, row; i < rows.length; i++) {
                            row = rows[i];
                            if(row.tempId == item.tempId){
                                xm.setValue(row.llst)
                            }

                        }
                    });
                    }
                });


            },
            error: function (res) {
                //console.log(res);
            }

添加一行代码 html

 //注册按钮事件
    $('.layui-btn[data-type]').on('click', function () {
        var type = $(this).data('type');
        activeByType(type);
    });   

//激活事件的通用调用方法
    var activeByType = function (type, arg) {
        active[type] ? (arguments.length === 2 ? active[type].call(this, arg) : active[type].call(this)) : '';
    }


 var active = {
        addRow: function () {	//添加一行
            var rows = layui.table.cache[layTableId];	//table.cahce 中保存着当前页面中的表格数据
            var newRow = {
                tempId: new Date().valueOf(),
                colorNo: "",
                batchNo: "",
                batchNo: "",
                batchNo: "",
                goodsId: "",
                optionCount: ""
            };
            rows.push(newRow);
            tableIns.reload({
                data: rows
            });
            console.log("现在表格数据",layui.table.cache[layTableId]);
        },
        updateRow: function (obj) {	//更新行记录对象
            var rows = layui.table.cache[layTableId];

            for (var i = 0, row; i < rows.length; i++) {
                row = rows[i];
                if (row.tempId == obj.tempId) {
                    $.extend(rows[i], obj);
                    break;
                }
            }
            tableIns.reload({
                data: rows
            });
        },
        updateData: function (obj) {	//更新行记录对象
            var rows = layui.table.cache[layTableId];
            for (var i = 0, row; i < rows.length; i++) {
                row = rows[i];
                if (row.tempId == obj.tempId) {
                    $.extend(rows[i], obj);
                    break;
                }
            }
        },
        removeEmptyRow: function () {	//移除表格数据中的空对象记录
            var rows = layui.table.cache[layTableId];
            for (var i = 0, row; i < rows.length; i++) {
                row = rows[i];
                if (!row || !row.tempId) {
                    rows.splice(i, 1);    //删除一项
                }
                continue;
            }
            tableIns.reload({
                data: rows
            });
        },
        /* 保存*/
        save: function () {	//保存
            layui.form.on('submit(savOrder)', function (data) {
                layui.form.render();
                var index = layer.load(1, {
                    shade: [0.5, '#000'] //0.1透明度的背景
                });
                var formData = data.field;
                var rows = layui.table.cache[layTableId];
                console.log(rows);
                for (var i = 0, row; i < rows.length; i++) {
                    row = rows[i];


                }

                if (formData) {
                    rows.forEach(function (item) {
                        delete item.__xm;
                        for (var i in item) {
                            if (i == "LAY_TABLE_INDEX" || i == "tempId" ) {
                                delete item[i]
                            }
                        }
                    });
                    formData.detailList = rows;
                }
                var seen = [];

                var replacer = function(key, value) {
                    if (value != null && typeof value == "object") {
                        if (seen.indexOf(value) >= 0) {
                            return;
                        }
                        seen.push(value);
                    }
                    return value;
                };

                $.ajax({
                    url: baseURL + 'repository/erpRepositoryDeployment/saveOrUpdate',
                    type: 'POST',
                    contentType: "application/json;charset=utf-8",
                    // console.log(JSON.stringify(row.llst, null, 2))
                    data: JSON.stringify(formData, replacer),
                    success: function (res) {
                        if (res.code == 0) {
                            layer.msg('已经完成添加', {icon: 1});
                            setTimeout(function () {
                                layer.closeAll();
                                layui.table.reload('gridid');
                                layer.close(index);
                            }, 1000);

                        } else {
                            layer.close(index);
                            layer.msg(res.msg, {icon: 2});
                        }

                    },
                    error: function (res) {
                        layer.close(index);
                        console.log(res);
                    }
                });

            });
        }
    }


//删除一行
//监听工具条
    layui.table.on('tool(dataTable)', function (obj) {
        var data = obj.data, event = obj.event, tr = obj.tr; //获得当前行 tr 的DOM对象;
        switch (event) {
            case "del":
                layer.confirm('是否执行此操作？', function (index) {
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    activeByType('removeEmptyRow');
                });
                break;
        }
    });