这两天在做前端渲染后的Table后加上上传按钮的时候，遇到了不少坑，由于不是专业前端的还是记录一下自己遇到的问题
实现效果其实不难 主要还是官网的文档没研究清楚
比如：
我们先看看this里面的东西
嗨，原来我们的item里面果然就是当前被选中的元素。
只要在upload.render的done里面先获取当前触发的上传元素,就能动态获取对应的DOM元素绑定elem了
下面直接上代码：对应的删除功能不用动态获取,直接使用layevent操作即可
<body class="layui-layout-body"> <%--引入js文件--%> <script src="${pageContext.request.contextPath}/layui/layui.js"></script> <div class="layui-layout layui-layout-admin"> <div class="layui-body"> <!-- 内容主体区域 --> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"> <legend>上传视频</legend> </fieldset> <table id="table" lay-filter="table"> </table> </div> </div> <script> layui.use(['element','table','layer','jquery','form','laydate','upload'],function () { var element = layui.element , table = layui.table , layer = layui.layer , $ = layui.jquery , form = layui.form , laydate = layui.laydate , upload = layui.upload; //方法渲染 table.render({ elem: '#table' //指定原始表格元素选择器（推荐id选择器） ,height: 315 //容器高度 ,url:'/Manager/video/detailList/2' ,page:{ layout: [ 'count', 'prev', 'page', 'next', 'skip','limit'] ,limit:5 } , cols: [[ //标题栏 {field: 'id', title: 'ID',hide:true} ,{field: 'episode', title: '第几集', width: 80} ,{field: 'title', title: '标题'} ,{field: 'fileName', title: '状态',minWidth:60,templet:function (d) { return d.fileName== null ?'未上传':'已上传'; }} ,{field: 'publishDate', title: '上传时间',sort: true} ,{fixed: 'right', title: '进度',width:320,align: 'center' ,templet:function (d) { //d可以取到改行的所有数据 return '<div class="layui-progress" lay-showPercent="yes" lay-filter="'+ d.id+'">\n' + ' <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>\n' + ' </div>' ; }} ,{field: 'fileName',fixed: 'right',title:'操作',align: 'center' ,templet:function (d) { //这里的参数d是templete的固定用法，可以取到该行的所有数据 if(d.fileName ==null){ //未上传 //class里的upload_btn是用来标志上传按钮的，没有定义实际的css样式 return '<button class="layui-btn layui-btn-sm upload_btn" value="'+d.id+'" >上传</button>'; }else{ //已上传||被替换 return '<button class="layui-btn layui-btn-xs replace_btn" value="'+d.id+'">替换</button>' + '<button class="layui-btn layui-btn-danger layui-btn-xs delete_btn" lay-event="delete" value="'+d.id+'">删除</button>'; //删除按钮不需要渲染上传，只是一个动作按钮，可以通过lay-event进行行事件监听 } }} ]] //done - 数据渲染完的回调,无论是异步请求数据，还是直接赋值数据，都会触发该回调。你可以利用该回调做一些表格以外元素的渲染。 ,done: function(res, curr, count){ //表格加载完成后，对上传按钮进行渲染 //渲染当前页面的所有upload组件 upload.render({ //elem 指向容器选择器，如：elem: '#id'。也可以是DOM对象 string/object elem:'.upload_btn'//搜索所有tableViewElem中的后代 upload_btn //<button class="layui-btn layui-btn-sm upload_btn" value="25">上传</button> //<button class="layui-btn layui-btn-sm upload_btn" value="26">上传</button> ,url:'/Manager/video/detail/upload' ,accept: 'video' ,before:function (obj) {//obj包含信息，跟choose回调完全一致。在传值之前先获取id console.log("this"+this); var tableElem = this.item; //获取当前触发上传的元素，一般用于 elem 绑定 class 的情况，注意：此乃 layui 2.1.0 新增 //也就是-->this:<button class="layui-btn layui-btn-sm upload_btn" value="25">上传</button> //console.log("this.item:"+tableElem); uploadParam = tableElem.attr('value'); console.log("ableElem.attr('value'):"+uploadParam);//25 layer.load();//上传loading } ,data:{ id:function () { //data中写值的时候,要用动态获取的方式，即写个function的方式，不然直接写获取不到相应的值。 return uploadParam ; //得到上面的对应的ID值 } } ,progress: function(n, elem) { console.log(n); var percent = n + '%' //获取进度百分比 element.progress(uploadParam, percent); //可配合 layui 进度条元素使用 //以下系 layui 2.5.6 新增 //alert(elem) //console.log(elem); //得到当前触发的元素 DOM 对象。可通过该元素定义的属性值匹配到对应的进度条。 } ,done: function (res) { if(res.code == 1){ layer.closeAll('loading');//关闭loading layer.msg('上传成功'); }else if(res.code == 0 ){ layer.closeAll('loading'); //关闭loading layer.msg("添加视频失败！"); } } }) } }); /* * 监听table中工具条 上传, 编辑 ，删除等按钮的点击事件 */ table.on('tool(table)', function(obj){ //注：tool 是工具条事件名，table 是 table 原始容器的属性 lay-filter="对应的值" var data = obj.data; //获得当前行数据 var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值） var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话） //alert(data.id); if(layEvent === 'upload'){ //上传 //uploadVideo(data.id); //do somehing } else if(layEvent === 'delete'){ //删除 layer.confirm('真的删除行么', function(index){ obj.del(); //删除对应行（tr）的DOM结构，并更新缓存 layer.close(index); //向服务端发送删除指令 }); } else if(layEvent === 'update'){ //编辑 //do something //同步更新缓存对应的值 obj.update({ username: '123' ,title: 'xxx' }); } else if(layEvent === 'LAYTABLE_TIPS'){ layer.alert('Hi，头部工具栏扩展的右侧图标。'); } }); }); </script> </body>
