快捷導(dǎo)航

layui在表格中嵌入上傳按鈕并修改上傳進度條的實例

更新時間：2024年07月05日 11:20:48 作者：學(xué)習(xí)做游戲中

這篇文章主要介紹了layui在表格中嵌入上傳按鈕并修改上傳進度條的實例,本文給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧

當需要在表格中添加上傳文件按鈕，并不需要彈出填寫表單的框的時候，需要在layui中，用按鈕觸發(fā)文件選擇
有一點需要說明的是，layui定義table并不是在定義的標簽中渲染，而是在緊接著的標簽中渲染，所以要獲取實例，要用 next()
也可以通過this或者css選擇器來獲取實例

效果展示

根據(jù)后端數(shù)據(jù)展示不同按鈕

點擊上傳直接彈出文件選擇框

點擊上傳后直接在屏幕中央顯示進度，因為是遮罩層

思路

在table.render中添加上傳按鈕
表格加載完成后，給按鈕綁定upload.render
通過給按鈕中添加屬性，來獲取表單中想要傳遞的值

關(guān)鍵代碼

因為是django項目結(jié)合的layui，所以只放出關(guān)鍵的代碼
通過后端傳遞過來的數(shù)據(jù)，多條件判斷，渲染表格中的內(nèi)容

<script type="text/html" id="xls_bar">
        <div class="layui-clear-space">
            {% verbatim  %}
            {{# if((d.has_xls)==1){ }}
            <span>已上傳</span>
            {{# }else if((d.user==d.name) & (d.has_xls==0)) { }}
            <button class="layui-btn layui-btn-xs demo-class-accept" id="up_xls" value="{{=d.form_id}}" acti="{{=d.activities}}" lay-options="{
                accept: 'file',
                exts: 'xls|xlsx'
              }">上傳成績</button>
            {{# }else { }}
            <span>未上傳</span>
            {{# } }}
            {% endverbatim  %}
        </div>
      </script>

渲染table，與其中的按鈕觸發(fā)

var inst = table.render({
            elem: '#ID-table-demo-data',
            url: 'all_forms/',
            cols: [[
              {field: 'unit__name', title: '單位', width: 180},
              {field: 'name', title: '裝置', width: 220},
              {field: 'title', title: '演練項目', templet:'#add_title'},
              {field: 'has_xls', title: '成績', width: 220,templet:'#xls_bar'},
              {field: 'has_mp4', title: '視頻', width: 280,templet:'#mp4_bar'}
            ]],
            error: function(e, msg) {
                console.log("返回錯誤",e, msg)
                $(".layui-table-main").html('<div class="layui-none">無數(shù)據(jù)</div>');      
            },
            done: function(res, curr, count) {
            console.log("前端獲取到的數(shù)據(jù)是：",res.data);
            alarmTableRowSpan("unit__name", 1);
            upload.render({
                elem: '#up_xls', // 綁定多個元素
                url: '/add_title/', // 此處配置你自己的上傳接口即可
                accept: 'file', // 普通文件
                before: function(obj){ //obj包含信息，跟choose回調(diào)完全一致。在傳值之前先獲取id
                    var tableElem = this.item;
                    console.log("點擊選中的當前行數(shù)據(jù)",tableElem);
                    uploadParam = tableElem.attr('value');
                    uploadParam2 = tableElem.attr('acti');
                    console.log("點擊選中的當前行數(shù)據(jù)1",uploadParam);
                    console.log("點擊選中的當前行數(shù)據(jù)2",uploadParam2);
                    // layer.load(); //上傳loading
                    layer.open({
                        type: 1,
                        area: 'auto',
                        resize: false,
                        shadeClose: false,
                        title: false,
                        closeBtn: 0,
                        content: `
                            <div class="my-context" id="up_percent">00%</div>
                            `
                    });
                },
                data: {
                    form_id: function () {//data中寫值的時候，要用動態(tài)獲取的方式，即寫個function的方式，不然直接寫獲取不到相應(yīng)的值。
                        return uploadParam;
                    },
                    activitie: function () {//data中寫值的時候，要用動態(tài)獲取的方式，即寫個function的方式，不然直接寫獲取不到相應(yīng)的值。
                        return uploadParam2;
                    },
                    "csrfmiddlewaretoken": csrf_token
                },
                done: function(res){
                    if(res.code == 0){
                        layer.closeAll('loading'); //關(guān)閉loading
                        location.reload();
                        return layer.msg('上傳成功');
                    }
                  console.log(res);
                },
                progress: function(n, elem, e){
                    $('#up_percent').text(n+'%')
                    if(n == 100){
                      layer.msg('上傳完畢', {icon: 1});
                    }
                  }
              });
              upload.render({
                elem: '#up_mp4', // 綁定多個元素
                url: '/add_title/', // 此處配置你自己的上傳接口即可
                accept: 'file', // 普通文件
                before: function(obj){ //obj包含信息，跟choose回調(diào)完全一致。在傳值之前先獲取id
                    var tableElem = this.item;
                    console.log("點擊選中的當前行數(shù)據(jù)",tableElem);
                    uploadParam = tableElem.attr('value');
                    uploadParam2 = tableElem.attr('acti');
                    console.log("點擊選中的當前行數(shù)據(jù)1",uploadParam);
                    console.log("點擊選中的當前行數(shù)據(jù)2",uploadParam2);
                    // layer.load(); //上傳loading
                    layer.open({
                        type: 1,
                        area: 'auto',
                        resize: false,
                        shadeClose: false,
                        title: false,
                        closeBtn: 0,
                        content: `
                            <div class="my-context" id="up_percent">00%</div>
                            `
                    });
                },
                data: {
                    form_id: function () {//data中寫值的時候，要用動態(tài)獲取的方式，即寫個function的方式，不然直接寫獲取不到相應(yīng)的值。
                        return uploadParam;
                    },
                    activitie: function () {//data中寫值的時候，要用動態(tài)獲取的方式，即寫個function的方式，不然直接寫獲取不到相應(yīng)的值。
                        return uploadParam2;
                    },
                    "csrfmiddlewaretoken": csrf_token
                },
                done: function(res){
                    if(res.code == 0){
                        layer.closeAll('loading'); //關(guān)閉loading
                        location.reload();
                        return layer.msg('上傳成功');
                    }
                  console.log(res);
                },
                progress: function(n, elem, e){
                    $('#up_percent').text(n+'%')
                    console.log(n)
                    if(n == 100){
                      layer.msg('上傳完畢', {icon: 1});
                    }
                  }
              });
            }
          });

<div class="my-context" id="up_percent"></div> 定義了彈出層，用jq動態(tài)改變其中的內(nèi)容，顯示上傳進度，但是布局中，原因是彈出的layer，如果中間不放任何內(nèi)容的話，再動態(tài)添加內(nèi)容就不居中了，解決辦法是初始化內(nèi)容 00%
歡迎大家在評論區(qū)提問

到此這篇關(guān)于layui在表格中嵌入上傳按鈕，并修改上傳進度條的文章就介紹到這了,更多相關(guān)layui上傳進度條內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: