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(); // 刷新treeTable
                layer.msg(res.msg, { icon: 1 })
              } else {
                layer.msg(res.msg, { icon: 2 })
              }
            },
            error: function () {
              layer.msg('文件上传失败', { icon: 2 });
            }
          });
        }
      });
    }
    bindUploadClick();

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

深入解析:企业级OV SSL证书的技术价值与应用实践

JoySSL官网 注册码230918 在互联网安全日益受到重视的今天&#xff0c;SSL证书已成为保护网站数据传输安全的基石。其中&#xff0c;企业级OV&#xff08;Organization Validation&#xff09;SSL证书凭借其增强的安全特性和对企业身份的严格验证&#xff0c;在众多类型的SSL证…

Phi-3:手机上就能运行的强力语言模型

导语 phi-系列模型是微软研究团队推出的轻量级人工智能模型&#xff0c;旨在实现“小而精”的目标&#xff0c;能够实现在低功耗设备上例如智能手机和平板电脑上部署运行。截止目前&#xff0c;已经发布到了phi-3模型&#xff0c;本系列博客将沿着最初的phi-1到phi-1.5&#x…

HarmonyOS实战开发-如何通过Text实现部分文本高亮和超链接。

介绍 本示例通过自定义Span类型&#xff0c;在Text组件中使用ForEach遍历&#xff0c;根据不同的Span类型生成不同样式和功能的Span组件&#xff0c;实现部分文本高亮和超链接。 效果图预览 使用说明 点击超链接&#xff0c;根据链接类型出现相应提示弹窗。长按消息卡片出现…

不必追求深度,浅尝辄止为宜

近日笔者撰文称&#xff0c;有幸应《百度-百家号》相邀&#xff0c;在其发起的《征文任务》栏目中写作深度文章&#xff0c;便试着开头写了一篇《万科有“活下去”的可能性吗&#xff1f;》的时评文章&#xff0c;于5月3日发表&#xff0c;舆情反映不错&#xff0c;不到三天时间…

重生奇迹mu套装大全

1.战士 汉斯的皮套装&#xff1a;冰之指环,皮护腿,皮盔,皮护手,皮靴,皮铠,流星槌 汉斯的青铜套装&#xff1a;青铜护腿,青铜靴,青铜铠 汉斯的翡翠套装&#xff1a;雷之项链,翡翠护腿,翡翠盔,翡翠铠,远古之盾 汉斯的黄金套装&#xff1a;火之项链,黄金护腿,黄金护手,黄金靴,…

(双指针) 有效三角形的个数 和为s的两个数字 三数之和 四数之和

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 文章目录 前言 一、有效三角形的个数&#xff08;medium&#xff09; 1.1、题目 1.2、讲解算法原理 1.3、编写代码 二、和为s的两个数字 2.1、题目 2.2、讲解算…

动手开发基于Springboot的基础开发框架-01

本系列专题虽然是按教学的深度来定稿的&#xff0c;但在项目结构和代码组织方面是按生产系统的要求来书定的。在本章中主要介绍下基础开发框架的内容。后续所有章节的项目全是在本基础框架的基础上演进的。 工程结构介绍 SpringbootSeries&#xff1a;父工程&#xff0c;定义一…

【信息熵理论-01】最大熵的分布

文章目录 一、说明二、如何认识所谓的“熵”三、熵最大化问题3.1 设置最大化3.2 利用变分微积分 四、更广泛的影响和见解 一、说明 我觉得用最大熵来获取概率分布的方法很给力。您采用一些已知或约束&#xff0c;然后在这些条件下最大化信息熵&#xff0c;瞧&#xff01;你有一…

前端基础学习html(2)

目录 表格标签&#xff1a; 列表标签&#xff1a; 表格标签&#xff1a; <!-- 表格基本架构 --><!-- tr表示一行&#xff0c;td表示一行内单元格 --><!--th为第一行表头加粗居中显示 --><table border"1"><thead><tr><th&g…

【Linux】17. 进程间通信 --- 管道

1. 什么是进程间通信(进程间通信的目的) 数据传输&#xff1a;一个进程需要将它的数据发送给另一个进程 资源共享&#xff1a;多个进程之间共享同样的资源。 通知事件&#xff1a;一个进程需要向另一个或一组进程发送消息&#xff0c;通知它&#xff08;它们&#xff09;发生了…

