Layui数据表格嵌套文件上传按钮

简介: Layui数据表格嵌套文件上传按钮


Layui数据表格嵌套文件上传按钮,根据行数据id上传文件

  • 页面
<table class="layui-hide" id="NoticeInfoTable" lay-filter="test"></table>
  • JS初始化并渲染成文件上传按钮
table = layui.table //表格
table.render({
    elem: '#NoticeInfoTable'
    , height: 'full-200'
    , url: '/allFiles/viewlist' //数据接口
    , title: '表信息'
    , id: 'NoticeInfoTable'
    , page: true //开启分页
    , cols: [[ //表头
        {field: 'odd_numbers', title: '单号', width: 100, sort: true, fixed: 'left'}
        , {field: 'name', title: '文件名称', width: 480}
        , {field: 'type', title: '产品类型', width: 90, totalRow: true}
        , {field: 'batch_information', width: 100, title: '批次信息'}
        , {field: 'customer_provinces', width: 70, title: '省份', totalRow: true}
        , {field: 'upload_time', width: 110, title: '上传时间'}
        , {field: 'change_to_number', width: 120, title: '更改通知单号', totalRow: true}
        , {field: 'upload', fixed: 'right', width: 120, title: '操作', align: 'center'
            , templet: function(d){//这里的参数d是templete的固定用法,可以取到该行的所有数据
                if (d.file_state == 0){//未上传
                  //class里的upload_btn是用来标志上传按钮的,没有定义实际的css样式
                    return '<button class="layui-btn layui-btn-primary layui-btn-xs upload_btn" value="'+d.odd_numbers+'">上传</button>';
                }else { //已上传||被替换
                    return '<button class="layui-btn layui-btn-xs replace_btn" value="'+d.odd_numbers+'">替换</button>' +
                        '<button class="layui-btn layui-btn-danger layui-btn-xs delete_btn" lay-event="delete" value="'+d.odd_numbers+'">删除</button>'; //删除按钮不需要渲染上传,只是一个动作按钮,可以通过lay-event进行行事件监听
                }
            }
        }
    ]]
    , done: function(res, curr, count){//表格加载完成后,对上传按钮进行渲染
        var tableId = this.id;
        var tableElem = this.elem;
        //table render出来实际显示的table组件
        var tableViewElem = tableElem.next();
        //渲染当前页面的所有upload组件
        upload.render({
            elem: tableViewElem.find('.upload_btn')
            ,url: '/allFiles/uploadFile'
            ,accept: 'file'
            ,before: function(obj){ //obj包含信息,跟choose回调完全一致。在传值之前先获取id
                var tableElem = this.item;
                uploadParam = tableElem.attr('value');
                layer.load(); //上传loading
            }
            ,data: {
                odd_number: function () {//data中写值的时候,要用动态获取的方式,即写个function的方式,不然直接写获取不到相应的值。
                    return uploadParam;
                }
            }
            ,done: function (res) {
                layer.closeAll('loading'); //关闭loading
                layer.msg('上传成功');
            }
            ,error: function(index, upload){
                layer.closeAll('loading'); //关闭loading
                layer.msg('上传失败,请重试');
            }
        });
    }
});
//删除操作
table.on('tool(test)', function (obj) { //注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值"
    var data = obj.data; //获得当前行数据
    var layEvent = obj.event; //获得 lay-event 对应的值
    if (layEvent === 'delete') {
        layer.open({
            title: '提示'
            ,content: '此操作不可撤销,确认删除?'
            ,closeBtn: 0
            ,icon: 3
            ,time: 0 //不自动关闭
            ,btn: ['确定','取消']
            ,btnAlign: 'c'
            ,yes: function(index){
                layer.close(index);
                layer.load();
                //向服务端发送删除指令
                $.ajax({
                    url: '/allFiles/deleteFile'
                    ,data:{
                        odd_number: data.odd_numbers
                    }
                    ,success: function (data) {
                        layer.closeAll('loading');
                        layer.msg('删除成功');
                    }
                    ,error: function (data){
                        layer.closeAll('loading');
                        layer.msg('删除失败,请重试!',function () {});
                    }
                });
            }
        });
    }
});
  • 后台
