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上传组件上传文件的两种方式
1066 0
|
前端开发 JavaScript 数据库
layui联动菜单搜索select表单选项的设置方法
layui联动菜单搜索select表单选项的设置方法
935 0
|
移动开发 前端开发 数据管理
分享83个Html后端模板,总有一款适合您
分享83个Html后端模板,总有一款适合您
364 2
|
JSON 前端开发 Java
layui上传图片,前端直接拷代码,后端……
layui上传图片,前端直接拷代码,后端……
|
存储 分布式计算 Java
JuiceFS分布式文件系统源码分析(Java层)
讲解了hadoop-common java api层面JuiceFS的实现流程
512 0
JuiceFS分布式文件系统源码分析(Java层)
|
JavaScript 算法 前端开发
layui框架实战案例(16):xm-select下拉多选插件实战记录(远程搜索、过滤、翻页、单选、提示文字)
layui框架实战案例(16):xm-select下拉多选插件实战记录(远程搜索、过滤、翻页、单选、提示文字)
2436 0
|
6月前
|
存储 消息中间件 缓存
RocketMQ原理—3.源码设计简单分析下
本文介绍了Producer作为生产者是如何创建出来的、启动时是如何准备好相关资源的、如何从拉取Topic元数据的、如何选择MessageQueue的、与Broker是如何进行网络通信的,Broker收到一条消息后是如何存储的、如何实时更新索引文件的、如何实现同步刷盘以及异步刷盘的、如何清理存储较久的磁盘数据的,Consumer作为消费者是如何创建和启动的、消费者组的多个Consumer会如何分配消息、Consumer会如何从Broker拉取一批消息。
246 11
RocketMQ原理—3.源码设计简单分析下
|
12月前
|
前端开发 程序员 API
前端|基于 Layui 实现动态搜索选择框
网页端实现动态搜索选择框,要求下拉选项列表能根据用户输入内容动态刷新,最终提交的值必须是由选项列表中点选的。
333 3
|
12月前
|
JavaScript 前端开发
layui下拉框xm-select自定义搜索使用方法
【10月更文挑战第28天】`xm - select` 是基于 Layui 的下拉框增强插件,支持自定义搜索功能。实现步骤包括:1. 引入 Layui 和 xm - select 的核心文件;2. 创建下拉框的基本 HTML 结构;3. 使用 `layui.use` 函数初始化插件并配置搜索功能;4. 可选地进行高级自定义搜索优化,如模糊匹配、多字段搜索和实时更新数据。通过这些步骤,可实现灵活的下拉框搜索功能。
2500 1
|
10月前
|
关系型数据库 MySQL Linux
Linux下mysql数据库的导入与导出以及查看端口
本文详细介绍了在Linux下如何导入和导出MySQL数据库,以及查看MySQL运行端口的方法。通过这些操作,用户可以轻松进行数据库的备份与恢复,以及确认MySQL服务的运行状态和端口。掌握这些技能,对于日常数据库管理和维护非常重要。
371 8