layui在表格中嵌入上傳按鈕并修改上傳進(jìn)度條的實(shí)例
更新時(shí)間：2024年07月05日 11:20:48 作者：學(xué)習(xí)做游戲中
這篇文章主要介紹了layui在表格中嵌入上傳按鈕并修改上傳進(jìn)度條的實(shí)例,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
當(dāng)需要在表格中添加上傳文件按鈕，并不需要彈出填寫(xiě)表單的框的時(shí)候，需要在layui中，用按鈕觸發(fā)文件選擇
有一點(diǎn)需要說(shuō)明的是，layui定義table并不是在定義的標(biāo)簽中渲染，而是在緊接著的標(biāo)簽中渲染，所以要獲取實(shí)例，要用 next()
也可以通過(guò)this或者css選擇器來(lái)獲取實(shí)例
效果展示
根據(jù)后端數(shù)據(jù)展示不同按鈕
點(diǎn)擊上傳直接彈出文件選擇框
點(diǎn)擊上傳后直接在屏幕中央顯示進(jìn)度，因?yàn)槭钦谡謱?/p>
思路
- 在table.render中添加上傳按鈕
- 表格加載完成后，給按鈕綁定upload.render
- 通過(guò)給按鈕中添加屬性，來(lái)獲取表單中想要傳遞的值
關(guān)鍵代碼
因?yàn)槭莇jango項(xiàng)目結(jié)合的layui，所以只放出關(guān)鍵的代碼
通過(guò)后端傳遞過(guò)來(lái)的數(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'
}">上傳成績(jī)</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: '演練項(xiàng)目', templet:'#add_title'},
{field: 'has_xls', title: '成績(jī)', width: 220,templet:'#xls_bar'},
{field: 'has_mp4', title: '視頻', width: 280,templet:'#mp4_bar'}
]],
error: function(e, msg) {
console.log("返回錯(cuò)誤",e, msg)
$(".layui-table-main").html('<div class="layui-none">無(wú)數(shù)據(jù)</div>');
},
done: function(res, curr, count) {
console.log("前端獲取到的數(shù)據(jù)是：",res.data);
alarmTableRowSpan("unit__name", 1);
upload.render({
elem: '#up_xls', // 綁定多個(gè)元素
url: '/add_title/', // 此處配置你自己的上傳接口即可
accept: 'file', // 普通文件
before: function(obj){ //obj包含信息，跟choose回調(diào)完全一致。在傳值之前先獲取id
var tableElem = this.item;
console.log("點(diǎn)擊選中的當(dāng)前行數(shù)據(jù)",tableElem);
uploadParam = tableElem.attr('value');
uploadParam2 = tableElem.attr('acti');
console.log("點(diǎn)擊選中的當(dāng)前行數(shù)據(jù)1",uploadParam);
console.log("點(diǎn)擊選中的當(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中寫(xiě)值的時(shí)候，要用動(dòng)態(tài)獲取的方式，即寫(xiě)個(gè)function的方式，不然直接寫(xiě)獲取不到相應(yīng)的值。
return uploadParam;
},
activitie: function () {//data中寫(xiě)值的時(shí)候，要用動(dòng)態(tài)獲取的方式，即寫(xiě)個(gè)function的方式，不然直接寫(xiě)獲取不到相應(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', // 綁定多個(gè)元素
url: '/add_title/', // 此處配置你自己的上傳接口即可
accept: 'file', // 普通文件
before: function(obj){ //obj包含信息，跟choose回調(diào)完全一致。在傳值之前先獲取id
var tableElem = this.item;
console.log("點(diǎn)擊選中的當(dāng)前行數(shù)據(jù)",tableElem);
uploadParam = tableElem.attr('value');
uploadParam2 = tableElem.attr('acti');
console.log("點(diǎn)擊選中的當(dāng)前行數(shù)據(jù)1",uploadParam);
console.log("點(diǎn)擊選中的當(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中寫(xiě)值的時(shí)候，要用動(dòng)態(tài)獲取的方式，即寫(xiě)個(gè)function的方式，不然直接寫(xiě)獲取不到相應(yīng)的值。
return uploadParam;
},
activitie: function () {//data中寫(xiě)值的時(shí)候，要用動(dòng)態(tài)獲取的方式，即寫(xiě)個(gè)function的方式，不然直接寫(xiě)獲取不到相應(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動(dòng)態(tài)改變其中的內(nèi)容，顯示上傳進(jìn)度，但是布局中，原因是彈出的layer，如果中間不放任何內(nèi)容的話，再動(dòng)態(tài)添加內(nèi)容就不居中了，解決辦法是初始化內(nèi)容 00%
歡迎大家在評(píng)論區(qū)提問(wèn)
到此這篇關(guān)于layui在表格中嵌入上傳按鈕，并修改上傳進(jìn)度條的文章就介紹到這了,更多相關(guān)layui上傳進(jìn)度條內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript實(shí)現(xiàn)限時(shí)秒殺功能
各種電商活動(dòng)都喜換選擇限時(shí)秒殺活動(dòng)形式，這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)限時(shí)秒殺功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
微信小程序使用progress組件實(shí)現(xiàn)顯示進(jìn)度功能【附源碼下載】
這篇文章主要介紹了微信小程序使用progress組件實(shí)現(xiàn)顯示進(jìn)度功能,涉及progress組件相關(guān)屬性設(shè)置操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2017-12-12
Bootstrap選項(xiàng)卡學(xué)習(xí)筆記分享
這篇文章主要為大家詳細(xì)介紹了Bootstrap選項(xiàng)卡學(xué)習(xí)筆記，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
在使用原生框架開(kāi)發(fā)小程序時(shí)遇到一個(gè)問(wèn)題，在 app.wxss 中定義的全局樣式在自定義組件中不生效，本文就詳細(xì)的介紹一下，感興趣的可以了解一下2021-08-08
這篇文章主要介紹了JS獲取本地地址及天氣的方法,結(jié)合實(shí)例形式總結(jié)分析了javascript通過(guò)瀏覽器、第三方API實(shí)現(xiàn)獲取本地地址與天氣的相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
本篇文章主要是對(duì)JS中設(shè)置readOnly值的方法進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
JavaScript數(shù)組對(duì)象賦值用法實(shí)例
這篇文章主要介紹了JavaScript數(shù)組對(duì)象賦值用法,涉及javascript用戶交互及針對(duì)數(shù)組的排序技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
這篇文章主要介紹了淺談Fetch 數(shù)據(jù)交互方式,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
Javascript String對(duì)象擴(kuò)展HTML編碼和解碼的方法
Javascript String對(duì)象擴(kuò)展HTML編碼和解碼的代碼2009-06-06
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)滑動(dòng)輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09