這兩天在做前端渲染后的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>