layui在表格中嵌入上传按钮,并修改上传进度条

当需要在表格中添加上传文件按钮,并不需要弹出填写表单的框的时候,需要在layui中,用按钮触发文件选择
有一点需要说明的是,layui定义table并不是在定义的标签中渲染,而是在紧接着的标签中渲染,所以要获取实例,要用 next()
也可以通过this或者css选择器来获取实例

效果展示

根据后端数据展示不同按钮
根据后端数据展示不同按钮
点击上传直接弹出文件选择框
在这里插入图片描述
点击上传后直接在屏幕中央显示进度,因为是遮罩层
在这里插入图片描述

思路

  1. 在table.render中添加上传按钮
  2. 表格加载完成后,给按钮绑定upload.render
  3. 通过给按钮中添加属性,来获取表单中想要传递的值

关键代码

因为是django项目结合的layui,所以只放出关键的代码
通过后端传递过来的数据,多条件判断,渲染表格中的内容

<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,与其中的按钮触发

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">无数据</div>');      },done: function(res, curr, count) {console.log("前端获取到的数据是:",res.data);alarmTableRowSpan("unit__name", 1);upload.render({elem: '#up_xls', // 绑定多个元素url: '/add_title/', // 此处配置你自己的上传接口即可accept: 'file', // 普通文件before: function(obj){ //obj包含信息,跟choose回调完全一致。在传值之前先获取idvar tableElem = this.item;console.log("点击选中的当前行数据",tableElem);uploadParam = tableElem.attr('value');uploadParam2 = tableElem.attr('acti');console.log("点击选中的当前行数据1",uploadParam);console.log("点击选中的当前行数据2",uploadParam2);// layer.load(); //上传loadinglayer.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中写值的时候,要用动态获取的方式,即写个function的方式,不然直接写获取不到相应的值。return uploadParam;},activitie: function () {//data中写值的时候,要用动态获取的方式,即写个function的方式,不然直接写获取不到相应的值。return uploadParam2;},"csrfmiddlewaretoken": csrf_token},done: function(res){if(res.code == 0){layer.closeAll('loading'); //关闭loadinglocation.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回调完全一致。在传值之前先获取idvar tableElem = this.item;console.log("点击选中的当前行数据",tableElem);uploadParam = tableElem.attr('value');uploadParam2 = tableElem.attr('acti');console.log("点击选中的当前行数据1",uploadParam);console.log("点击选中的当前行数据2",uploadParam2);// layer.load(); //上传loadinglayer.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中写值的时候,要用动态获取的方式,即写个function的方式,不然直接写获取不到相应的值。return uploadParam;},activitie: function () {//data中写值的时候,要用动态获取的方式,即写个function的方式,不然直接写获取不到相应的值。return uploadParam2;},"csrfmiddlewaretoken": csrf_token},done: function(res){if(res.code == 0){layer.closeAll('loading'); //关闭loadinglocation.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动态改变其中的内容,显示上传进度,但是布局中,原因是弹出的layer,如果中间不放任何内容的话,再动态添加内容就不居中了,解决办法是初始化内容 00%
欢迎大家在评论区提问

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/40267.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android 图像切换器:实现动态图像切换的关键技术与应用

在Android应用开发中&#xff0c;图像切换器是一种常见且实用的组件&#xff0c;用于实现图片的动态切换和展示。本文将探讨在Android平台上实现图像切换器的关键技术和应用场景&#xff0c;帮助开发者深入了解其原理与实现方法。 关键技术解析 图像切换器的实现依赖于几个核…

c++ 简单线程池

头文件 #pragma once #include <iostream> #include <vector> #include <queue> #include <thread> #include <mutex> #include <condition_variable> #include <functional> #include <future>class ThreadPool { public:Th…

【保姆级教学】Stable Diffusion提示词书写攻略!

前言 Stable Diffusion是一种深度学习模型&#xff0c;它能够根据提示词生成高质量的图像。在Stable Diffusion模型中&#xff0c;提示词起着至关重要的作用&#xff0c;因为它们为模型提供了关于所需输出的指导。本文将探讨Stable Diffusion关于提示词的原理&#xff0c;包括…

JAVA+SSM+VUE《教学视频点播系统》

1管理员登录 管理员登录&#xff0c;通过填写用户名、密码、角色等信息&#xff0c;输入完成后选择登录即可进入视频点播系统&#xff0c;如图1所示。 图1管理员登录界面图 2管理员功能实现 2.1 修改密码 管理员对修改密码进行填写原密码、新密码、确认密码并进行删除、修改…

MobileDiffusion:移动设备上亚秒级文本到图像生成

文本到图像扩散模型在生成高质量图像方面具有卓越的能力&#xff0c;这些模型是多种应用的基础&#xff0c;包括图像编辑、控制生成、个性化内容生成、视频合成和低级视觉任务等。然而&#xff0c;这些大规模模型通常需要在具有强大神经计算单元的服务器上运行&#xff0c;在移…

每天一个数据分析题(四百零六)- 因子分析

关于因子分析的KMO检验说法错误的是&#xff08; &#xff09;。 A. KMO统计量是取值在0和1之间 B. 当所有变量间的简单相关系数平方和远远大于偏相关系数平方和时&#xff0c;KMO值越接近于1 C. 当KMO值接近1时&#xff0c;表示各变量之间的偏相关系数应该很小 D. 当所有变…

MySQL 函数简介

