- Bootstrap table右键功能实现方法
在Bootstrap table中实现右键菜单功能，需要借助一些第三方工具。下面是详细的实现方法：
（1）引入bootstrap-table-contextmenu插件。
<!-- 引入bootstrap-table-contextmenu插件 -->
<script src="path/to/bootstrap-table-contextmenu.min.js"></script>
（2）在table的data属性中添加需要显示的数据。
<table id="table"
data-toggle="table"
data-context-menu="#context-menu"
data-context-menu-auto="false"
data-right-menu="#rightMenu"
>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Job</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>25</td>
<td>Developer</td>
</tr>
<tr>
<td>Susan</td>
<td>30</td>
<td>Designer</td>
</tr>
<tr>
<td>Mike</td>
<td>35</td>
<td>Manager</td>
</tr>
</tbody>
</table>
（3）定义右键菜单的html。
<!-- 定义右键菜单 -->
<ul class="dropdown-menu" id="context-menu">
<li data-item="edit"><a href="#">Edit</a></li>
<li data-item="delete"><a href="#">Delete</a></li>
</ul>
（4）定义右键菜单的点击事件。
// 定义右键菜单的点击事件
$('#table').on('contextmenu_itemClicked.bs.table', function (e, row, $element, field) {
switch(field) {
case 'edit':
editRow(row.id);
break;
case 'delete':
deleteRow(row.id);
break;
}
});
- 示例说明
（1）示例1：在表格中添加右键编辑和删除的功能。点击编辑会弹出一个编辑框，可以对数据进行修改；点击删除会弹出一个确认删除的提示框，确认后会删除该条数据。
<!-- 定义表格 -->
<table id="table"
data-toggle="table"
data-context-menu="#context-menu"
data-context-menu-auto="false"
data-right-menu="#rightMenu"
>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th colspan="2">Operation</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>25</td>
<td><button type="button" class="btn btn-info edit-btn">Edit</button></td>
<td><button type="button" class="btn btn-danger delete-btn">Delete</button></td>
</tr>
<tr>
<td>2</td>
<td>Susan</td>
<td>30</td>
<td><button type="button" class="btn btn-info edit-btn">Edit</button></td>
<td><button type="button" class="btn btn-danger delete-btn">Delete</button></td>
</tr>
<tr>
<td>3</td>
<td>Mike</td>
<td>35</td>
<td><button type="button" class="btn btn-info edit-btn">Edit</button></td>
<td><button type="button" class="btn btn-danger delete-btn">Delete</button></td>
</tr>
</tbody>
</table>
<!-- 定义右键菜单 -->
<ul class="dropdown-menu" id="context-menu">
<li data-item="edit"><a href="#">Edit</a></li>
<li data-item="delete"><a href="#">Delete</a></li>
</ul>
<!-- 定义编辑框和删除提示框 -->
<div class="modal fade" id="edit-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Edit</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name">
</div>
<div class="form-group">
<label for="age">Age:</label>
<input type="text" class="form-control" id="age">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="save-btn">Save changes</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="delete-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Confirm delete</h4>
</div>
<div class="modal-body">
Are you sure to delete this row?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger" id="delete-btn">Delete</button>
</div>
</div>
</div>
</div>
<!-- 引入jQuery和bootstrap-table-contextmenu插件 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.18.3/dist/bootstrap-table.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-table-contextmenu@1.0.2/dist/bootstrap-table-contextmenu.min.js"></script>
<script>
$(document).ready(function () {
// 点击编辑按钮弹出编辑框
$('.edit-btn').click(function () {
var row = $(this).closest('tr').find('td');
$('#name').val(row.eq(1).text());
$('#age').val(row.eq(2).text());
$('#edit-modal').modal('show');
$('#save-btn').off('click');
$('#save-btn').on('click', function() {
row.eq(1).text($('#name').val());
row.eq(2).text($('#age').val());
$('#edit-modal').modal('hide');
});
});
// 点击删除按钮弹出确认删除对话框
$('.delete-btn').click(function () {
var row = $(this).closest('tr');
$('#delete-modal').modal('show');
$('#delete-btn').off('click');
$('#delete-btn').on('click', function() {
row.remove();
$('#delete-modal').modal('hide');
});
});
// 定义右键菜单的点击事件
$('#table').on('contextmenu_itemClicked.bs.table', function (e, row, $element, field) {
switch(field) {
case 'edit':
var tr = $('#table').find('tr[data-index="' + row.index + '"]');
tr.find('.edit-btn').click();
break;
case 'delete':
var tr = $('#table').find('tr[data-index="' + row.index + '"]');
tr.find('.delete-btn').click();
break;
}
});
});
</script>
（2）示例2：在表格中添加右键复制的功能。点击复制会复制该条数据，并插入一条新数据。
<!-- 定义表格 -->
<table id="table"
data-toggle="table"
data-context-menu="#context-menu"
data-context-menu-auto="false"
data-right-menu="#rightMenu"
>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th colspan="2">Operation</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>25</td>
<td><button type="button" class="btn btn-info copy-btn">Copy</button></td>
<td><button type="button" class="btn btn-danger delete-btn">Delete</button></td>
</tr>
<tr>
<td>2</td>
<td>Susan</td>
<td>30</td>
<td><button type="button" class="btn btn-info copy-btn">Copy</button></td>
<td><button type="button" class="btn btn-danger delete-btn">Delete</button></td>
</tr>
<tr>
<td>3</td>
<td>Mike</td>
<td>35</td>
<td><button type="button" class="btn btn-info copy-btn">Copy</button></td>
<td><button type="button" class="btn btn-danger delete-btn">Delete</button></td>
</tr>
</tbody>
</table>
<!-- 定义右键菜单 -->
<ul class="dropdown-menu" id="context-menu">
<li data-item="copy"><a href="#">Copy</a></li>
</ul>
<!-- 引入jQuery和bootstrap-table-contextmenu插件 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.18.3/dist/bootstrap-table.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-table-contextmenu@1.0.2/dist/bootstrap-table-contextmenu.min.js"></script>
<script>
$(document).ready(function () {
// 点击复制按钮复制该行数据并插入一条新数据
$('.copy-btn').click(function () {
var row = $(this).closest('tr').clone();
var new_id = parseInt($('#table').find('tr:last td:first').text()) + 1;
row.find('td:first').text(new_id);
$('#table').append(row);
});
// 定义右键菜单的点击事件
$('#table').on('contextmenu_itemClicked.bs.table', function (e, row, $element, field) {
switch(field) {
case 'copy':
var tr = $('#table').find('tr[data-index="' + row.index + '"]');
tr.find('.copy-btn').click();
break;
}
});
});
</script>
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Bootstrap table右键功能实现方法 - Python技术站
微信扫一扫 
支付宝扫一扫 