关于layui table嵌入下拉框后，设置单独列的.layui-table-cell的overflow为visible

作者也是首次使用layui，因为要让layui table直接可编辑并且需要下拉框，所以参考网上的教程,开始的代码是这样的：

<style>

    td .layui-form-select {
        margin-top: -10px;
        margin-left: -15px;
        margin-right: -15px;
    }

    .layui-table-cell {
        overflow:visible;
        text-overflow:inherit;
    }

    .layui-table-header .layui-table th {
        overflow: hidden;
    }
</style>

<table id="TableList" lay-filter="jsTabel" class="layui-hide"></table>

 <script>

table.render({
                elem: '#TableList'
                , height: 'full-153'
                , cellMinWidth: '80'
                , url: "@Url.Action("getlist")"//数据接口
                , page: true
                //, even: true //开启隔行背景
                , toolbar: true
                , defaultToolbar: ['filter', 'print', 'exports']
                , cols: [[
                { type: 'checkbox', fixed: 'left' },
                { field: 'DJBH', title: '序号', width: 60, templet: function (obj) { return obj.LAY_INDEX; } },
                {
                    field: 'LB', title: '类别', width: 100, templet: function (d) {
                        var opt = '<select name="LB" lay-filter="LB" id="LB">';
                        if (d.LB == "正常订单") {
                            opt += '<option value="正常订单" selected="selected">正常订单</option>' +
                                '<option value = "重裁单" > 重裁单</option >' +
                                '<option value="补裁单">补裁单</option>' +
                                '<option value="加单">加单</option>';
                        } else if (d.LB == "重裁单") {
                            opt += '<option value="正常订单">正常订单</option>' +
                                '<option value = "重裁单" selected="selected"> 重裁单</option >' +
                                '<option value="补裁单">补裁单</option>' +
                                '<option value="加单">加单</option>';
                        } else if (d.LB == "补裁单") {
                            opt += '<option value="正常订单">正常订单</option>' +
                                '<option value = "重裁单"> 重裁单</option >' +
                                '<option value="补裁单" selected="selected">补裁单</option>' +
                                '<option value="加单">加单</option>';
                        } else if (d.LB == "加单") {
                            opt += '<option value="正常订单">正常订单</option>' +
                                '<option value = "重裁单"> 重裁单</option >' +
                                '<option value="补裁单">补裁单</option>' +
                                '<option value="加单" selected="selected">加单</option>';
                        }
                        opt += '</select>';
                        return opt;
                    }
                },
                { field: 'DDBH', title: '内部订单号', width: 120, event: 'collapse', templet: function (d) { return '<div style="position: relative;\n' + 'padding: 0 10px 0 20px;">' + d.DDBH + '<i style="left: 0px;" lay-tips="展开" class="layui-icon layui-colla-icon layui-icon-right"></i></div>' } },
                { field: 'DJRQ', title: '制单日期', width: 110, sort: true, templet: function (d) { var time = parseInt(d.DJRQ.toString().replace("/Date(", "").replace(")/", "")); return util.toDateString(time, 'yyyy-MM-dd') } },
                { field: 'KSBH', title: '款号', width: 110 },
                { field: 'SSGJ', title: '国家', edit: true },
                { field: 'HTBH', title: '订单PO号', width: 100, edit: true },
                { field: 'DDPOH', title: '客户PO号', width: 100, edit: true },
                { field: 'YWRQ', title: '接单日期', width: 110, edit: 'text', event: 'datebox', sort: true, templet: function (d) { if (d.YWRQ.toString().substring(0, 2) == "/D") { var time = parseInt(d.YWRQ.toString().replace("/Date(", "").replace(")/", "")); return util.toDateString(time, 'yyyy-MM-dd') } else { return d.YWRQ.toString() } } },
                { field: 'KHDM', title: '客户代码', width: 100, edit: true },
                { field: 'KHMC', title: '客户名称', width: 135, edit: true },
                { field: 'YWY', title: '业务员', edit: true },
                { field: 'FHRQ', title: '离场日期', width: 110, edit: 'text', event: 'datebox', templet: function (d) { if (d.FHRQ.toString().substring(0, 2) == "/D") { var time = parseInt(d.FHRQ.toString().replace("/Date(", "").replace(")/", "")); return util.toDateString(time, 'yyyy-MM-dd') } else { return d.FHRQ.toString() } } },
                { field: 'JHRQ', title: 'IN HOUSE DATE', width: 110, edit: 'text', event: 'datebox', templet: function (d) { if (d.JHRQ.toString().substring(0, 2) == "/D") { var time = parseInt(d.JHRQ.toString().replace("/Date(", "").replace(")/", "")); return util.toDateString(time, 'yyyy-MM-dd') } else { return d.JHRQ.toString() } } },
                { field: 'FOB', title: 'FOB DATE', width: 110, edit: 'text', event: 'datebox', templet: function (d) { if (d.FOB.toString().substring(0, 2) == "/D") { var time = parseInt(d.FOB.toString().replace("/Date(", "").replace(")/", "")); return util.toDateString(time, 'yyyy-MM-dd') } else { return d.FOB.toString() } } },
                { field: 'ZWLCRQ', title: '最晚离厂日期', width: 120, edit: 'text', event: 'datebox', templet: function (d) { if (d.ZWLCRQ.toString().substring(0, 2) == "/D") { var time = parseInt(d.ZWLCRQ.toString().replace("/Date(", "").replace(")/", "")); return util.toDateString(time, 'yyyy-MM-dd') } else { return d.ZWLCRQ.toString() } } },
                { field: 'DDSL', title: '数量' },
                { field: 'HJJE', title: '金额', width: 100 },
                { field: 'CZPOH', title: '参照订单PO号', width: 130, edit: true },
                {
                    field: 'HBBH', title: '结算方式', width: 90, templet: function (d) {
                        var opt = '<select name="HBBH" lay-filter="HBBH" id="HBBH">';
                        if (d.HBBH == "美金") {
                            opt += '<option value = "美金" selected="selected"> 美金</option >' +
                                '<option value="人民币">人民币</option>';
                        } else if (d.HBBH == "人民币") {
                            opt += '<option value = "美金"> 美金</option >' +
                                 '<option value="人民币" selected="selected">人民币</option>' 
                        }
                        opt += '</select>';
                        return opt;
                    }
                },
                { field: 'YHHL', title: '汇率', edit: true },
                { field: 'ZDR', title: '制单人', edit: 'text' },
                { field: 'DJZT', title: '订单状态', width: 90 },
                { title: '操作', toolbar: '#tool', fixed: 'right', width: 270 }
            ]]
                , done: function (res, curr, count) {
                }
                , where: { Keyword: $("#keyword").val(), startdate: $("#startdate").val(), enddate: $("#enddate").val() }
            });

</script>

我们可以看到，其它列的字段超出范围了 

后来打开F12发现laytable-cell-1-0-2可以单独设置为visible，于是我就设置了

.laytable-cell-1-0-2{overflow:visible} ,但发现每次重新table.render（）后，这个1-0-2就变成x-0-2，最前面的数会随着render（）次数增加，除非重新刷新整个页面才会变成1-0-2，后来发现这个data-key是和这个laytable-cell这个后缀数字一样的，于是在done：function（res, curr, count）里加入了{

$(".layui-table-main tr").each(function (index, val) {
                        var datakey = $(".layui-table tbody tr[data-index='" + index + "'] td[data-field='LB']").attr("data-key");
                        $(".laytable-cell-" + datakey + "").css('overflow', 'visible');

 });

}，然后再去运行我们就可以看到，这列超出的内容隐藏在cell里了