当前位置: 首页 > news >正文

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: '文件上传失败,请重试'
                                    });
                                }
                            })

                        }
                    });

 

相关文章:

  • 重启oracle的方法
  • ios中屏幕旋转的控制
  • 已有实例创建新的数据库空间和用户,并授权
  • 关于margin和padding的总结
  • 关于kafka发送消息过大导致的异常的解决方式
  • PHP利用Curl实现多线程抓取网页和下载文件
  • Java Logback教程
  • 石子合并[DP-N3]
  • log4j2定期生成和删除过期日志文件的配置
  • 使用netcat进行反弹链接的shellcode
  • mybatis 判断是否传入了某参数
  • sleep()和wait()区别
  • [LeetCode] NO. 387 First Unique Character in a String
  • Linux命令(网络)
  • 抽象工厂的一个范例
  • 【翻译】babel对TC39装饰器草案的实现
  • Babel配置的不完全指南
  • el-input获取焦点 input输入框为空时高亮 el-input值非法时
  • Intervention/image 图片处理扩展包的安装和使用
  • javascript 总结(常用工具类的封装)
  • Javascript弹出层-初探
  • KMP算法及优化
  • Next.js之基础概念(二)
  • Redis字符串类型内部编码剖析
  • spring-boot List转Page
  • 百度小程序遇到的问题
  • 创建一种深思熟虑的文化
  • 技术胖1-4季视频复习— (看视频笔记)
  • 前端性能优化--懒加载和预加载
  • 小程序button引导用户授权
  • 协程
  • ​决定德拉瓦州地区版图的关键历史事件
  • # 学号 2017-2018-20172309 《程序设计与数据结构》实验三报告
  • #162 (Div. 2)
  • (1)(1.13) SiK无线电高级配置(六)
  • (poj1.3.2)1791(构造法模拟)
  • (Python) SOAP Web Service (HTTP POST)
  • (原創) 人會胖會瘦,都是自我要求的結果 (日記)
  • (转)Android学习笔记 --- android任务栈和启动模式
  • (转)Oracle 9i 数据库设计指引全集(1)
  • (转)scrum常见工具列表
  • (转)大型网站架构演变和知识体系
  • (自适应手机端)响应式新闻博客知识类pbootcms网站模板 自媒体运营博客网站源码下载
  • .htaccess 强制https 单独排除某个目录
  • .Mobi域名介绍
  • .net mvc部分视图
  • .NET Windows:删除文件夹后立即判断,有可能依然存在
  • .net 逐行读取大文本文件_如何使用 Java 灵活读取 Excel 内容 ?
  • .Net中wcf服务生成及调用
  • // an array of int
  • /etc/X11/xorg.conf 文件被误改后进不了图形化界面
  • @font-face 用字体画图标
  • [BeginCTF]真龙之力
  • [bzoj1324]Exca王者之剑_最小割
  • [bzoj1912]异象石(set)