//上传
@RequestMapping("/uploadFile")
@ResponseBody
public void uploadFile(@RequestParam("file")MultipartFile multipartFile, String odd_number){
    if(multipartFile == null || odd_number == null || "".equals(odd_number)){
        return;
    }
    //上传文件
    String fileName = multipartFile.getOriginalFilename(); //获取文件名,带后缀
    String path = "/H:/mmmm/" + odd_number +"/"; //文件夹路径
    File folderPath = new File(path);
    if (!folderPath.exists() && !folderPath.isDirectory()){//查询文件夹是否存在
        folderPath.mkdir();//建立一级子目录
        //folderPath.mkdirs();//建立多级子目录
        System.out.println("目录不存在,创建新文件夹");
    }
    File filePath = new File(path + fileName);
    try{
        multipartFile.transferTo(filePath);//将上传的文件写到服务器上指定的文件路径
        System.out.println("上传成功!");
    } catch (IOException e) {
        e.printStackTrace();
    }
}
//删除
@Override
@Transactional
public void replaceFile(MultipartFile multipartFile, String odd_number) {
    String fileName = multipartFile.getOriginalFilename();//文件名
    String path = "";
    path = "D:/test/" + fileName;
    File file = new File(path);
    if (file.exists()){
        if (file.delete()){
            System.out.println("删除成功");
        }else{
            System.out.println("删除失败");
        }
    }else {
        System.out.println("文件不存在");
    }
}


相关文章
LayUI upload上传组件上传文件的两种方式
LayUI upload上传组件上传文件的两种方式
1027 0
|
JSON 前端开发 Java
layui上传图片,前端直接拷代码,后端……
layui上传图片,前端直接拷代码,后端……
|
存储 分布式计算 Java
JuiceFS分布式文件系统源码分析(Java层)
讲解了hadoop-common java api层面JuiceFS的实现流程
504 0
JuiceFS分布式文件系统源码分析(Java层)
|
JavaScript
Vue~在线预览doc、docx、pdf、img文件
Vue~在线预览doc、docx、pdf、img文件
7022 0
|
11月前
|
JavaScript 前端开发
layui下拉框xm-select自定义搜索使用方法
【10月更文挑战第28天】`xm - select` 是基于 Layui 的下拉框增强插件,支持自定义搜索功能。实现步骤包括:1. 引入 Layui 和 xm - select 的核心文件;2. 创建下拉框的基本 HTML 结构;3. 使用 `layui.use` 函数初始化插件并配置搜索功能;4. 可选地进行高级自定义搜索优化,如模糊匹配、多字段搜索和实时更新数据。通过这些步骤,可实现灵活的下拉框搜索功能。
2227 1
|
11月前
|
前端开发 程序员 API
前端|基于 Layui 实现动态搜索选择框
网页端实现动态搜索选择框,要求下拉选项列表能根据用户输入内容动态刷新,最终提交的值必须是由选项列表中点选的。
292 3
|
12月前
|
存储 机器学习/深度学习 人工智能
深入浅出 AI 智能体(AI Agent)|技术干货
随着人工智能技术的发展,智能体(AI Agents)逐渐成为人与大模型交互的主要方式。智能体能执行任务、解决问题,并提供个性化服务。其关键组成部分包括规划、记忆和工具使用,使交互更加高效、自然。智能体的应用涵盖专业领域问答、资讯整理、角色扮演等场景,极大地提升了用户体验与工作效率。借助智能体开发平台,用户可以轻松打造定制化AI应用,推动AI技术在各领域的广泛应用与深度融合。
22301 1
|
12月前
|
前端开发
前端使用xlsx模板导出表格
【9月更文挑战第10天】在前端使用 `xlsx` 模板导出表格需完成以下步骤:首先引入 `xlsx` 库,准备数据与模板;接着读取模板文件,选择特定工作表并填充数据;最后将填充后的表格转换为二进制数据,创建 Blob 对象并触发下载。整个过程中可根据需求调整模板格式和数据填充方式。
414 5
|
11月前
|
监控 供应链 搜索推荐
获取店铺商品信息的 API 接口有哪些?
本文介绍了五个常用的电商平台获取店铺商品信息的 API 接口:淘宝、京东、1688、拼多多和慢慢买。每个接口的功能、使用方式及优势各不相同,涵盖商品详情、价格、销量、库存等信息,适用于商品分析、竞品分析、价格监控等场景,帮助商家提升业务效率和市场竞争力。
|
SQL 自然语言处理 关系型数据库
MySQL的match匹配多个字符串的语法
【8月更文挑战第29天】MySQL的match匹配多个字符串的语法
530 3