问题: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;
}
});
}