LayUi表格後面增加上傳按鈕以及進度條

阿新 • • 發佈：2020-11-23

這兩天在做前端渲染後的Table後加上上傳按鈕的時候，遇到了不少坑，由於不是專業前端的還是記錄一下自己遇到的問題

實現效果其實不難主要還是官網的文件沒研究清楚

比如：

只要在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>