表单按钮功能无法实现

Question

@* 表单按钮--详情 *@
<script type="text/html" id="toolBtn">
    <a lay-event="look" class="layui-btn layui-btn-xs"><i class="layui-icon">&#xe62f;</i>文件上传</a>
</script>
<table class="layui-table" id="toolBtn" lay-filter="lfTable"></table>

<script>

    layui.use(['table', 'form','upload'], function () {
        var layer = layui.layer;
        var table = layui.table;
        var qrySubLotId = '@ViewBag.subLotId';


        //工序履历表
        table.render({
            elem: '#prodHistory'
            , even: true
            , autoSort: false
            , page: false
            , height: 280
            , cols: [[
                { field: 'WORKBENCHCODE', title: '作业台编号', width: 120, },
                { field: 'WORKBENCHNAME', title: '作业台名称', width: 130, },
                { field: 'LOTNO', title: 'Lot号', width: 140 },
                { field: 'PROCESSNUM', title: '工序号', width: 80 },
                { field: 'PROCESSNAME', title: '工序名称', width: 120},
                { field: 'PROCESSTEXTNO', title: '工序文本码', width: 130 },
                {
                    field: 'STARTTIME', title: '开始时间', width: 160, templet: function (d) {
                        if (d.STARTTIME == "" || d.STARTTIME == null)
                            return "";
                        return d.STARTTIME.replace('T', ' ');
                    }
                },
                {
                    field: 'COMPLETETIME', title: '完成时间', width: 160, templet: function (d) {
                        if (d.COMPLETETIME == "" || d.COMPLETETIME == null)
                            return "";
                        return d.COMPLETETIME.replace('T', ' ');
                    }
                },
                {
                    field: 'OPERSTARTSTATUS', title: '开工状态', width: 100, templet: function (d) {
                        if (d.OPERSTARTSTATUS == 0)
                            return "未申报";
                        else
                            return "已申报";
                    }
                },
                {
                    field: 'OPERSTARTTIME', title: '开工时间', width: 160, templet: function (d) {
                        if (d.OPERSTARTTIME == "" || d.OPERSTARTTIME == null || d.OPERSTARTTIME == "0001-01-01 00:00:00" || d.OPERSTARTTIME == "0001-01-01T00:00:00")
                            return "";
                        return d.OPERSTARTTIME.replace('T', ' ');
                    }
                },
                {
                    field: 'OPERENDSTATUS', title: '报工状态', width: 120, templet: function (d) {
                        if (d.OPERENDSTATUS == 0)
                            return "未申报";
                        else
                            return "已申报";
                    }
                },
                {
                    field: 'OPERENDTIME', title: '报工时间', width: 160, templet: function (d) {
                        if (d.OPERENDTIME == "" || d.OPERENDTIME == null || d.OPERENDTIME == "0001-01-01 00:00:00" || d.OPERENDTIME == "0001-01-01T00:00:00")
                            return "";
                        return d.OPERENDTIME.replace('T', ' ');
                    }
                },
                {
                    field: 'FORCEFLAG', title: '报工强制标识', width: 120, templet: function (d) {
                        if (d.FORCEFLAG == 0)
                            return "";
                        else
                            return "强制报工";
                    }
                },
            ]]
            , data: []
        });
        //工步履历表
        table.render({
            elem: '#workStepHistory'
            , even: true
            , autoSort: false
            , page: false
            , height: 280
            , cols: [[
                { field: 'PROCESSWORKNUM', title: '工步号', width: 80 },
                { field: 'PROCESSWORKNAME', title: '工步名称', width: 120 },
                { field: 'PROCESSWORKNO', title: '工步文本码', width: 130 },
                {
                    field: 'STARTTIME', title: '开始时间', width: 160, templet: function (d) {
                        if (d.STARTTIME == "" || d.STARTTIME == null)
                            return "";
                        return d.STARTTIME.replace('T', ' ');
                    }
                },
                {
                    field: 'COMPLETETIME', title: '完成时间', width: 160, templet: function (d) {
                        if (d.COMPLETETIME == "" || d.COMPLETETIME == null)
                            return "";
                        return d.COMPLETETIME.replace('T', ' ');
                    }
                },
            ]],
            data:[]
        });
        //步骤履历表
        table.render({
            elem: '#stepHistory'
            , even: true
            , autoSort: false
            , page: false
            , height: 280
            , cols: [[
               /* { field: 'LOTNO', title: 'Lot号', width: 120 },*/
                { field: 'PROCESSWORKNUM', title: '工步号', width: 100 },
                { field: 'STEPSEQ', title: '步骤号', width: 120 },
                { field: 'STEPNAME', title: '步骤名称', width: 120 },
                { field: 'STEPKIND_NAME', title: '步骤种类', width: 90 },
                { field: 'STEPCUMULATIVE', title: '累计时间(秒)', width: 120 },
                {
                    field: 'STARTTIME', title: '开始时间', width: 160, templet: function (d) {
                        if (d.STARTTIME == "" || d.STARTTIME == null)
                            return "";
                        return d.STARTTIME.replace('T', ' ');
                    }
                },
                {
                    field: 'COMPLETETIME', title: '完成时间', width: 160, templet: function (d) {
                        if (d.COMPLETETIME == "" || d.COMPLETETIME == null)
                            return "";
                        return d.COMPLETETIME.replace('T', ' ');
                    }
                },

                { field: 'USERCODE', title: '作业员编号', width: 120 },
                {
                    field: 'OPERSTARTSTATUS', title: '开工状态', width: 90, templet: function (d) {
                        if (d.OPERSTARTSTATUS == 1) return "已申报";
                        else return "";
                    }
                },
                {
                    field: 'OPERSTARTTIME2', title: '开工时间', width: 150, templet: function (d) {
                        if (d.OPERSTARTTIME == "" || d.OPERSTARTTIME == null)
                            return "";
                        return d.OPERSTARTTIME.replace('T', ' ');
                    }},
                {
                    field: 'OPERENDSTATUS', title: '报工状态', width: 120, templet: function (d) {
                        if (d.OPERENDSTATUS == 1) return "已申报";
                        else return "";
                    }
                },
                {
                    field: 'OPERENDTIME2', title: '报工时间', width: 150, templet: function (d) {
                        if (d.OPERENDTIME == "" || d.OPERENDTIME == null)
                            return "";
                        return d.OPERENDTIME.replace('T', ' ');
                    }
                },

                { fixed: 'right', title: '操作', width: 90, align: 'center', toolbar: '#btnUpload' },
            ]],
        });

        function uploadManualInfoFile(chooseId, actionId, uploadPath, acceptMime, accept, exts) {

            var headers1 = {};
            headers1["__RequestVerificationToken"] = $("input[name=__RequestVerificationToken]").val();
            headers1["Authorization"] = getAuthToken();

            if (acceptMime == undefined || acceptMime == "")
                acceptMime = "*/*";
            if (accept == undefined || accept == "")
                accept = 'file'
            if (exts == undefined || exts == "")
                exts = "*"
        layui.use('toolBtn', function () {
                var upload = layui.upload;
                //选完文件后不自动上传
                upload.render({
                    elem: '#toolBtn' //文件选择按钮
                    , url: uploadPath  //上传路径
                    , field: 'upFileXXX'
                    , auto: true  //非自动上传，需触发actionId才能上传
                    , acceptMime: acceptMime
                    , accept: 'file'
                    , size: 200*1024*1024
                    , exts: exts
                    , headers: headers1
                   // , bindAction: '#' + actionId //上传事件触发按钮
                    , before: function (obj) {
                        this.data = {}//向后台传参键值对
                        //上传前处理
                        loading();
                    }

                    , error: function () {
                        closeLoading();
                        alert("上传失败")
                    }
                });
            });


        //上传手顺信息文件
        uploadManualInfoFile(
            "tabData",
            '../ProdActualDetail/UploadManualInfo',
            "*/*",
            "file",
            "*");
    })

</script>

运行上面代码时，点击上传按钮没反应

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

问题解答

你遇到了表单按钮功能无法实现的问题，可能是因为 layui 的表单按钮事件绑定方式不正确或其他原因导致的。

在 layui 中，使用 lay-event 属性来绑定表单按钮的事件，例如：

<a lay-event="look" class="layui-btn layui-btn-primary">查看</a>

在 JavaScript 代码中，使用 table.on 方法来绑定表单按钮的事件，例如：

table.on('tool(toolBtn)', function(obj){
    var data = obj.data;
    if(obj.event === 'look'){
        // 查看按钮点击事件处理
        console.log(data);
    }
});

在上面的代码中，toolBtn 是表单按钮的 ID，table 是 layui 表格对象，obj 是事件对象，data 是当前行的数据。

如果你已经绑定了事件，但仍然无法实现，请检查以下几点：

1. 是否正确地绑定了事件？
2. 是否正确地指定了表单按钮的 ID？
3. 是否正确地传递了数据？

如果你仍然无法解决问题，请提供更多的代码和详细信息，我将尽力帮助你解决问题。