BootStrap给table表格的每一行添加一个按钮事件
程序员文章站
2022-05-14 19:04:14
1.在列属性中加入事件
{
title:'数据量序号',
field:'sjid'...
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>
总结
以上所述是小编给大家介绍的bootstrap给table表格的每一行添加一个按钮事件,希望对大家有所帮助