layui的treeTable组件,多层级上传按钮失效的问题解决

ops/2024/9/23 20:25:55/

现象描述:

layui的treeTable 的上传按钮在一层能用,展开后其他按钮正常点击,上传按钮无效。

具体原因没有深究,大概率是展开的子菜单没有被渲染treeTable的done管理到,导致没有重绘上传按钮。

解决方案:

不使用layu的上传组件方法,按照传统文件上传来,写一个隐藏的input框,每次触发上传事件的时候,就是触发input框的点击事件,具体代码如下:

html:

<div class="user-main user-collasped"><div class="layui-card"><div class="layui-card-body"><table id="file-table" lay-filter="file-table"></table><input type="file" id="fileInput" style="display: none;" /></div></div>
</div>

渲染操作按钮:

javascript">// 表格栏let cols = [[{ title: '文件名称', field: 'title' },{title: '类型', field: 'type', templet: function (d) {return d.type === 'dir' ? '目录' : '文件'}},{ title: '路径', field: 'path' },{title: '操作', align: 'center', width: 300, templet: function (d) {let html = '';if (d.type === 'dir') {html += '<button class="layui-btn layui-btn-xs" lay-event="addDir" title="新增目录"><i class="pear-icon pear-icon-add"></i></button>';html += '<button class="layui-btn layui-btn-xs layui-bg-blue" lay-event="upload" title="上传文件" style="margin-left: 5px;"><i class="pear-icon pear-icon-upload"></i></button>';html += '<button class="layui-btn layui-btn-xs layui-bg-red" lay-event="remove" title="删除" style="margin-left: 5px;"><i class="pear-icon pear-icon-ashbin"></i></button>';} else {html += '<button class="layui-btn layui-btn-primary layui-border layui-btn-xs" lay-event="download" title="下载"><i class="pear-icon pear-icon-download"></i></button>';html += '<button class="layui-btn layui-btn-xs layui-bg-red" lay-event="remove" title="删除" style="margin-left: 5px;"><i class="pear-icon pear-icon-ashbin"></i></button>';}return html;}}]]

表格操事件绑定:

javascript">// 全局变量let selectPath = null; //需要上传的父路径
// 绑定表格每行的操作按钮treeTable.on('tool(file-table)', function (obj) {if (obj.event === 'addDir') {addDir(obj.data);} else if (obj.event === 'upload') {selectPath = obj.data.path // selectPath全局变量$('#fileInput').click();} else if (obj.event === 'download') {// 下载文件downloadFile(obj.data);} else if (obj.event === 'remove') {// 删除文件removeFile(obj.data);}})

给input绑定点击事件:

javascript">// 绑定上传事件function bindUploadClick() {$('#fileInput').on('change', function () {var file = $('#fileInput')[0].files[0]; // 获取文件if (file) {// 创建FormData对象var formData = new FormData();formData.append('file', file);formData.append('folder_path', selectPath && selectPath.split('\\').slice(1).join('\\') || '')// 使用$.ajax上传文件$.ajax({url: MODULE_PATH + '/uploadFile',type: 'POST',data: formData,processData: false, // 不处理发送的数据contentType: false, // 不设置内容类型success: function (res) {// 清空选中的文件夹selectPath = null;if (res.success) {getData(); // 刷新treeTablelayer.msg(res.msg, { icon: 1 })} else {layer.msg(res.msg, { icon: 2 })}},error: function () {layer.msg('文件上传失败', { icon: 2 });}});}});}bindUploadClick();

如果有更好的解决方式,麻烦私信一下我,hahahaha


http://www.ppmy.cn/ops/37194.html

相关文章

【C++】string类的模拟实现

一、经典的string类问题 上一期&#xff0c;我们已经对string类有了简单的了解&#xff0c;大家能正常使用即可。在面试中&#xff0c;面试官喜欢让同学们自己来模拟实现string类&#xff0c;主要是实现string类的构造、拷贝构造、赋值运算符重载以及析构函数。请看以下string…

Nginx配置多个前端项目

1、修改nginx.conf配置文件&#xff1b; 2、必须包含默认的跟路径 location / { root D:/work/nginx-1.22.0/html; index index.html; } 3、添加要访问的前端项目信息&#xff0c;必须使用alias而不能使用root location /…

搭建Docker私有镜像仓库

大家好&#xff0c;今天给大家分享一下如何搭建私有镜像仓库&#xff0c;私有镜像仓库可以更好地管理和控制镜像的访问和使用&#xff0c;确保只有授权的人员能够获取和使用特定的镜像&#xff0c;而且方便团队内部共享定制化的镜像&#xff0c;提高开发和部署效率&#xff0c;…

人大金仓V8R6迁移mysql8.0

人大金仓数据库迁移mysql mysql版本&#xff1a;mysql 8.0.22 人大金仓版本;KingbaseES V008R006C008B0014 on x64 打开数据迁移工具 等待执行完成后使用命令窗口中提示的地址在浏览器中打开&#xff1a; 登录。此处登录不用修改任何信息&#xff0c;点击登录即可 新建源数…

数据结构-线性表-应用题-2.2-14

1&#xff09;算法基本设计思想&#xff1a; 2&#xff09;c语言描述&#xff1a; #define INT_MAX 0X7FFFFFFF int abs_(int a) {//绝对值if(a<0) return -a;else return a; } bool min(int a,int b,int c){if(a<b&&a<c) return true;else return false; } …

iOS 10权限问题

简单说明 1.注意需要打开info.plist文件添加相应权限以及权限的说明&#xff0c;否则程序在iOS10上会出现崩溃。 2.且添加时注意不要有空格。 3.输入Privacy一般会有提示。 权限说明 iOS 10支持的所有权限类型 Privacy - Bluetooth Peripheral Usage Description 蓝牙权限…

内容安全(IPS入侵检测)

入侵检测系统&#xff08; IDS &#xff09;---- 网络摄像头&#xff0c;侧重于风险管理&#xff0c;存在于滞后性&#xff0c;只能够进行风险发现&#xff0c;不能及时制止。而且早期的IDS误报率较高。优点则是可以多点进行部署&#xff0c;比较灵活&#xff0c;在网络中可以进…

解决Gitlab集成Jira时报SSL证书问题

1. 问题描述 在gitlab中集成jira的时候&#xff0c;由于jira是企业内部网址&#xff0c;并使用自己签名的SSL证书&#xff0c;一直会报证书验证不过的问题&#xff0c;报错信息如下&#xff1a; Connection failed. Check your integration settings. SSL_connect returned1 …