列表中增加下拉

 

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 &gt;新增</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+'&amp;reuseDegree='+value
                    , null, function () {
                        //设置成功刷新table和小table
                        tabresidence.reload({where: { }, page: {curr: 1}});
                        tableIns2.reload({where: { }, page: {curr: 1}});
                        tableIns1.reload();
                        tabresidence.reload();
                    });
            });

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

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

原文地址:https://blog.csdn.net/qq_37889636/article/details/128252130

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。

如若转载,请注明出处:http://www.7code.cn/show_9737.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注