Layui table嵌套select

<style>
    .layui-table-cell, .layui-table-tool-panel li {
overflow: visible !important;
}

.layui-form-select .layui-input {
height: 30px;
}

.layui-table-box {
overflow: visible !important;
}

.layui-table-body {
overflow: visible !important;
}
</style>

<div>
        <table class="marryMaterialTable" id="marryfoodtable" lay-filter="filter"></table>
    </div>

<script type="text/html" id="selectTpl">
    <select name="type" class="layui-input type" lay-filter="type"></select>
</script>
<script type="text/javascript">
var materialdata=null;
    function marryFood() {
        var files = $('#choose').val();
        var suffix = files.substring(files.lastIndexOf(".") + 1, files.length);
        if (suffix == "xls" || suffix == "xlsx") {
            var index;
            var formData = new FormData($("#form_marry")[0]);
            $.ajax({
                type: "post",
                url: '/api/food/marrymaterial',
                cache: false,
                data: formData,
                dataType: "json",
                contentType: false,
                processData: false,
                beforeSend: function (XMLHttpRequest) {
                    index = layer.load(2);
                },
                success: function (data) {
                    layer.close(index);
                    if (data.success==undefined) {
                        materialdata = data.data;
                        var page;
                        layui.use(['element', 'table', 'layer', 'form'], function () {
                            var element = layui.element;
                            table = layui.table;
                            layer = layui.layer;
                            form = layui.form;
                            element.init();
                            table.render({
                                elem: '.marryMaterialTable',
                                cols: [[
                                       {
                                           field: 'type_id', title: '类别',  '25%', templet: '#selectTpl',
                                       }
                                    , { field: 'name',  '25%', title: '名称', align: 'center', rowspan: '1' }
                                    , { field: 'unit',  '25%', title: '单位', align: 'center', rowspan: '1' }
                                    , { field: 'price',  '25%', title: '单价', align: 'center', rowspan: '1' }
                                ]],
                                data: materialdata,
                                page: true,
                                done: function (res, curr, count) {
                                    getMaterislType();
                                    page = curr;
                      //表格重载的时候 回显下拉框的数据
                                    $('tr').each(function(e){
                                        var $cr=$(this);
                                        var dataindex = $cr.attr("data-index");
                                        $.each(res.data,function(index,value){
                                            if(value.LAY_TABLE_INDEX==dataindex){
                                                $cr.find('input').val(value.type_name);
                                            }
                                        }); 
        
                                    });
                                },
                                id: "marryMaterialTable"
                            });
                  //下拉框输入值改变时触发 给表格赋值
                            form.on('select(type)', function (data) {
                                var elem = $(data.elem);
                                var trElem = elem.parents('tr');
                                var index = trElem.data('index') + (page-1) * 10;
                                materialdata[index]['type_id'] = data.value;
                                materialdata[index]['type_name'] = elem.find('option:selected').text();
                            });
                        });

                    }
                    else
                        layer.msg(data.message);
                },
                error: function (result, status) {
                    layer.msg('服务器连接失败');
                }
            });
        }
        else {
            layer.msg("请选择excel文件!");
        }

    }

function getMaterislType() {
        $.ajax({
            type: "Get",
            contentType: "application/json;charset=utf-8",
            url: "/api/food/materialtype",
            data: {
                type: ""
            },
            async: false,
            dataType: "json",
            success: function (data) {
                if (data != null) {
                    var html = "";
                    $.each(data, function (index, item) {
                        html += "<option value='" + item.id + "'>" + item.name + "</option>";
                    });
                    $('.type').html(html);
                    form.render();
                }
            }
        });
        
    }
</script>
原文地址:https://www.cnblogs.com/yyjspace/p/13066603.html