前言
在 table 表格每一項后面添加操作按鈕：修改/刪除
希望實現效果：
1、點表格后面的修改按鈕，能修改對應行的數據
2、點表格后面的刪除按鈕，刪除對應的行
操作欄
先定義操作欄按鈕
// 作者-上海悠悠 QQ交流群:717225969
// blog地址 https://www.cnblogs.com/yoyoketang/
<script>
var url = '/teacher/info';
var columns = [
{
checkbox: true,
visible: true //是否顯示復選框
},
{
field: 'id',
title: 'ID'
}, {
field: 'name',
title: '姓名'
}, {
field: 'age',
title: '年齡',
sortable: true
},
{
field: 'tel',
title: '電話'
},
{
field:'operate',
title: '操作',
width: 120,
align: 'center',
valign: 'middle',
formatter: actionFormatter
}
];
$("#table").bootstrapTable({
toolbar: '#toolbar', //自定義工具按鈕
url: url, //請求后台的URL（*）
method: 'get', //請求方式（*）
cache: false, //是否使用緩存，默認為true，所以一般情況下需要設置一下這個屬性（*）
pagination: true, //是否顯示分頁（*）
pageSize: 10, //每頁的記錄行數（*）
pageList: [10, 20, 50, 100, 'All'], //可供選擇的每頁的行數（*）
sidePagination: "server", //分頁方式：client客戶端分頁，server服務端分頁（*）
pageNumber: 1, //初始化加載第一頁，默認第一頁
search: true, //是否顯示表格搜索
showSearchButton: true, //搜索確定按鈕
{# showSearchClearButton: true, //清空輸入框#}
{# singleSelect: true,#}
clickToSelect: true,
showColumns: true, //是否顯示所有的列
showRefresh: true, //是否顯示刷新按鈕
minimumCountColumns: 2, //最少允許的列數
//height: 500, //行高，如果沒有設置height屬性，表格自動根據記錄條數決定表格高度
classes: "table table-bordered table-striped",
showToggle: true, //是否顯示詳細視圖和列表視圖的切換按鈕
columns: columns, //列參數
//detailView: true, //是否顯示父子表
//得到查詢的參數，會在url后面拼接，如：?rows=5&page=2&sortOrder=asc&search_kw=&_=1564105760651
queryParams: function (params) {
// params對象包含：limit, offset, search, sort, order
//這里的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也需要改成一樣的
var temp;
temp = {
page: (params.offset / params.limit) + 1, //頁碼, //頁碼
size: params.limit //頁面大小
//查詢框中的參數傳遞給后台
//search_kw: $('#search-keyword').val(), // 請求時向服務端傳遞的參數
};
return temp;
}
});
//操作欄的格式化
function actionFormatter(value, row, index) {
var result = "";
result += '<a href="javascript:;" class="btn btn-xs btn-success" style="margin:5px" onclick="GetViewById(' + index + ')" view=\'view\')" title="查看">';
result += '<span class="glyphicon glyphicon-search"></span></a>';
result += '<a href="javascript:;" class="btn btn-xs btn-info" style="margin:5px" onclick="EditViewById(' + index+')" title="編輯">';
result += '<span class="glyphicon glyphicon-pencil"></span></a>';
result += '<a href="javascript:;" class="btn btn-xs btn-danger" style="margin:5px" onclick="DeleteByIds(' + row.id + ')" title="刪除">';
result += '<span class="glyphicon glyphicon-remove"></span></a>';
return result;
}
</script>
操作欄上的標簽點擊后分別調用
onclick="EditViewById(' + index +')" title="編輯"
onclick="DeleteByIds(' + row.id + ')" title="刪除"
其中index參數是行在當前頁面的索引，從0開始
row是當前行的數據，row.id是獲取當前行的id，調刪除接口的時候，只需知道刪除的id項就可以
定義編輯EditViewById
<script>
//定義表格操作編輯按鈕 title="編輯"
function EditViewById(index){
alert(index);
{# // 調出modal 框#}
var row = $("#table").bootstrapTable('getData')[index];
$("#modal_id").val(row.id);
$("#modal_name").val(row.name);
$("#modal_age").val(row.age);
$("#modal_tel").val(row.tel);
$("#myModal").modal();
}
</script>
實現效果，當點編輯按鈕后，會根據當前行獲取到索引index。
根據索引從bootstrapTable('getData')中得到對應行的數據。
定義保存按鈕，發 POST 請求，接口地址: /teacher/info
// 作者-上海悠悠 QQ交流群:717225969
// blog地址 https://www.cnblogs.com/yoyoketang/
<script>
$("#sava-edit-btn").click(function(){
$.ajax({
cache: false,
type: "POST", //方法類型
dataType: "json", //預期服務器返回的數據類型
url: "/teacher/info", //url
data: $("#model-form").serialize(),
success: function (data) {
console.log(data);//打印服務端返回的數據(調試用)
if (data.msg == "success") {
{#關閉模態框並清除框內數據，否則下次打開還是上次的數據#}
$('#myModal').modal('hide');
{# 判斷確實正確入庫之后提示#}
console.log('提交數據成功');
{#刷新表格數據#}
$("#table").bootstrapTable('refresh');
}
},
error: function () {
alert('提交失敗');
}
});
});
</script>
定義刪除DeleteByIds
當點確定刪除按鈕的時候，需從模態框里面得到需要刪掉的id值，可以在模態框寫一個隱藏的input標簽，把id值寫進去，后面掉確定刪除按鈕的時候，就可以直接發請求傳到服務端
{# //刪除按鈕模態框#}
<div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="delModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="delModalLabel">操作提示:</h4>
</div>
<div class="modal-body">
<input type="hidden" id="del_ids" name="ids" value="">
<h5 id="delBody">確定要刪除選中的數據？</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="deleteIds">確定刪除</button>
<button type="button" class="btn btn-default" data-dismiss="modal">取消
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
點刪除按鈕，需要拿到對應行的id值,調出模態框
<script>
//定義表格操作編輯刪除 title="刪除"
function DeleteByIds(id){
var ids = [];
ids.push(id);
//alert(JSON.stringify(ids));
//把ids的值給到隱藏輸入框
$('#del_ids').val(JSON.stringify(ids));
//調出刪除模態框
$("#delModal").modal();
}
</script>
刪除接口可以和批量刪除接口公用同一個，ids傳的值寫一個arry數組格式[1]
定義保存按鈕，發 DELETE 請求，接口地址: /teacher/info（跟批量刪除按鈕，公用一個刪除接口）
// 作者-上海悠悠 QQ交流群:717225969
// blog地址 https://www.cnblogs.com/yoyoketang/
<script>
// 點確定按鈕發delete請求
$("#deleteIds").click(function() {
var del_ids = $('#del_ids').val();
$.ajax({
cache: false,
url: "/teacher/info", //url
type: "DELETE", //方法類型
contentType:"application/json",//設置請求參數類型為json字符串
dataType: "json", //預期服務器返回的數據類型
data: JSON.stringify({ids: del_ids}),
success: function (result) {
//隱藏模態框
$("#delModal").modal('hide');
if (result.msg == "success"){
// 此處可以顯示一個toastr消息
alert('刪除成功！')
}
else {
alert("刪除失敗")
}
},
error: function () {
$("#delModal").modal('hide');
// 此處可以顯示一個toastr消息
alert("刪除失敗,服務器異常")
}
});
})
</script>
另外一種實現方式比這個更簡單，參考下一篇添加events事件https://www.cnblogs.com/yoyoketang/p/15270208.html