MySQL 提供了丰富的函数&#xff0c;以下是一些常见的类型和示例&#xff1a; 数学函数&#xff1a; **1.ABS(x) &#xff1a;返回 x 的绝对值。 示例&#xff1a; select ABS(-89);**2. CEIL(x) &#xff1a;返回大于或等于 x 的最小整数。 示例&#xff1a; select CEIL(-…

get_metrology_object_result 得到计量模型的测量结果

get_metrology_object_result (Operator) 名称 get_metrology_object_result 得到计量模型的测量结果 签名 get_metrology_object_result( : : MetrologyHandle, Index, Instance, GenParamName, GenParamValue : Parameter) 描述 get_metrology_object_result允许访问由…

设备维护管理系统的主要内容有哪些

设备维护管理系统是一个综合的管理工具&#xff0c;旨在提高设备维修的效率和效果&#xff0c;优化资源利用&#xff0c;并确保设备的稳定运行。以下是设备维护管理系统的主要内容&#xff1a; 设备台账信息管理&#xff1a; 设备台账&#xff1a;记录设备的基本信息&#xff0…

【小沐学AI】Python实现语音识别(whisper+HuggingFace)

文章目录 1、简介1.1 whisper 2、HuggingFace2.1 安装transformers2.2 Pipeline 简介2.3 Tasks 简介2.3.1 sentiment-analysis2.3.2 zero-shot-classification2.3.3 text-generation2.3.4 fill-mask2.3.5 ner2.3.6 question-answering2.3.7 summarization2.3.8 translation 3、…

surfer做等值线图笔记

surfer等值线图及其白化 **grd文件的制作****白化的边界文件的制作****白化****绘图****逆转坐标轴** grd文件的制作 单击格网&#xff0c;选择x,y,z的数据&#xff0c;选择克里金插值方法&#xff0c;让后确定&#xff0c;保存grd文件 白化的边界文件的制作 surfer新建表&am…

J-Flash刷机的步骤

1、Keil编译代码&#xff0c;生成文件&#xff1a;E:\automotive\xxx.axf 2、打开"SEGGER J-Flash V7.88k"&#xff0c;配置Project information 3、点击菜单栏中的"File"&#xff0c;open data file&#xff0c;找到所需的xxx.axf文件 4、按快捷键F7进…

Ubuntu24.04(22.04+版本通用)Miniconda与Isaacgym

1. ubuntu24.04安装minicondda mkdir -p ~/miniconda3 wget https://repo.anaconda.com/miniconda/Miniconda3-latest-Linux-x86_64.sh -O ~/miniconda3/miniconda.sh解释下这段代码 bash ~/miniconda3/miniconda.sh -b -u -p ~/miniconda3~/miniconda3/miniconda.sh: 指向Mi…

前端笔记-day12

文章目录 01-视口02-宽度适配方案03-rem体验04-rem基本使用05-媒体查询06-rem适配07-rem布局08-less-体验09-less-注释10-less-运算11-less-嵌套12-less-变量13-less-导入14-less-导出15-less-禁止导出16-急速问诊&#xff08;不准确写法&#xff09;index.htmlindex.css 17-急…

mmdetection3增加12种注意力机制

在mmdetection/mmdet/models/layers/目录下增加attention_layers.py import torch.nn as nn from mmdet.registry import MODELS #自定义注意力机制算法 from .attention.CBAM import CBAMBlock as _CBAMBlock from .attention.BAM import BAMBlock as _BAMBlock from .attent…

C++的模板(十):shared_ptr的上锁问题

CSTL中的智能指针shared_ptr以前没用过&#xff0c;它是不是线程安全过去也没关注过。很多说它是不安全的&#xff0c;也有说是安全的。线程安全的问题&#xff0c;简单测试是测不出&#xff0c;到底怎么样&#xff0c;需要直接看代码。 从代码看&#xff0c;shared_ptr是个简…

使用表单系统快速搭建邀请和签到系统

在组织活动时&#xff0c;邀请和签到环节往往是活动成败的关键之一。传统的纸质邀请和签到方式不仅费时费力&#xff0c;还容易出现各种问题&#xff0c;例如名单遗漏、签到混乱等。而使用TDuckX“搭建邀请和签到系统”将彻底改变这一现状&#xff0c;为活动组织者提供了一种高…

python单元测试入门

编写基本的单元测试来验证代码的行为。 使用的库&#xff1a;unittest 单元测试框架 python的unittest库的基本单元测试框架可以表示为&#xff1a; import unittestclass XXXTests(unittest.TestCase): # 第一个测试集classmethoddef setUpClass(self):...self.x, self.y …

STM32蓝牙HID实战:打造低功耗、高性能的客制化键盘

一、项目概述 本项目旨在使用STM32单片机打造一款功能强大的蓝牙客制化键盘&#xff0c;它拥有以下特点&#xff1a; 九键布局&#xff0c;小巧便携: 满足日常使用需求&#xff0c;方便携带。全键可编程: 所有按键和旋钮均可通过电脑软件自定义快捷键&#xff0c;实现个性化功…

curl代理用户名或密码出现特殊字符时需要转义

举例&#xff1a;使用代理127.0.0.1:3128访问百度, 用户名peter, 密码123! 密码中包含&#xff0c;需要转义。 查询在线URL编码工具, %21是!的URL编码&#xff0c;curl使用方法如下&#xff1a; curl -x peter:123%21127.0.0.1:3128 https://www.baidu.com参考 https://www.u…