前言

若依(ruoyi)： v4.6.0
layui： 2.3.0。参考这里。
jQuery： v2.1.4

附件上传功能

表格使用若依(ruoyi)封装的bootstrapTable
表格数据加载使用bootstrapTable的默认方式（从url拉取数据）
在表格加载完成后，添加一空行，空行操作为“上传”
点击上传按钮后，出现选择文件对话框。选择完文件，立即开始上传。
上传完成后，刷新表格
删除完成后，刷新表格

上传列表渲染

<div class="form-group"><label class="col-sm-2 control-label">附件：</label><div class="col-sm-10"><input type="hidden" class="form-control" name="aid" id="aid"><table id="bootstrap-table"></table></div>
</div>

/*附件表格*/
$(function() {var options = {data: [],url: ctx + "xxx/list",removeUrl: ctx + "xxx/delete",modalName: "附件",pagination: false,showSearch: false,showRefresh: false,showToggle: false,showColumns: false,sidePagination: "client",columns: [{field: 'id',title: 'ID',visible: false,},...{title: '操作',align: 'center',formatter: function(value, row, index) {var actions = [];actions.push('<a class="btn btn-danger btn-xs" href="javascript:void(0)" οnclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a> ');return actions.join('');}}],queryParams: function () {return {pid: window.pid};},};$.table.init(options);
});

removeUrl ： xxx/delete?ids=xxx

上传按钮

在表格渲染完成后，向表格中新增一行，改行的操作为“上传”

/*附件表格*/
$(function() {var options = {...columns: [...{title: '操作',align: 'center',formatter: function(value, row, index) {var actions = [];if (row.newLine) {actions.push('<a class="btn btn-success btn-xs" href="javascript:void(0)" id="uploadBtn"><i class="fa fa-plus"></i>上传</a> ');} else {actions.push('<a class="btn btn-danger btn-xs" href="javascript:void(0)" οnclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a> ');}return actions.join('');}}],onLoadSuccess: function() {sub.addColumnWithoutSave({newLine:true});},...};$.table.init(options);
});

sub： sub 在 ruoyi/js/common.js 中定义。
为 sub 添加 addColumnWithoutSave 方法

    addColumnWithoutSave: function(row, tableId) {var currentId = $.common.isEmpty(tableId) ? table.options.id : tableId;table.set(currentId);var count = $("#" + currentId).bootstrapTable('getData').length;$("#" + currentId).bootstrapTable('insertRow', {index: count + 1,row: row});}

为上传按钮添加点击事件

/*附件表格*/
$(function() {var options = {...columns: [...{title: '操作',align: 'center',formatter: function(value, row, index) {var actions = [];if (row.newLine) {actions.push('<a class="btn btn-success btn-xs" href="javascript:void(0)" id="uploadBtn"><i class="fa fa-plus"></i>上传</a> ');} else {actions.push('<a class="btn btn-danger btn-xs" href="javascript:void(0)" οnclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a> ');}return actions.join('');}}],onLoadSuccess: function() {sub.addColumnWithoutSave({newLine:true});bindAction4UploadBtn();},...};$.table.init(options);window.bindAction4UploadBtn= function () {$("#uploadBtn").click(function(){console.log("click uploadBtn");});}
});

为上传按钮的绑定上传控件

/*附件表格*/
$(function() {var options = {...columns: [...{title: '操作',align: 'center',formatter: function(value, row, index) {var actions = [];if (row.newLine) {actions.push('<a class="btn btn-success btn-xs" href="javascript:void(0)" id="uploadBtn"><i class="fa fa-plus"></i>上传</a> ');} else {actions.push('<a class="btn btn-danger btn-xs" href="javascript:void(0)" οnclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a> ');}return actions.join('');}}],onLoadSuccess: function() {sub.addColumnWithoutSave({newLine:true});bindAction4UploadBtn();},...};$.table.init(options);window.bindAction4UploadBtn= function () {/*绑定上传控件*/layui.use('upload', function(){var upload = layui.upload;upload.render({elem: '#uploadBtn' //绑定元素,url: ctx+'xxx/upload' //上传接口,size : 3*1024 //文件大小3M,exts: 'jpg|jpeg|png' //限制上传文件的后缀名,auto: true /*选择文件后，立即上传*/,data: { pid: xxx },before: function(obj){$.modal.loading("正在处理中，请稍后...");},done: function(res){/*上传完成处理业务逻辑*/$.modal.closeLoading();$.modal.msgSuccess(res.msg);/*刷新表格*/$.table.refresh();},error: function(e){console.log("error==="+e);}});});}
});

【若依(ruoyi)】附件上传功能相关推荐

WangEditor增加附件上传功能
WangEditor增加附件上传功能 WangEditor富文本官方地址 // 上传附件功能 // 第一,菜单 class ,Button 菜单继承 BtnMenu classclass FileMe ...
activiti扩展节点属性（在UserTask节点上添加附件上传功能）
给节点添加属性: 1.首先在stencilset.json上模仿其他属性添加新的节点属性的基础配置注意type属性前端根据这个属性值去确认改节点属性在页面上所要表现得形式 {"name ...
java上传文件限制大小_Java Web：附件上传，两种文件上传限制格式及大小方法，学习笔记文件操作【诗书画唱】...
附件上传: package com.jy.controller; import java.io.File; import java.io.FileOutputStream; import java.i ...
Dynamics 365 OP的UCI下附件上传超过大小限制后的提示错误
针对CRM自带的附件上传功能,对于用户上传附件的大小限制是可以设置的,比如像下图这样但是在UCI里确碰到了如下的错误,当我上传的附件大于10M时,页面弹出的错误确是5M,而不是实际设置的大小在Cl ...
基于ruoyi+vue+elementUI实现列表，新增，附件上传，tab+springBoot+mybatis+oracle序列+批量新增
基于ruoyi+vue+elementUI实现列表,新增,附件上传,tab+springBoot+mybatis+oracle序列+批量新增页面效果列表页面新增页面详情页面代码实现列表+新 ...
闲人闲谈PS之二十一——SAP自定义程序增加附件上传下载功能
惯例闲话:国庆假期后,状态不佳,闲人找回状态的方法,对电脑翻箱倒柜,整理文件,往往在整理鸡零狗碎时,会有一些新收获,这倒成了自我调整的一套规律- 这次整理捣鼓,还真是发现了一个解决长久以来SAP被人吐 ...
odoo14 ir.attachment附件上传与附件预览功能
一.附件上传这里收集了三种附件上传方式: 1.odoo自带附件上传安装odoo自带的附件列出及文档模块这样在编辑界面就可以看到附件上传按钮了(odoo14自己测试没成功,暂时不知道原因) 2. ...
使用DOM方法实现多附件上传客户端
有时候需要传多个附件,再次我用javascript的dom方式实现了次功能,很实用的. 功能呢就是用户可以添加多个附件,每次点击添加添加一个新的上传文本域,对于已经添加的上传文本域,用户可以点击 ...
后端：Layui实现文件上传功能
今天给大家分享采用AspNet MVC+前端框架LayUi实现文件上传功能,感兴趣的朋友可以学习一下. 文件上传实体(UploadFile.cs) public class UploadFile{pu ...

【若依(ruoyi)】附件上传功能

前言

附件上传功能

上传列表渲染

上传按钮

为上传按钮添加点击事件

为上传按钮的绑定上传控件

【若依(ruoyi)】附件上传功能相关推荐

最新文章

热门文章