layui table列表下拉选操作

 

 

列表中增加下拉选

 

var colsChang=[
        [
            {type: 'checkbox'},
            {type: 'numbers',title: '序号'},
            {field: 'id', title: 'id'},
            {field: 'reuseDegree',title: '复用度',width:110, templet:function(d){
                    var opt = '<select name="reuseDegree" id="reuseDegree" class="province-selector" lay-filter="reuseDegreeFileter" >\n'
                    if(d.reuseDegree == "新增"){
                        opt = opt + '      <option value="新增" selected >新增</option>\n' +
                            '      <option value="复用" >复用</option>\n' +
                            '      <option value="利旧" >利旧</option>\n'
                    }else if(d.reuseDegree == "复用"){
                        opt = opt + '      <option value="新增" >新增</option>\n' +
                            '      <option value="复用" selected >复用</option>\n' +
                            '      <option value="利旧" >利旧</option>\n'
                    }else if(d.reuseDegree == "利旧"){
                        opt = opt + '      <option value="新增" >新增</option>\n' +
                            '      <option value="复用" >复用</option>\n' +
                            '      <option value="利旧" selected >利旧</option>\n'
                    }
                    opt = opt + '    </select>'
                    return opt
                }},
            {field: 'remarks', title: '备注',width:100}
        ]
    ]







//==================

function gndpgTable() {

                tableIns2 = febss.table.init({
                    elem: '#pgbglTable',
                    id: 'pgbglTable',
                    url: 'sjyMydaibanExcel/pageList?projectId='+projectId,
                    limits : [100, 200, 500],
                    limit: 100,
                    height:'full-210',
                    cols: colsChang,
                    done: function (res, curr, count) {
                        $(".layui-table-box").find("[data-field='id']").css("display","none");
                    },

                });
            }

 有的人说样式需要调整，加一个下边这个，不然下拉选打开会显示不出来，我的没有这种情况，大家根据情况使用

<style>
    /*使下拉列表框不被遮挡*/
    .layui-table-cell {
        overflow: visible !important;
    }
    /*使列表框与表格单元格重合*/
    td .layui-form-select {
        margin-top: -10px;
        margin-left: -15px;
        margin-right: -15px;
    }
</style>

 数据获取和调用后台接口

reuseDegreeFileter是你列表中加的下拉选的lay-filter，value是现在已经选择的值

lineDate是这行数据，可以用来获取id

//table列表中的复用新增利旧下拉选点击事件
            form.on('select(reuseDegreeFileter)',data=>{
                console.log(data)
                var tableCache = table.cache['pgbglTable'],  // 获得数据表格的缓存数据
                    value = data.value,  // 得到下拉列表改变后的value值
                    field = data.othis.parents('td').attr('data-field'),  // 获得下拉列表的父级td标签的字段名称
                    dataIndex = parseInt(data.othis.parents('tr').attr('data-index')),  // 获得变化的下拉列表所在的行index
                    lineDate = tableCache[dataIndex];  // 获得数据表格中该行的缓存数据
                console.log(lineDate.id)
                febs.get(ctx + 'sjyMydaibanExcel/updateReuseDegree?id='+lineDate.id+'&reuseDegree='+value
                    , null, function () {
                        //设置成功刷新大table和小table
                        tabresidence.reload({where: { }, page: {curr: 1}});
                        tableIns2.reload({where: { }, page: {curr: 1}});
                        tableIns1.reload();
                        tabresidence.reload();
                    });
            });

 原文地址：layui学习——数据表格嵌套下拉列表，并实现动态更新 - 夏末蝉未鸣 - 博客园

我文章里是我的代码，跟原文不太一样，大家根据各自需求选择写法。