日常笔记：layui数据网格嵌套选择器

layui的数据表格嵌套选择器之后显示不出来的原因本质上还是因为layui的数据网格的每个格子都有溢出隐藏的style。所以这里主要是重写他的样式；

<style>
body{margin: 10px;}
.demo-carousel{height: 200px; line-height: 200px; text-align: center;}
td .layui-form-select {
    margin-top: -10px;
    margin-left: -15px;
    margin-right: -15px;
}
.layui-table-cell{
    overflow:visible;
}
.tablle tr{
    height: 50px;
}
.tablle td{
    width: 70px;
    height: 50px;
}
.tdDiv{
    position:relative;
    width: 70px;
    height: 50px;
    overflow: hidden;
}
.tdDiv div{
    position:absolute;
    top:0;
    left:0;
}
</style>
   
<table class="layui-hide" id="demo" lay-filter="test"></table>
<script>
layui.config({
    version: '1623988781494', //为了更新 js 缓存，可忽略
    base: '/dome/layui-all/lay/modules/'
})

//加载模块  
layui.use(['layer', 'laydate','laypage','table','element','dropdown','jquery','form'],function(layer,laypage,laydate,table,element,dropdown,$,form){ //亦可加载特定模块：layui.use(['layer', 'laydate', function(){

    // 监听修改update到表格中
    form.on('select(testSelect)', function (data) {
        var elem = $(data.elem);
        var trElem = elem.parents('tr');
        var tableData = table.cache['demoJson']; // grid为table id
        console.log(table)
        // 更新到表格的缓存数据中，才能在获得选中行等等其他的方法中得到更新之后的值
        tableData[trElem.data('index')][elem.attr('name')] = data.value;
        // 其他的操作看需求 TODO
    });

  //执行一个 table 实例
    var tableIns = table.render({
        elem: '#demo'
        ,id:'demoJson'
        ,height: 420
        ,page: { //开启分页
            layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
            ,limit:5
            ,groups: 1 //只显示 1 个连续页码
            ,first: false //不显示首页
            ,last: false //不显示尾页
        }
        ,cols: [[ //表头
        {type: 'checkbox', fixed: 'left'}
        ,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left', totalRowText: '合计：'}
        ,{field: 'username', title: '用户名', width:80}
        ,{field: 'experience', title: '积分', width: 90, sort: true, totalRow: true}
        ,{field: 'sex', title: '性别', width:80, sort: true}
        ,{field: 'score', title: '评分', width: 80, sort: true, totalRow: '{{ parseInt(d.TOTAL_NUMS) }} 分'}
        ,{field: 'city', title: '城市', width:150} 
        ,{field: 'sign', title: '签名', width: 200}
        ,{field: 'classify', title: '职业', width: 100}
        ,{field: 'wealth', title: '财富', width: 135, sort: true, totalRow: true}
        ,{fixed: 'right', width: 150, align:'center',
            templet: function (d) {
                // 模板的实现方式也是多种多样，这里简单返回固定的
                return '<select name="city" lay-filter="testSelect" lay-verify="required" lay-search="" data-value="' + d.classify + '" >\n' +
                    '        <option value=""></option>\n' +
                    '        <option value="1">作家</option>\n' +
                    '        <option value="2">革命家</option>\n' +
                    '        <option value="3">音乐家</option>\n' +
                    '        <option value="4">人事</option>\n' +
                    '        <option value="5">程序员</option>\n' +
                    '      </select>';
            }
        }
        ]],
        data:[
            {id:1000,username:"user-1",experience:1005,sex:"男",score:96,city:"北京",sign:"签名-0",classify:"销售",wealth:"321354123"}
            ,{id:1001,username:"user-2",experience:1005,sex:"男",score:96,city:"北京",sign:"签名-1",classify:"销售",wealth:"546123"}
            ,{id:1002,username:"user-3",experience:1005,sex:"男",score:96,city:"北京",sign:"签名-2",classify:"销售",wealth:"4123523"}
            ,{id:1003,username:"user-4",experience:1005,sex:"男",score:96,city:"北京",sign:"签名-3",classify:"销售",wealth:"8656136"}
            ,{id:1004,username:"user-5",experience:1005,sex:"男",score:96,city:"北京",sign:"签名-4",classify:"销售",wealth:"39845612356"}
            ,{id:1004,username:"user-5",experience:1005,sex:"男",score:96,city:"北京",sign:"签名-4",classify:"销售",wealth:"39845612356"}
            ,{id:1004,username:"user-5",experience:1005,sex:"男",score:96,city:"北京",sign:"签名-4",classify:"销售",wealth:"39845612356"}
            ,{id:1004,username:"user-5",experience:1005,sex:"男",score:96,city:"北京",sign:"签名-4",classify:"销售",wealth:"39845612356"}
            ,{id:1004,username:"user-5",experience:1005,sex:"男",score:96,city:"北京",sign:"签名-4",classify:"销售",wealth:"39845612356"}
        ]
    });

});
</script>

虽然这样能让选择器显示，但还是不够完美。