当前位置: 代码迷 >> 综合 >> layui 数据表格内嵌上传按钮,并在上传中增加所在行的id或其他属性
  详细解决方案

layui 数据表格内嵌上传按钮,并在上传中增加所在行的id或其他属性

热度:50   发布时间:2023-09-19 14:28:57.0

碰到的需求是表格中每一行都要上传的按钮操作。

 

layui 数据表格内嵌上传按钮,并在上传中增加所在行的id或其他属性

遇到的问题是不知道怎么把行里面的数据传到后台(因为要根据id进行相应的保存)

解决方法是:

layui 数据表格内嵌上传按钮,并在上传中增加所在行的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(); //关闭loadinglayer.open({title: '信息',content: '文件上传失败,请重试'});}})}});

 

  相关解决方案