使用layui 表格 下拉框 的实现

1： 想要实现的 效果 ：

 2：使用  templet  模版  （代码如下 前提 ：接口正常 能获取到数据并展示）

   table.render({
            elem: '#munu-table'
            , url: 'xxx.com/xxxx'
            ,id:"table"
            
            ,page:{
                limit: 15
                , limits: [15, 20, 30, 40, 50, 100, 150, 200, 250, 300, 400, 500, 800, 1000]
                // ,curr:localStorage.getItem('spgl_curr') ? localStorage.getItem('spgl_curr') : 1
            }
            ,totalRow: true //开启合计行
            , cols: [[
                {type: 'checkbox', width: 40, sort: true},
                {field: 'id', width: 140, title: 'id',hide:true},
                {field: 'image', width: 70, title: '图片',templet:function (d) {
                        return '<img class="productimages" width="16px" src='+d.image+'>';
                    }},
                {field: 'list_number', width: 100, title: '清单编号'},
                {field: 'storage_id', width: 100, title: '入库编号'},
                {field: 'batch_number', width: 80, title: '批次号'},
                {field: 'sku', width: 80, title: 'sku'},
                {field: 'storage_quantity', width: 90, title: '入库数量'},
                {field: 'sample_quantity', width: 90, title: '留样数量'},
                {field: 'actual_packing_quantity', width: 115, title: '实际装箱数量'},
                {field: 'purchaser', width: 80, title: '采购人'},

                {field: 'outbound_date', width: 100, title: '出库日期'},

                {field: 'pending_days', width: 100, title: '待处理天数'},
                {field: 'processing_status', width: 100, title: '处理进度'},
                {field: 'processor', width: 80, title: '处理人'},   
                {field: 'created_time', width: 100, title: '创建时间'},
                {field: 'modified_time', width: 100, title: '修改时间'},

                

                {
                            field: 'processing_method',
                            title: '处理方式',
                            align: 'center',
                            width: 200,
                            templet: function (d) {
                                var selectHtml = '<select name="paid" class="sel_xlk" lay-filter="stateSelect"  lay-verify="required" data-state="' + d.paid + '" data-value="' + d.id + '" >' +
                                    '        <option value="签补协议">签补协议</option>' +
                                    '         <option value="等待供应商补发数量">等待供应商补发数量</option>' +
                                    '         <option value="报损">报损</option>' +
                                    '         <option value="解除协议">解除协议</option>' +
                                    '    </select>';

                                return d.processing_method + selectHtml;
                            }
                        },

                
                      










            ]]
            , done: function(res, curr, count) {
                console.log(res); // 在控制台打印获取到的数据

                $(".layui-table-body").css('overflow','visible');
                $(".layui-table-box").css('overflow','visible');
                $(".layui-table-view").css('overflow','visible');

                var tableElem = this.elem.next('.layui-table-view');
                count || tableElem.find('.layui-table-header').css('overflow', 'auto');
                layui.each(tableElem.find('select[name="paid"]'), function (index, item) {
                    var elem = $(item);
                    elem.val(elem.data('state')).parents('div.layui-table-cell').css('overflow', 'visible');
                });
                form.render();//刷新表单

                
             }

             
      
        });

注意：templet 的用法 在手册中 只是简单的举了几个例子 。

文档：参考链接

3：注意done 里面的回调  ：

done: function(res, curr, count) {
                console.log(res); // 在控制台打印获取到的数据

                $(".layui-table-body").css('overflow','visible');
                $(".layui-table-box").css('overflow','visible');
                $(".layui-table-view").css('overflow','visible');

                var tableElem = this.elem.next('.layui-table-view');
                count || tableElem.find('.layui-table-header').css('overflow', 'auto');
                layui.each(tableElem.find('select[name="paid"]'), function (index, item) {
                    var elem = $(item);
                    elem.val(elem.data('state')).parents('div.layui-table-cell').css('overflow', 'visible');
                });
                form.render();//刷新表单

                
             }

 layui.each(tableElem.find('select[name="paid"]')  pid 是 field: 'pid', 的值。

上面的代码 加上后才能正常的展示 下拉 数据    如果没有 这段代码  点击 下拉图标 不会起作用。

4：修改数据：

            form.on('select(stateSelect)', function (data) {//修改类型
            let id = data.elem.dataset.value; //当前数据的id
            let processing_method = data.elem.value; //当前字段变化的值
            // 传值：表单变化后的值传递到后台数据库进行实时修改，例如，根据id修改这条数据的状态。

            console.log(id);
            console.log(processing_method);


            $.ajax({
                type: 'post',
                url:'xxx.com/xxx', // ajax请求路径
                data: {
                    id: id,
                    processing_method: processing_method
                },
                success: function(data){

                   var  data = JSON.parse(data)
                   layer.msg(data.msg);

              
                 
                    // layer.msg('修改成功');


                    // console.log(data);
                    //执行重载
                    //table.reload('bizInvoiceTable');
                    //window.location.href = Feng.ctxPath + '/bizInvoice'
                }
            });
        });

    

总结： 我遇到最多的问题就是 选择 下拉图标的时候 不能展示下拉的数据 。  所以一定要注意 红色字段。

未解决的问题 ： 下拉框会被覆盖  f12 能高亮度找到  但是被表格下面的滑块 覆盖了 。

  有滑块的时候  会出现 每列的线格子  会与 tittle 对不齐