参考官方文件上传代码，js中增加一个before处理参数问题。
html：
选择多文件
文件名大小状态操作
开始上传
在upload中增加一个before，在before中添加参数
before: function (obj) {
this.data = {
"BUSINESS_ID": getUrlParam("id"),
"FLOW_ID": getUrlParam("flowId"),
"FLOW_NODE_ID": getUrlParam("flowNodeID")
}///携带额外的数据
}
以下为完整JS
layui.config({
base: '../../../layuiadmin/' //静态资源所在路径
}).extend({
index: 'lib/index' //主入口模块
}).use(['index', 'form', 'layer', 'table', 'upload',], function () {
var form = layui.form
, $ = layui.jquery //由于layer弹层依赖jQuery，所以可以直接得到
, table = layui.table
, upload = layui.upload
, router = layui.router();
var Param = new Object();
//多文件列表示例
var demoListView = $('#demoList')
, uploadListIns = upload.render({
elem: '#fileList'
, size: 102400 //限制文件大小，单位 KB
, exts: 'zip|rar|7z|doc|docx|pdf|txt|xls|ppt|xlsx|pptx|img|jpg|png|gif|bmp|jpeg' //只允许上传压缩文件
, url: webroot + "/guarantee/upload/uploadFile?userid=123456"
, accept: 'file'
, multiple: true
, auto: false
, bindAction: '#fileListAction'
// , data: JSON.stringify(Param)
, choose: function (obj) {
var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
//读取本地文件
obj.preview(function (index, file, result) {
var tr = $(['
'
, '
' + file.name + ''
, '
' + (file.size / 1014).toFixed(1) + 'kb'
, '
等待上传'
, '
'
, '重传'
, '删除'
, '
'
, '
'].join(''));
//单个重传
tr.find('.demo-reload').on('click', function () {
obj.upload(index, file);
});
//删除
tr.find('.demo-delete').on('click', function () {
delete files[index]; //删除对应的文件
tr.remove();
uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
});
demoListView.append(tr);
});
}
, before: function (obj) {
this.data = {
"BUSINESS_ID": getUrlParam("id"),
"FLOW_ID": getUrlParam("flowId"),
"FLOW_NODE_ID": getUrlParam("flowNodeID")
}///携带额外的数据
}
, done: function (res, index, upload) {
if (res.code == 0) { //上传成功
var tr = demoListView.find('tr#upload-' + index)
, tds = tr.children();
tds.eq(2).html('上传成功');
tds.eq(3).html(''); //清空操作
return delete this.files[index]; //删除文件队列已经上传成功的文件
}
this.error(index, upload);
}
,
error: function (index, upload) {
var tr = demoListView.find('tr#upload-' + index)
, tds = tr.children();
tds.eq(2).html('上传失败');
tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
}
})
;
//文件列表
table.render({
elem: '#test'
, url: '/file/getAll'
, cellMinWidth: 200
, cols: [[
{field: 'id', width: '5%', title: 'ID', sort: true}
, {field: 'name', width: '20%', title: '文件名'}
, {field: 'host', width: '20%', title: 'Host'}
, {field: 'path', width: '35%', title: '路径', sort: true}
, {field: 'operating', width: '20%', title: '操作'}
]]
});
table.on('radio(test)', function (obj) {
tableCheck = obj.data;
});
//监听事件
table.on('tool(test)', function (obj) {
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
var tr = obj.tr; //获得当前行 tr 的DOM对象
if (layEvent === 'detail') { //查看
//do somehing
} else if (layEvent === 'delete') { //删除
layer.confirm('真的删除行么', function (index) {
obj.del(); //删除对应行(tr)的DOM结构，并更新缓存
layer.close(index);
//向服务端发送删除指令
});
} else if (layEvent === 'update') { //编辑
//do something
//同步更新缓存对应的值
obj.update({
username: '123'
, title: 'xxx'
});
}
});
//监听行单击事件
table.on('row(test)', function (obj) {
//console.log(obj.tr) //得到当前行元素对象
//console.log(obj.data) //得到当前行数据
//obj.del(); //删除当前行
//obj.update(fields) //修改当前行数据
});
//监听行双击事件
table.on('rowDouble(test)', function (obj) {
//obj 同上
//layer.msg(obj.data.host+'/'+obj.data.path);
var index = obj.data.path.lastIndexOf(".");
//获取后缀
var ext = obj.data.path.substr(index + 1);
var isImg = isAssetTypeAnImage(ext);
var isDoc = isDocFunc(ext);
var url = "";
//是否是图片
if (isImg) {
url = obj.data.host + '/' + obj.data.path;
} else if (isDoc) {
url = '/doc/preview?path=' + obj.data.host + '/' + obj.data.path
} else {
layer.msg("无法预览");
}
layer.open({
type: 2,
area: ['700px', '450px'],
fixed: false, //不固定
maxmin: true,
content: url
});
});
/**
* 判断文件是否可直接预览
* @param ext
* @returns {boolean}
*/
function isAssetTypeAnImage(ext) {
return [
'png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff', 'txt'].indexOf(ext.toLowerCase()) !== -1;
}
/**
* 是否是文档格式
* @param ext
* @returns {boolean}
*/
function isDocFunc(ext) {
return [
'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'].indexOf(ext.toLowerCase()) !== -1;
}
});
后台接受参数：
@PostMapping("/uploadFile")
@ResponseBody
publicReturnMessage upload(@RequestParam("file") MultipartFile[] file, HttpServletRequest request) {
String BUSINESS_ID = request.getParameter("BUSINESS_ID");
String FLOW_ID = request.getParameter("FLOW_ID");
String FLOW_NODE_ID = request.getParameter("FLOW_NODE_ID");
ReturnMessage returnMessage = newReturnMessage("0", "文件上传成功");
StringBuffer str = newStringBuffer();
for(MultipartFile files : file) {
if(files.isEmpty()) {
return null;
}
String fileName = files.getOriginalFilename();
logger.info("上传文件，文件名："+ fileName + ",文件大小："+ files.getSize());
File dest = newFile(filePath+ fileName);
try{
files.transferTo(dest);
str.append("文件"+ fileName + "上传成功");
String id = UUID.randomUUID().toString().replaceAll("-", "");
String serverid = UUID.randomUUID().toString().replaceAll("-", "") + files.getContentType();
String itemID = request.getAttribute("item_id").toString();
Date uploadTime = newjava.sql.Date(System.currentTimeMillis());
String flowNodeID = request.getAttribute("flow_node_id").toString();
String user_id = request.getAttribute("user_id").toString();
String user_name = request.getAttribute("user_name").toString();
GuarItemFile guarItemFile = newGuarItemFile(id, "1", itemID, "项目附件", fileName, "", serverid, serverid + FileUtil.getExtensionName(fileName), uploadTime, flowNodeID, FileUtil.getExtensionName(fileName), user_id, user_name);
guarItemFileService.addGuarItemFile(guarItemFile);
logger.info("文件"+ fileName + "上传成功");
} catch(IOException e) {
str.append("文件"+ fileName + "上传失败");
logger.info(e.getMessage());
//LOGGER.error(e.toString(), e);}
returnMessage.setMsg(str.toString());
}
returnreturnMessage;
}

背景
根据user.is_admin 不同自定义身份和相应操作，

功能如下


solution
<script type="text/html" id="barDemo">
    {{"{{# if (d.is_admin=== 0) { }}"}}
    <a class="layui-btn layui-btn-xs" lay-event="edit">升级权限</a>
    {{"{{# } else { }}"}}
    <a class="layui-btn layui-btn-xs" lay-event="edit">降低权限</a>
    {{"{{# } }}"}}
</script>


<script>
    layui.use('table', function(){
        var table = layui.table;
        table.render({
            elem: '#test'
            ,url:"/user/list"
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [[
                {field:'id', title: 'ID', sort: true}
                ,{field:'name', title: '名称'} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                ,{field:'create_time', title: '创建时间', sort: true}
                ,{field:'update_time', title: '最近登录', sort: true}
                ,{field: "is_admin", title: '身份', sort: true,
                    templet:function (d) {
                        if (d.is_admin==1){
                            return "管理员"
                        }else {
                            return "普通用户"
                        }

                    }
                }

                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150

            }
            ]]
            ,page: true
        });
        ```

需求描述：点击表格中的数据，弹出一张具体信息表。描述的不是很清楚，放效果图，就明白了，上图
放心，能看到的数据，都不是生产数据，我造的假数据，但是功能效果就是这样，点击列表中的一行，弹出某些要展示的信息。很明白吧！ha٩(๑>◡
代码：
//html代码
#impTable{
display: none;
}
id="tableImp">
序号文件名状态导入数据条数导入时间操作账号
//js代码function impNum(examId) {
var impTable = $('#impTable')
var url = rootPath + '/vraxx/batch/findDetail';
var data = CommnUtil.ajax(url, {
examId: examId
}, "json");
if (data!=''&& data!=null ){
for (var i = 0; i < data.length; i++) {
var tv = "
" +
'            
'+i+1+'' +
'            
' + data[i].fileName + '' +
'            
' + data[i].tempStatus + '' +
'            
 ' + data[i].num + ' ' +
'            
' + data[i].createDate + '' +
'            
' + data[i].createName + '' +
'            
'
$('#tableImp tbody').append(tv);
}
var index= layer.open({
type:1,
title:'XX详情',
btn: ['返回'],
area: ['50%', '50%'],
content: impTable,
end:function () {
layer.close(index);
var prevDataPath = $("#topli li:last-child").prev();
var prevDataPathVal = $(prevDataPath).attr("data-path");
loadListView("AAAA", "BBBB", "0", "", prevDataPathVal);
}
});
} else{
layer.msg("未导入");
}
}
总结：要注意的两点在html中编辑好弹出层的展示内容impTable   ajax数据返回回来的时候拼接到table的body

一：layui资源，官网下载引入

二：直接上代码，我写的只为入门观看啊，大神就别批了，有些样式我直接改了，样式其实并不是什么大问题

.layui-layout-admin .layui-footer{height: 0px;}

.layui-layout-admin .layui-body{bottom: 0px;}

这两个样式是把那个底部固定栏给弄掉的，如果不弄掉也可以去除，代码很简单，很容易看懂的

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>layui后台框架整理+tab页动态操作</title>
    <link rel="stylesheet" href="source/layui/css/layui.css">
    <style>
        .zduu-darkblue {
            background-color: rgba(10, 162, 27, 0.57);
        }

        .zduu-darkblue li {
            background-color: rgba(10, 162, 27, 0.57);
        }

        .layui-nav-tree .layui-nav-item a {
            color: white;
        }

        .wh100 {
            width: 100%;
            height: 100%;
        }

        .layui-body {
            overflow: visible;
        }

        .layui-tab-title li.layui-this {
            font-weight: 700;
            background-color: #93D1FF;
            color: white;
        }

        .layui-tab {
            margin: 0px;
        }

        .tab-active {
        }

        .tab-close {
            position: absolute;
            right: 2px;
            top: -8px;
            display: inline;
            opacity: 0.2;
        }

        .tab-close:hover {
            opacity: 1;
        }

        .layui-icon {
            font-size: 10px;
        }

        .layui-tab-title li {
            min-width: 50px;
        }

        .layui-layout-admin .layui-footer{height: 0px;}
        .layui-layout-admin .layui-body{bottom: 0px;}
    </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">layui框架整理</div>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                    贤心
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="">退了</a></li>
        </ul>
    </div>

    <div class="layui-side zduu-darkblue">
        <div class="layui-side-scroll">
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">所有商品</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" class="tab-active" lay-id="1" lay-url="pages/main.jsp"
                               title="一">一</a></dd>
                        <dd><a href="javascript:;" class="tab-active" lay-id="2" lay-url="pages/main.jsp"
                               title="二">二</a></dd>
                        <dd><a href="javascript:;" class="tab-active" lay-id="3" lay-url="pages/main.jsp"
                               title="三">三</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;" class="tab-active" lay-id="4" lay-url="pages/main.jsp"
                       title="四">四</a></li>
                <li class="layui-nav-item">
                    <a href="javascript:;" class="tab-active" lay-id="5" lay-url="pages/main.jsp"
                       title="五">五</a></li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <div style="">
            <div class="layui-tab" lay-filter="tab">
                <ul class="layui-tab-title">
                    <li class="layui-this" lay-id="0">主页</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <iframe src="index.jsp" frameborder="0" class="wh100"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="source/layui/layui.all.js"></script>
<script>
    var $ = layui.$, element = layui.element;
    var method = {
        tabAdd: function (url, name, id) {
            element.tabAdd('tab', {
                title: name + '<a href="javascript:;" class="tab-close"><i class="layui-icon layui-icon-close"></i></a>',
                content: '<iframe class="wh100" frameborder="0" src="' + url + '"></iframe>',
                id: id
            });
            //为关闭按钮绑定事件
            $('.tab-close').click(function () {
                method.tabDelete($(this).parent('li').attr('lay-id'));
            });
            //新增tab后，改变选中tab
            method.tabChange(id);
        },
        tabChange: function (id) {
            element.tabChange('tab', id); // 'tab'为layui-tab所在div的lay-fiilter
        },
        tabDelete: function (id) {
            element.tabDelete('tab', id); // 'tab'为layui-tab所在div的lay-fiilter
        }
    }
    //绑定点击事件
    $('.tab-active').click(function () {
        //获取属性值
        var id = $(this).attr('lay-id'), name = $(this).attr('title'), url = $(this).attr('lay-url');
        console.log(id + "--" + name + "--" + url);
        //    判断是否已打开
        if (checkTab(id)) {
            method.tabChange(id);
        } else {
            method.tabAdd(url, name, id);
        }
    })

    function checkTab(id) {
        var lis = $('.layui-tab-title li:gt(0)'), //获取到除主页的tab
            open = false; //用于判断是否已打开
        layui.each(lis, function (index, li) {
            if ($(li).attr('lay-id') == id) {//说明已打开
                open = true;  //此处不能直接return
            }
        })
        return open;
    }
</script>
</body>
</html>