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

news2024/9/20 18:49:36

现象描述:

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.coloradmin.cn/o/1648442.html

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

相关文章

Docker容器创建各种镜像

目录 1.Docker创建Mysql容器 2.Docker创建Redis容器 3.Docker 创建minio容器 1.Docker创建Mysql容器 拉取镜像 docker pull mysql:8.0.20 宿主机创建挂载目录 /opt/mysql/conf /opt/mysql/data /opt/mysql/log 启动命令 docker run --name mysql -p 3306:3306 -v /opt/…

探索1688、淘宝、京东搜索商品聚合API接口:一站式电商搜索解决方案

随着电商行业的不断发展&#xff0c;电商平台的数量和商品种类都在快速增长。商家和开发者在运营过程中&#xff0c;需要经常进行跨平台的商品搜索和数据分析。然而&#xff0c;由于各个电商平台的数据接口存在差异&#xff0c;直接对接多个平台不仅效率低下&#xff0c;而且维…

【动态规划三】子数组系列

目录 leetcode题目 一、最大子数组和 二、环形子数组的最大和 三、乘积最大子数组 四、乘积为正数的最长子数组长度 五、等差数列划分 六、最长湍流子数组 七、单词拆分 八、环绕字符串中唯一的子字符串 子数组系列&#xff0c;属于线性dp问题&#xff0c;状态表示也是…

Java实现手机短信验证码(互亿无线)

互亿无线 互亿无线是一家提供电信类增值服务插件以及其他相关插件的公司&#xff0c;是中国移动、中国联通、中国电信三大运营商的战略合作伙伴与工信部认定的电信增值业务服务商。公司旗下运营三大业务平台&#xff1a;数字奖励营销活动平台、应用短信平台、营销短信平台。 官…

阿里开源的lowcode-engine:加速企业级应用开发的低代码利器

lowcode-engine 是阿里巴巴推出的一个企业级的低代码开发平台&#xff0c;它就像是给开发者的一个工具箱&#xff0c;里面装满了各种现成的工具和材料&#xff0c;让搭建应用程序变得像搭积木一样简单。你不需要从零开始&#xff0c;而是可以直接用这些工具和材料去构建你想要的…

AJ-Report开源数据大屏远程命令执行漏洞

文章目录 描述漏洞原理影响版本漏洞复现修复方案 描述 AJ-Report是全开源的一个BI平台&#xff0c;酷炫大屏展示&#xff0c;能随时随地掌控业务动态&#xff0c;让每个决策都有数据支撑。     多数据源支持&#xff0c;内置mysql、elasticsearch、kudu驱动&#xff0c;支持…

STM32单片机实战开发笔记-GPIO控制LED灯、蜂鸣器、继电器等【wulianjishu666】

单片机物联网开发资料&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1XzodQuML7CqZ4ZKinDGKkg?pwdbgep 提取码&#xff1a;bgep 单片机GPIO的Do输出功能 1、功能描述 根据MP3的声音频率&#xff0c;让LED灯以不同的高度&#xff08;LED的多少&#xff09;&#xf…

纯净水20、脉动30被指宰客!疯狂开始反噬小杨哥?

作为疯狂小杨哥早期粉&#xff0c;小柴好像很久没看到小杨哥的搞笑视频了。 自然&#xff0c;再在社交媒体上看到&#xff0c;小杨哥兄弟已经不再是那个青涩的少年了。 而是摇身一变不仅成为一个非常成功带货主播&#xff0c;且成为一个资本版图越来越多&#xff0c;玩的越来越…

AI实景自动无人直播软件:引领直播行业智能化革命;提升直播效果,无人直播软件助力智能讲解

随着科技的快速发展&#xff0c;AI实景自动无人直播软件正在引领直播行业迈向智能化革命。它通过智能讲解、一键开播和智能回复等功能&#xff0c;为商家提供了更高效、便捷的直播体验。此外&#xff0c;软件还支持手机拍摄真实场景或搭建虚拟场景&#xff0c;使直播画面更好看…

阴影渲染在AI去衣技术中的关键作用

引言&#xff1a; 随着人工智能技术的飞速发展&#xff0c;深度学习在图像处理领域取得了突破性的进展。其中&#xff0c;AI去衣技术作为一种高度复杂的图像到图像的转换过程&#xff0c;不仅要求算法能够精确地识别并处理衣物纹理和结构&#xff0c;还要求生成的结果具有高度的…

