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数据表格可编辑扩展下拉框
layUI数据表格可编辑扩展下拉框
201 0
|
SQL 前端开发 API
关于ElementUI之动态树+数据表格+分页实例
关于ElementUI之动态树+数据表格+分页实例
198 0
|
数据库
ElementUI动态树,数据表格以及分页的实现
ElementUI动态树,数据表格以及分页的实现
|
7月前
|
JSON 前端开发 JavaScript
layui-数据表格的实现
`layui`是一个前端UI框架,本文档介绍了如何使用layui创建数据表格。首先展示了三张截图来预览效果,接着讲解了下载layui资源包并导入到项目中的步骤。然后,在新建的web项目中引入layui的CSS和JS文件。文档提供了模拟的JSON数据来展示表格内容。接下来,详细说明了数据表格的实现,包括注意事项和代码实现,强调了`table`标签的`id`与`script`中`elem`的匹配。此外,文档还涵盖了监听头部工具栏和工具条事件的方法,并展示了弹出层的实现,用于添加和编辑表格数据。最后,给出了完整的HTML源码示例。
127 0
|
7月前
|
缓存 JavaScript 前端开发
vue + element Table的数据多选,多页选择数据回显,分页记录保存选中的数据。
vue + element Table的数据多选,多页选择数据回显,分页记录保存选中的数据。
130 0
|
数据格式
layui数据表格
layui数据表格
59 0
|
前端开发 JavaScript
ElementUI之动态树+数据表格+分页2
ElementUI之动态树+数据表格+分页2
103 0
|
JavaScript 前端开发 API
ElementUI--数据表格增删改查与表单验证
ElementUI--数据表格增删改查与表单验证
65 0
|
JavaScript BI
el-table 多表格弹窗嵌套数据显示异常错乱问题
## 1、业务背景 使用vue+element开发报表功能时,需要列表上某列的超链接按钮弹窗展示,在弹窗的el-table列表某列中再次使用超链接按钮点开弹窗,以此类推多表格弹窗嵌套,本文以弹窗两次为例 最终效果如下示例页面 ![微信截图_20231110143638.png](https://ucc.alicdn.com/pic/developer-ecology/j2ygdazy447va_6eb0201441bc40a4b5bda9a7e573f0d2.png)
231 0