问题:Datatables表格里添加layui上传按钮,点击没有反应
原因:layui.upload被重复渲染之后,就会无效
解决:表格生成列时,根据行(Row) ID动态生成上传框ID保证不重复
// 上传按钮 let result = $("<button type='button' class='layui-btn upload_btn' id=\""+row.id+"\"><i class='layui_icon'></i>测试文档</button>"); // 点击事件 uploadFn('#' + row.id) // 在这里也可以 /*layui.use(['upload'],function(){ let upload = layui.upload; upload.render({ elem: '#' + row.id , url: '' // 上传接口 , before: function (obj) { //预读本地文件示例,不支持ie8 obj.preview(function (index, file, result) { console.log(uploadImg); $(showImg).attr('src', result); //图片链接(base64) }); } , done: function (res) { //如果上传失败 if (res.error > 0) { return layer.msg('上传失败'); } //上传成功 if (res.error == 0) { console.log(uploadImg) $(uploadimd).html(res.url); return layer.msg('上传成功'); } } , error: function () { //演示失败状态,并实现重传 var demoText = $('#demoText'); demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>'); demoText.find('.demo-reload').on('click', function () { uploadImg.upload(); }); } }); });*/
let upload; layui.use(['upload'],function(){ upload = layui.upload; }) /** * 表格上传框 * 上传文件 */ function uploadFn(id){ upload.render({ elem: id , url: '' // 上传接口 , accept:'file' , done: function (res,index,upload) { data.testFileUrl = res.url; data.testFileName = res.fileName; } }); }