layui 数据表格内嵌上传按钮,并在上传中增加所在行的id或其他属性
碰到的需求是表格中每一行都要上传的按钮操作。
遇到的问题是不知道怎么把行里面的数据传到后台(因为要根据id进行相应的保存)
解决方法是:
//把行里的数据拼接到上传的元素中:
<a class='table-btn uploadTableInfo' value='"+d.TASKID+","+d.XRID+"' lay-event='scbb'>上传报表</a>
然后在表格的加载完成事件中写上文件上传;并在上传的before方法中对数据进行编辑。:
var uploadParam = {}
upload.render({
elem: '.uploadTableInfo'
,url: window.RestSysApiBaseUrl+'hcsbReport/tableInfoUploadFile' //上传接口
,accept: 'file'
,exts:'xlsx|xls|zip|doc|docx|pdf'
,multiple:true
,before: function(obj){ //obj参数包含的信息,跟 choose回调完全一致,可参见上文。
var tableElem = this.item;
uploadParam.TASKID = tableElem.attr('value').split(',')[0]
uploadParam.XRID = tableElem.attr('value').split(',')[1]
layer.load(); //上传loading
}
,data: {
taskId:function(){
return uploadParam.TASKID;
},
xzqreportId:function(){
return uploadParam.XRID;
},
userName:window.store.get("loginUserRealname"),
uploadDate:function(){
return new Date();
}
}
有个点需要注意的就是data中写值得时候要用动态获取的方式,即写个function的方式,不然直接写获取不到相应的值。
完整代码如下:
var data = result.data;
_table.render({
elem: '#reportCheckSheng-table',
id:'reportCheckSheng-table',
height:'full-240',
data:data,
cols: [[
{type:'numbers',title:'序号',align:'center',width:90},
{field:'TASKID', title: 'id',align:'center',hide:true},
{field:'EVENT_NAME', title: '灾种',align:'center',},
{field:'EVENT_CODE', title: '灾种编号',align:'center',hide:true},
{field:'INFO_VALUE', title: '灾害名称',align:'center',},
{field:'HAPPEN_TIME', title: '发灾时间',align:'center',},
{field:'BSFS', title: '报送方式',align:'center',templet:function(d){
if(d.BSFS == null || d.BSFS =="0"){
return "初报";
}else if(d.BSFS =="1"){
return "核报";
}
}},
{field:'TBBL', title: '填报状态',align:'center',templet:function(d){
var bl = parseInt(d.TBBL*100)+'%'
return bl;
}},
{field:'TBSJ', title: '填报时间',align:'center',},
{field:'TBRY', title: '填报人',align:'center',},
{field:'shzt', title: '审核状态',align:'center',
templet: function(d){
switch (d.TBZT){
case null :
return "<span class='table-tapBtn table-tapBtn2' lay-event='dsc'>待上传</span>";
break;
case "0":
return "<span class='table-tapBtn table-tapBtn2' lay-event='ytb'>待上传</span>";
break;
case "1":
return "<span class='table-tapBtn' lay-event='ybh'>待审核</span>";
break;
case "2":
return "<span class='table-tapBtn table-tapBtn3' >已上报</span>";
break;
case "3":
return "<a class='table-tapBtn table-tapBtn3' >已上报</a>";
break;
case "4":
return "<a class='table-tapBtn table-tapBtn3' >已上报</a>";
break;
case "5":
return "<a class='table-tapBtn table-tapBtn4' >已驳回</a>";
break;
case "6":
return "<a class='table-tapBtn table-tapBtn5' >已弃审</a>";
break;
}
}
},
{field:'cz', title: '操作',align:'center',width:250,
templet: function(d){
var operation = '';
if (d.BSFS==0){
if (d.TBZT==null||d.TBZT==0){
operation = "<a class='table-btn uploadTableInfo' value='"+d.TASKID+","+d.XRID+"' lay-event='scbb'>上传报表</a>"
}
} else {
if (d.TBZT==null){
operation = ""
}else if (d.TBZT==0){
operation = "<a class='table-btn uploadTableInfo' value='"+d.TASKID+","+d.XRID+"' lay-event='scbb'>上传报表</a>"
}
}
if (d.TBZT==1){
operation = "<a class='table-btn' lay-event='see'>查看</a>"+
"<a class='table-btn' lay-event='sb'>上报</a>"+
"<a class='table-btn uploadTableInfo' value='"+d.TASKID+","+d.XRID+"' lay-event='scbb'>上传报表</a>"
}else if (d.TBZT==2) {
operation = "<a class='table-btn' lay-event='see'>查看</a>"+
"<a class='table-btn' lay-event='ch'>撤回</a>"+
"<a class='table-btn' lay-event='rz'>日志</a>";
}else if (d.TBZT==3) {
operation = "<a class='table-btn' lay-event='see'>查看</a>"+
"<a class='table-btn' lay-event='rz'>日志</a>";
}else if (d.TBZT==4) {
operation = "<a class='table-btn' lay-event='see'>查看</a>"+
"<a class='table-btn' lay-event='rz'>日志</a>";
}else if (d.TBZT==5) {
operation = "<a class='table-btn' lay-event='see'>查看</a>"+
"<a class='table-btn' lay-event='sb'>上报</a>"+
"<a class='table-btn uploadTableInfo' value='"+d.TASKID+","+d.XRID+"' lay-event='scbb'>上传报表</a>"+
"<a class='table-btn' lay-event='rz' style='margin-left:10px;'>日志</a>";
}
return operation
}
},
]],
done: function(res, curr, count){
_table.on('tool(reportCheckSheng-table)', function(obj){ //注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值"
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
var tr = obj.tr; //获得当前行 tr 的 DOM 对象(如果有的话)
if(layEvent === 'see'){//查看
$.ajax({
url: "../unitTermEvaluate/lossStatic/reportCheckSheng/seeReportCheckSheng/seeReportCheckSheng.html",
success: function(result) {
$("#mainContent").html(result);
layui.form.render();
//触发事件
layui.use(["seeReportCheckSheng"], function(obj) {
obj.init(data.TASKID,data.XZQBM,data.EVENT_CODE,data.BSFS);
layer.closeAll();
});
}
});
}else if(layEvent === 'sb'){//上报
me.reportSend_sb(data);
}else if(layEvent === 'scbb'){//上传报表
}else if(layEvent === 'rz'){//日志
me.reportSend_abandoningTrial(data);
}else if(layEvent === 'ch'){//撤回
me.reportSend_ch(data);
}
});
var uploadParam = {}
upload.render({
elem: '.uploadTableInfo'
,url: window.RestSysApiBaseUrl+'hcsbReport/tableInfoUploadFile' //上传接口
,accept: 'file'
,exts:'xlsx|xls|zip|doc|docx|pdf'
,multiple:true
,before: function(obj){ //obj参数包含的信息,跟 choose回调完全一致,可参见上文。
var tableElem = this.item;
uploadParam.TASKID = tableElem.attr('value').split(',')[0]
uploadParam.XRID = tableElem.attr('value').split(',')[1]
layer.load(); //上传loading
}
,data: {
taskId:function(){
return uploadParam.TASKID;
},
xzqreportId:function(){
return uploadParam.XRID;
},
userName:window.store.get("loginUserRealname"),
uploadDate:function(){
return new Date();
}
}
,allDone: function(obj){ //当文件全部被提交后,才触发
me.loadTable();
layer.closeAll(); //关闭loading
/*console.log(obj.total); //得到总文件数
console.log(obj.successful); //请求成功的文件数
console.log(obj.aborted); //请求失败的文件数*/
if (obj.aborted==0){
layer.open({
title: '信息',
content: '文件上传成功'
});
}else {
layer.open({
title: '信息',
content: '文件上传失败,请重试'
});
}
}
,done: function(res, index, upload){
},error: function(){
layer.closeAll(); //关闭loading
layer.open({
title: '信息',
content: '文件上传失败,请重试'
});
}
})
}
});