sqlmodel实现唯一性校验3,检查多列同时重复

之前的方案虽然能够解决重复性问题&#xff0c;但是没有覆盖到多列同时重复的情况。 比如&#xff0c;我们可以认为用户名是可以重复的。但是用户名和年龄不能同时重复&#xff0c;那么这种情况该怎么解决呢&#xff1f; 之前的代码如下&#xff1a; from sqlalchemy import…

python直接发布到网站wordpress之三批量发布图片

在前面的文章中&#xff0c;实现了使用python操作wordpress发布文字内容和图片内容。 python直接发布到网站wordpress之一只发布文字-CSDN博客 python直接发布到网站wordpress之二发布图片-CSDN博客 不过&#xff0c;此时发布图片的数量只能是一张图片。但在实际应用中&…

效率跨越式提升的工农业对机器人专业的需求

需求 需要用人的地方一定会逐步收缩。 原来需要人的地方也会逐步被机器人取代。 机器人这个专业最强的悖论就是可以部分取代人。 此处&#xff1a;用人的地方是指“工农业”&#xff0c;包括工业和农业。 机器人工程行业算制造业吗 机器人工程终身学习和工作计划 趋势 工匠…

1077 互评成绩计算

solution 总成绩 &#xff08;老师成绩 同学去掉最高分去掉最低分的平均分&#xff09;/2&#xff0c;其中总成绩四舍五入取整 #include<iostream> #include<algorithm> using namespace std; int main(){int n, m, worst, better, sum, g, x, cnt;scanf("…

【数学建模】天然肠衣搭配问题

2011高教社杯全国大学生数学建模竞赛D题 天然肠衣&#xff08;以下简称肠衣&#xff09;制作加工是我国的一个传统产业&#xff0c;出口量占世界首位。肠衣经过清洗整理后被分割成长度不等的小段&#xff08;原料&#xff09;&#xff0c;进入组装工序。传统的生产方式依靠人工…

每日OJ题_DFS解决FloodFill⑤_力扣417. 太平洋大西洋水流问题

目录 力扣417. 太平洋大西洋水流问题 解析代码 力扣417. 太平洋大西洋水流问题 417. 太平洋大西洋水流问题 难度 中等 有一个 m n 的矩形岛屿&#xff0c;与 太平洋 和 大西洋 相邻。 “太平洋” 处于大陆的左边界和上边界&#xff0c;而 “大西洋” 处于大陆的右边界和下…

自动控制原理MATLAB:控制系统模型构建

在MATLAB中&#xff0c;常用的系统建模方法有传递函数模型、零极点模型以及状态空间模型等。 1系统传递函数模型描述&#xff1a; 命令格式&#xff1a; systf(num,den,Ts); 其中&#xff0c;num、den为分子多项式降幂排列的系数向量,Ts表示采样时间&#xff0c;缺省时描述…

AI 数据观 | TapData Cloud + MongoDB Atlas:大模型与 RAG 技术有机结合,落地实时工单处理智能化解决方案

本篇为「AI 数据观」系列文章第二弹&#xff0c;在这里&#xff0c;我们将进一步探讨 AI 行业的数据价值。以 RAG 的智能工单应用场景为例&#xff0c;共同探索如何使用 Tapdata Cloud MongoDB Atlas 实现具备实时更新能力的向量数据库&#xff0c;为企业工单处理的智能化和自…

在小黑框如何用Python写出多行代码

平时使用python自带的小黑框编译器只能一行代码一行代码的写&#xff0c; 方法一 可以新建一个文本txt格式&#xff0c;然后打开在里面输入你想要的Python代码&#xff0c;然后把名字改成xxx.py&#xff0c;然后点击小黑框&#xff0c;输入 python 把Py文件拖过来回车就行 方…

Hive内部表、外部表

Hive内部表、外部表 1. 内部表&#xff08;Managed Table&#xff09;&#xff1a; 内部表是由Hive完全管理的表&#xff0c;包括数据和元数据。当你删除内部表时&#xff0c;Hive会同时删除表的数据和元数据。内部表的数据存储在Hive指定的默认位置&#xff08;通常是HDFS上…
最新文章