layui在表格中嵌入上傳按鈕并修改上傳進度條的實例
更新時間：2024年07月05日 11:20:48 作者：學(xué)習(xí)做游戲中
這篇文章主要介紹了layui在表格中嵌入上傳按鈕并修改上傳進度條的實例,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
當(dāng)需要在表格中添加上傳文件按鈕，并不需要彈出填寫表單的框的時候，需要在layui中，用按鈕觸發(fā)文件選擇
有一點需要說明的是，layui定義table并不是在定義的標(biāo)簽中渲染，而是在緊接著的標(biāo)簽中渲染，所以要獲取實例，要用 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("點擊選中的當(dāng)前行數(shù)據(jù)",tableElem);
uploadParam = tableElem.attr('value');
uploadParam2 = tableElem.attr('acti');
console.log("點擊選中的當(dāng)前行數(shù)據(jù)1",uploadParam);
console.log("點擊選中的當(dāng)前行數(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("點擊選中的當(dāng)前行數(shù)據(jù)",tableElem);
uploadParam = tableElem.attr('value');
uploadParam2 = tableElem.attr('acti');
console.log("點擊選中的當(dāng)前行數(shù)據(jù)1",uploadParam);
console.log("點擊選中的當(dāng)前行數(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)文章希望大家以后多多支持腳本之家！
相關(guān)文章
各種電商活動都喜換選擇限時秒殺活動形式，這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)限時秒殺功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
微信小程序使用progress組件實現(xiàn)顯示進度功能【附源碼下載】
這篇文章主要介紹了微信小程序使用progress組件實現(xiàn)顯示進度功能,涉及progress組件相關(guān)屬性設(shè)置操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2017-12-12
這篇文章主要為大家詳細(xì)介紹了Bootstrap選項卡學(xué)習(xí)筆記，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
在使用原生框架開發(fā)小程序時遇到一個問題，在 app.wxss 中定義的全局樣式在自定義組件中不生效，本文就詳細(xì)的介紹一下，感興趣的可以了解一下2021-08-08
這篇文章主要介紹了JS獲取本地地址及天氣的方法,結(jié)合實例形式總結(jié)分析了javascript通過瀏覽器、第三方API實現(xiàn)獲取本地地址與天氣的相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
本篇文章主要是對JS中設(shè)置readOnly值的方法進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
這篇文章主要介紹了JavaScript數(shù)組對象賦值用法,涉及javascript用戶交互及針對數(shù)組的排序技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
這篇文章主要介紹了淺談Fetch 數(shù)據(jù)交互方式,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
Javascript String對象擴展HTML編碼和解碼的方法
Javascript String對象擴展HTML編碼和解碼的代碼2009-06-06
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)滑動輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09