<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>