bootstrap表格的每一行添加一个按钮事件

最新推荐文章于 2024-05-16 18:13:36 发布

原创最新推荐文章于 2024-05-16 18:13:36 发布 · 4.9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap

本文介绍了如何在Bootstrap表格的每一行中添加一个按钮，并为该按钮绑定事件。通过在列属性中设置事件，编写相关函数，并确保该设置位于表格前部，实现了点击按钮弹出模态框的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.在列属性中加入事件

                {
                    title:'数据量序号',
                    field:'sjid'
                    //  hidden:true
                },{
                    field: 'operate',
                    title: '操作',
                    width: '80px',
                     events: operateEvents,
                    formatter: operateFormatter
                }

2.写一个函数

 function operateFormatter(value, row, index) {
       return [
       '<input type="submit" value="上传" class="RoleOfedit btn btn-primary  btn-sm"     data-toggle="modal"  style="display:inline">',
        ].join('');
    }

3.记得这个写在表格的前面

 window.operateEvents = {
          'click .RoleOfedit': function (e, value, row, index) {
                alert(row.qxxh);
                $("#upload").modal('show');
            }
        };

4.点击“弹出模态框”

<div class="modal fade" id="upload" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <form action="http://localhost:8080/GD/UploadAction_execute.action" method="post" enctype="multipart/form-data" name="uploadfile">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabelfile">上传文件</h4>
            </div>
            <div class="modal-body">
                    <input type="file" name="my" id="file" value="浏览" style="display: none;"
                     onchange="document.uploadfile.filePath.value=this.value"/>
                     <input type="text" name="filePath" id="filePath"/>
                     <input type="button" value="浏览..." onclick="document.uploadfile.my.click()"/><br>
                    <input type="submit" value="上传" id="shangchuan">
            </div>
                   <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal -->
    </form>
</div>