【C语言】——联合体与枚举

【C语言】——联合体与枚举 一、联合体1.1、联合体类型的声明1.2、联合体的特点1.3、相同成员的结构体和联合体对比1.4、联合体的大小计算1.5、联合体的应用举例 二、枚举2.1、枚举类型的声明2.2、枚举类型的优点 一、联合体 1.1、联合体类型的声明 联合体也叫做共用体   与…

CPLEX+YALMIP安装(matlab调用)

通过百度网盘分享的文件&#xff1a;yalmipc… 链接:https://pan.baidu.com/s/1wwYDu9bHFPmcCg5vD2pSXg?pwd9d1r 提取码:9d1r 复制这段内容打开「百度网盘APP 即可获取」 基于MATLAB的Cplex、Yalmip环境安装_如何安装给matlab安装cplex-CSDN博客 具体安装步骤可以参考这篇博…

模拟实现小米商城(有源码)

项目介绍 这是一个只有前端没有后端的项目, 适合于基础前端课设.该前端项目没有花里胡哨的特效, 纯手写 HTML CSS JS, 特别适合基础小白入门, 或者做为基础的课设(含有组员介绍页面), 此项目中, 充分使用 flex 布局, 绝对 相对定位, css 动画, 封装公共样式区域, 代码风格及命…

使用fitten code插件(vscode),替换通义千问,识别需求中的输入输出

今天我们介绍一个工具,具体介绍可以参考我的这篇文章的介绍,支持vs code 插件,Fitten Code是一款由非十科技开发的AI代码助手,旨在通过大模型驱动来提升编程效率和体验-免费神器-CSDN博客https://blog.csdn.net/lijigang100/article/details/137833223?spm=1001.2014.3001…

图像处理之PCA(C++)

图像处理之PCA&#xff08;C&#xff09; 文章目录 图像处理之PCA&#xff08;C&#xff09;前言一、PCA原理1.原理思想2.实现步骤 二、代码实现总结 前言 在科研、工程应用中&#xff0c;我们往往所获取的数据都包含着很多冗余的信息&#xff0c;这些冗余的信息会对我们分析数…

ubuntu22.04:软件包 wps-office 需要重新安装,但是我无法找到相应的安装文件

错误原因&#xff1a;手动在wps官网上下载的linux deb版本的wps2019,想卸载但是一直报错 解决办法&#xff1a;执行如下命令 sudo rm -rf /var/lib/dpkg/info/wps-office*sudo dpkg --remove --force-remove-reinstreq wps-office 说明&#xff1a; sudo命令是以root执行&…

word文件名和创建时间可以同时提取出来吗?答案是肯定的!方法很简单 一键就搞定

在日常生活和工作中&#xff0c;我们经常需要处理大量的Word文件&#xff0c;有时候需要提取这些文件的文件名以及它们的创建时间。虽然这听起来可能是一个复杂的任务&#xff0c;但实际上&#xff0c;通过一些简单的方法和工具&#xff0c;我们可以轻松地完成这一任务。在本文…

tkinter/python:第一个GUI程序——制作一个数据录入界面

下图是在网上搜寻的一个案例图样&#xff0c;经过了调整修改&#xff0c;登录时界面图如下&#xff1a; 登录后点击百货店铺按钮&#xff0c;界面如下 一、创建root窗口&#xff1a; geometry接收一个字符串&#xff0c;也就是需要建立的窗口尺寸和位置&#xff0c;geometry(…

跨境电商日报:虾皮开设新物流中心;Tk Shop菲律宾调整佣金费率

2024年5月7日跨境电商日报目录&#xff1a; 1.Shopee开设新物流中心&#xff1b; 2.TikTok Shop菲律宾站调整佣金费率&#xff1b; 3.野莓海外仓卖家可以销售9公斤以上商品&#xff1b; 4.亚马逊一季度净销售额同比增长13%&#xff1b; 5.巴西对华二氧化钛启动反倾销调查 …

AIGC (AI-Generated Content) 技术深度探索:现状、挑战与未来愿景

&#x1f525; 个人主页&#xff1a;空白诗 文章目录 &#x1f916; AIGC技术&#xff1a;塑造未来的创意与内容革命 &#x1f31f;引言 &#x1f680;AIGC技术发展现状 &#x1f4c8;核心技术驱动 &#x1f4a1;应用领域拓展 &#x1f310; 面临的挑战 ❌真实性与伦理考量 &am…