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

现象描述:

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>

渲染操作按钮:

// 表格栏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;}}]]

表格操事件绑定:

// 全局变量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绑定点击事件:

// 绑定上传事件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.hqwc.cn/news/675154.html

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

相关文章

强大的禄得可转债自定义因子轮动系统完成,可转债三低为例子

经过几天的测试终于完成了可转债自定义因子轮动&#xff0c;超过1000行的源代码 我提供了服务器的数据支持自动api下载&#xff0c;我给大家维护数据 网页 http://120.78.132.143:8023/ 录得数据支持http://120.78.132.143:8023/lude_data_app api数据支持&#xff0c;我提供…

set_input_delay的理解

1&#xff0c;set_input_delay约束理解 input_delay是指输入的数据到达FPGA的pad引脚时相对于时钟边沿的延迟有多大&#xff0c;单位是ns&#xff0c;数值可以是正&#xff0c;也可以是负。通过set_input_delay约束告诉编译器输入时钟和输入数据的相位关系。如下图所示假设时钟…

【网络编程】http协议

预备知识 什么是http协议 HTTP&#xff08;Hypertext Transfer Protocol&#xff0c;超文本传输协议&#xff09;是一个应用层的协议&#xff0c;用于在网络中传输超文本&#xff08;如HTML文档&#xff09;。HTTP协议建立在TCP/IP协议之上&#xff0c;是Web浏览器和Web服务器…

LeetCode 面试经典150题 252.会议室

题目&#xff1a;给定一个会议时间安排的数组 intervals &#xff0c;每个会议时间都会包括开始和结束的时间 intervals[i] [starti, endi] &#xff0c;请你判断一个人是否能够参加这里面的全部会议。 思路&#xff1a;因为一个人在同一时刻只能参加一个会议&#xff0c;因此…

使用开放式用户通信连接两台西门子S71200plc

步骤1.在项目中创建两台PLC。 步骤2.分别设置两个PLC的参数。 plc1 plc2 步骤3.对两个plc进行组态 步骤4.在plc1和plc2中各自创建DB块&#xff0c;用于通信。 须在块的属性中取消优化块的访问选项。 plc1 plc2 步骤5.往plc1的main块中编写代码。 步骤6.往plc2的main块中编写…

B端UX/UI设计面试作品集分层源文件figmasketch模板

当您考虑找工作时&#xff0c;是否曾质疑过项目复盘作品集的重要性&#xff1f;实际上&#xff0c;一份精心准备的项目复盘作品集对于求职者来说具有无可估量的价值&#xff0c;特别是对于设计师这一职业领域。 以下所述或许对您而言已非陌生。您的作品集应当成为您专业技能与…

Redis之Linux下的安装配置

Redis之Linux下的安装配置 Redis下载 Linux下下载源码安装配置 方式一 官网下载&#xff1a;https://redis.io/download ​ 其他版本下载&#xff1a;https://download.redis.io/releases/ 方式二&#xff08;推荐&#xff09; GitHub下载&#xff1a;https://github.com/r…

使用IIS部署Vue项目

前提 使用IIS部署Vue项目&#xff0c;后端必须跨域&#xff0c;不要在Vue中用proxy跨域&#xff0c;那个只在dev环境中有用&#xff01; IIS安装&#xff0c;不用全部打勾&#xff0c;有些他默认就是方块 ■ 选择性安装的&#xff0c;就维持原样就可以。 添加网站配置 右键…

流畅的python-学习笔记_序列

概念 抽象基类&#xff1a;ABC, Abstract Base Class&#xff0c;ABC还有一个概念&#xff0c;是一个编程语言 序列 内置序列类型 分类 可分为容器类型和扁平类型 容器类型有list&#xff0c; tuple&#xff0c; collections.deque等&#xff0c;存储元素类型可不同&…

Codeforces Round 942 (Div. 2) A-D1

题目&#xff1a; Codeforces Round 942 (Div. 2) D2有缘再补吧… A. Contest Proposal 题意 两个升序&#xff08;不降&#xff09;的序列a和b&#xff0c;可以在a的任意位置插入任意数&#xff08;要保持升序&#xff09;&#xff0c;使对任意i&#xff0c;有a[i] < b[…

游戏辅助 -- 实战找人物对象基址

本节课在线学习视频&#xff1a; https://pan.quark.cn/s/3e83f4568031 一、打开CE工具&#xff0c;加载游戏进程 二、搜索人物血量144&#xff0c;选择首次扫描 三、进入游戏&#xff0c;让人物血量发生变化&#xff0c;搜索减少的数值 四、发现绿色的数值&#xff0c;一般绿…

️测试问我:为啥阅读量计数这么简单的功能你都能写出bug?

前言 可乐他们团队最近在做一个文章社区平台,由于人手不够,后端部分也是由前端同学来实现,使用的是 nest 。 今天他接到了一个需求,就是在用户点开文章详情的时候,把阅读量 +1 ,这里不需要判断用户是否阅读过,无脑 +1 就行。 它心想:这么简单,这不是跟 1+1 一样么。…