列表添加上传功能, 上传成功之后,列表刷新导致第二次点击再次上传失效

列表自己练习的时候添加上传功能, 上传成功之后,列表刷新. 调用的table.reload()方法刷新列表,
然后 导致第二次点击再次上传失效

完整代码如下, 感觉是 table.render的毛病, 但是试了几种方法,没有解决掉

```
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('管理列表')"/>
</head>
<body class="pear-container">
<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" placeholder="请输入乘机人姓名" autocomplete="off" class="layui-input">
                </div>
                <label class="layui-form-label">证件号</label>
                <div class="layui-input-inline">
                    <input type="text" name="idNumber" lay-verify="idNumber" autocomplete="off" placeholder="请输入证件号" class="layui-input">
                </div>
                <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="draftIssue-update">
                    <i class="layui-icon layui-icon-ok"></i>
                    开始注册
                </button>

</div>
        </form>
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">查询</label>
                <div class="layui-input-inline">
                    <input type="text" name="searchText" placeholder="请输入姓名或证件号查询" autocomplete="off" class="layui-input">
                </div>
                <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="draftIssue-query">
                    <i class="layui-icon layui-icon-search"></i>
                    查询
                </button>
                <button type="reset" class="pear-btn pear-btn-md">
                    <i class="layui-icon layui-icon-refresh"></i>
                    重置
                </button>
            </div>
        </form>
    </div>
</div>
<div class="layui-card">
    <div class="layui-card-body">
        <table id="draftIssue-table" lay-filter="draftIssue-table"></table>
    </div>
</div>
</body>

<th:block th:include="include :: footer"/>
<script>
    /*$(function () {
        setInterval(refreshData, 3000);
    });*/
    function refreshData() {
        layui.use(['table'], function () {
            let table = layui.table;
            table.reload("draftIssue-table");
        })
    }
    layui.use(['table', 'form', 'jquery','upload'], function () {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;

let MODULE_PATH = rootPath+"/DraftIssueController/";
        let cols = [
            [
                {type: 'checkbox'},

{title: '序号', field: 'id', align: 'center'},

{title: '姓名', field: 'name', align: 'center'},

{title: '证件号', field: 'idNumber', align: 'center'},

//{title: '会员号', field: 'memberNumber', align: 'center'},

//{title: '用户id(做数据权限用)', field: 'userId', align: 'center'},

{title: '账号', field: 'account', align: 'center'},

{title: '密码', field: 'password', align: 'center'},

{title: '注册状态', field: 'isSuccess', align: 'center'},

//{title: '是否删除', field: 'isDelete', align: 'center'},

{title: '错误信息', field: 'content', align: 'center'},

{title: '操作', toolbar: '#draftIssue-bar', align: 'center'}
            ]
        ]

//table表单列表
        table.render({
            elem: '#draftIssue-table',
            url: MODULE_PATH + 'list',
            page: true,
            method: 'get',
            cols: cols,
            skin: 'line',
            toolbar: '#draftIssue-toolbar',
            defaultToolbar: [{
                layEvent: 'refresh',title:'刷新',
                icon: 'layui-icon-refresh',
            }, 'filter', 'print', 'exports']
            , done: function (value, date, endDate) {
                //重新绑定，upload方法
                bindTableToolbarFunction()
            }
        });

//table图标事件绑定
        table.on('tool(draftIssue-table)', function (obj) {
            if (obj.event === 'remove') {
                window.remove(obj);
            } else if (obj.event === 'edit') {
                window.edit(obj);
            }
        });

//table工具栏绑定
        table.on('toolbar(draftIssue-table)', function (obj) {
            if (obj.event === 'add') {
                window.add();
            } else if (obj.event === 'refresh') {
                //window.refresh();
                table.reload('draftIssue-table');
            } else if (obj.event === 'batchRemove') {
                window.batchRemove(obj);
            }
        });

//查询按钮绑定
        form.on('submit(draftIssue-query)', function (data) {
            table.reload('draftIssue-table', {page: {curr: 1}, where: data.field})
            return false;
        });

//添加
        window.add = function () {
            layer.open({
                type: 2,
                title: '新增',
                shade: 0.1,
                area: ['500px', '500px'],
                content: MODULE_PATH + 'add'
            });
        }
        //修改
        window.edit = function (obj) {
            layer.open({
                type: 2,
                title: '修改',
                shade: 0.1,
                area: ['500px', '500px'],
                content: MODULE_PATH + 'edit/' + obj.data['id']
            });
        }
        //删除
        window.remove = function (obj) {
            layer.confirm('确定要删除该数据', {icon: 3, title: '提示'}, function (index) {
                layer.close(index);
                let loading = layer.load();
                $.ajax({
                    url: MODULE_PATH + "remove?ids=" + obj.data['id'],
                    dataType: 'json',
                    type: 'delete',
                    success: function (result) {
                        layer.close(loading);
                        if (result.code==200) {
                            layer.msg(result.msg, {icon: 1, time: 1000}, function () {
                                obj.del();
                            });
                        } else {
                            layer.msg(result.msg, {icon: 2, time: 1000});
                        }
                    }
                })
            });
        }

//批量删除
        window.batchRemove = function (obj) {
            let data = table.checkStatus(obj.config.id).data;
            if (data.length === 0) {
                layer.msg("未选中数据", {icon: 3, time: 1000});
                return false;
            }
            let ids = "";
            for (let i = 0; i < data.length; i++) {
                ids += data[i].id + ",";
            }
            ids = ids.substr(0, ids.length - 1);
            layer.confirm('确定要删除这些数据', {icon: 3, title: '提示'}, function (index) {
                layer.close(index);
                let loading = layer.load();
                $.ajax({
                    url: MODULE_PATH + "remove?ids=" + ids,
                    dataType: 'json',
                    type: 'delete',
                    success: function (result) {
                        layer.close(loading);
                        if (result.code==200) {
                            layer.msg(result.msg, {icon: 1, time: 1000}, function () {
                                table.reload('draftIssue-table');
                            });
                        } else {
                            layer.msg(result.msg, {icon: 2, time: 1000});
                        }
                    }
                })
            });
        }

//刷新按钮
        window.refresh = function () {
            table.reload('draftIssue-table');
        }

//名称验证
        form.verify({
            idNumber: function(value){
                if(value.length < 2){
                    return '至少得2个字符';
                }
                var msg = "";
                $.ajax({
                    url: MODULE_PATH+'/checkNameUnique',
                    data: "idNumber="+value,
                    dataType: 'json',
                    type: 'post',
                    async:false,
                    success: function (result) {
                        msg=result;
                    }
                });
                if (msg == 1) {
                    return "已存在相同证件号";
                }

}
        });

//开始注册
        form.on('submit(draftIssue-update)', function (data) {
            //let loader = layer.load();
            $.ajax({
                url: MODULE_PATH+'/add',
                data: data.field,
                dataType: 'json',
                contentType: 'application/x-www-form-urlencoded',
                type: 'post',
                success: function (result) {
                    if (result.code==200) {
                        layer.msg(result.msg, {icon: 1, time: 1000}, function () {
                            //parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
                            //parent.layui.table.reload("draftIssue-table");
                            table.reload('draftIssue-table');
                        });
                    } else {
                        layer.msg(result.msg, {icon: 2, time: 1000});
                    }
                }
            })
            return false;
        });

})

</script>

//定义在外部的变量
    //upload所需的options
    let upload_info_obj;
    //upload对象
    let upload;
    //用于判断的值
    let sort=0;
    //用于接收upload.render()返回的对象
    let renderObj;

let UPLOAD_PATH = rootPath+"/FileController";

function doUpload_info() {

layui.use(['upload','table','form','jquery'], function () {
            let table = layui.table;
            upload = layui.upload;

//拖拽上传
            upload_info_obj= upload.render({
                elem: '#test01'
                ,field: 'file' //设定文件域的字段名
                ,url: UPLOAD_PATH+"/import"
                ,done: function(result){
                    if (result.code==200) {
                        layer.msg('上传成功');
                        table.reload("draftIssue-table");
                    } else {
                        layer.msg(result.msg, {icon: 2, time: 1000});
                    }
                }
                ,error: function(e){
                    alert("请求异常"+e);
                }
            });
        });
        //接收upload.render()返回的对象
        renderObj=upload.render(upload_info_obj);
    }

/*function uploads(){
        if (sort == 1) {
            //如果已选择过，那么需要重新加载-----重点在这！！！！
            renderObj.reload(upload_info_obj);
        }else{
            //唤起上传控件
            doUpload_info();
        }
    }*/

</script>
<script>

/*layui.use(['table', 'jquery','upload'], function () {
        let table = layui.table;
        let upload = layui.upload;
        let UPLOAD_PATH = rootPath+"/FileController";

//拖拽上传 文档：https://www.layui.com/doc/modules/upload.html
        upload.render({
            elem: '#test01'
            ,url: UPLOAD_PATH+"/import" //改成您自己的上传接口
            ,field: 'file' //设定文件域的字段名
            ,done: function(result){
                if (result.code==200) {
                    layer.msg('上传成功');
                    table.reload("draftIssue-table");
                    bindTableToolbarFunction();
                } else {
                    layer.msg(result.msg, {icon: 2, time: 1000});
                }
            }
        });
    })*/

function bindTableToolbarFunction(){
    //这里重新定义 layui.upload
        layui.use(['table', 'jquery','upload'], function () {
            let table = layui.table;
            let upload = layui.upload;
            let UPLOAD_PATH = rootPath+"/FileController";

//拖拽上传 文档：https://www.layui.com/doc/modules/upload.html
            let uploadInst = upload.render({
                elem: '#test01'
                ,url: UPLOAD_PATH+"/import" //改成您自己的上传接口
                ,field: 'file' //设定文件域的字段名
                ,done: function(result){
                    if (result.code==200) {
                        layer.msg('上传成功');
                        table.reload("draftIssue-table");
                    } else {
                        layer.msg(result.msg, {icon: 2, time: 1000});
                    }
                }
            });
        })
    }

</script>

</html>
```

开源oschina/SpringBoot_v2

内容风险标识

评论 (0)

开源oschina/SpringBoot_v2 .gitee-modal { width: 500px !important; }

内容风险标识