layui表格内下拉框怎么实现

2023-11-10前端开发
521

layui表格内下拉框怎么实现?最终实现效果如下图:

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'
                }
            });
        });
 

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

The End

相关推荐

layui实现图片上传成功后回显点击放大图片功能
layui实现图片上传成功后回显点击放大图片功能,html代码部分: !-- html代码--div class="layui-form-item" label class="layui-form-label"上传图片/label div class="layui-input-block" button type="button" class="layui-btn" id="license-auth-letter-...
2025-09-06 前端开发
202

Layui实现数据表格中鼠标悬停图片放大离开时恢复原图
Layui实现数据表格中鼠标悬停图片放大离开时恢复原图的效果,最终效果如下图所示: 实现代码如下,在done函数中调用hoverOpenImg方法 var tableIns = window.demoTable = table .render({ elem : '#idTest', id : 'idTest', url : '/postData', //width : 150...
2025-09-04 前端开发
112

layui点击文本输入框调起弹出选择框并选择内容的两种方法参考
我们在用到layui时候,需要点击文本输入框调起弹出选择框并选择内容,这个要怎么操作呢?以下两种方法可以参考: 1、点击名称,弹出信息弹框,选择表格中的某一行,实现效果如下: html页面代码 !--计量器具弹出层-- div id="equipment" lay-filter="equipmen...
2025-09-02 前端开发
167

网站部署https后百度地图不显示问题
https的网站如果引用百度地图,会出现加载不了的问题,这是因为涉及到跨域问题,网站是https的,但是引用百度地图的是http的,这个要怎么操作呢? 比如我引用的地址:http://api.map.baidu.com/api?v=2.0ak=AK显示 后来看了一下,少了一个s=1字段,加一下s=1...
2025-07-28 前端开发
139

微信小程序实现点击复制功能和手机拨打电话功能
做小程序项目的时候,客户提了一个功能需求优化,就是长按文字需要复制全部内容,因为有的手机支持全选复制,有的手机不支持全选复制。 通过设置系统剪贴板的内容和获取系统剪贴板的内容实现复制功能 html相关代码: van-field value="{{form.contactPhone}}"...
2025-07-02 前端开发
78

js拖拽排序插件Sortable.js如何使用
由于项目功能需要,要实现对table中的行实现拖拽排序功能,找来找去发现Sortable.js能很好的满足这个需求,而且它还是开源的,于是乎就开始学习使用Sortable.js 特点 轻量级但功能强大 移动列表项时有动画 支持触屏设备和大多数浏览器(IE9及以下除外) 支持...
2025-06-12 前端开发
161