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

朴灿烈づ我的快乐病毒、 2023-02-16 05:51 29阅读 0赞

效果图：![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1d1aGFvdGlhbjE5OTY_size_16_color_FFFFFF_t_70][]

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

[https://maplemei.gitee.io/xm-select/\#/component/install][https_maplemei.gitee.io_xm-select_component_install]  下载插件

//定义空数据
                    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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1d1aGFvdGlhbjE5OTY_size_16_color_FFFFFF_t_70 1][]

//注册按钮事件
        $('.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;
            }
        });

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1d1aGFvdGlhbjE5OTY_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200608162827710.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1d1aGFvdGlhbjE5OTY=,size_16,color_FFFFFF,t_70
[https_maplemei.gitee.io_xm-select_component_install]: https://maplemei.gitee.io/xm-select/#/component/install
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1d1aGFvdGlhbjE5OTY_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200608161821669.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1d1aGFvdGlhbjE5OTY=,size_16,color_FFFFFF,t_70