前言
在table表格每一項后面添加3個操作按鈕：查看/修改/刪除，實現效果
新增操作項
接着前面這篇https://www.cnblogs.com/yoyoketang/p/15242055.html
在columns最后添加一個操作項,formatter屬性可以幫助我們更加靈活的顯示表格中的內容
# 作者-上海悠悠 QQ交流群:717225969
# blog地址 https://www.cnblogs.com/yoyoketang/
var columns = [
{
checkbox: true,
visible: true //是否顯示復選框
},
{
field: 'id',
title: 'ID'
}, {
field: 'name',
title: '姓名'
}, {
field: 'age',
title: '年齡'
},
{
field: 'tel',
title: '電話'
},
{
field:'ID',
title: '操作',
width: 120,
align: 'center',
valign: 'middle',
formatter: actionFormatter
}
];
主要看最后一項：
- field 一般對應ID字段，主鍵
- title 頁面上顯示的標題
- width 固定寬度
- align 'center'水平居中對齊
- valign 規定單元格中內容的垂直排列方式
- formatter 格式化器，對應actionFormatter方法，需寫一個對應方法內容
接着定義actionFormatter方法
# 作者-上海悠悠 QQ交流群:717225969
# blog地址 https://www.cnblogs.com/yoyoketang/
//操作欄的格式化
function actionFormatter(value, row, index) {
var id = value;
var result = "";
result += '<a href="javascript:;" class="btn btn-xs btn-success" style="margin:5px" onclick="EditViewById(\'undefined\', 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(\'undefined\')" title="編輯">';
result += '<span class="glyphicon glyphicon-pencil"></span></a>';
result += '<a href="javascript:;" class="btn btn-xs btn-danger" style="margin:5px" onclick="DeleteByIds(\'undefined\')" title="刪除">';
result += '<span class="glyphicon glyphicon-remove"></span></a>';
return result;
}
按鈕背景色主要是class里面的屬性控制
- btn 白色
- btn btn-primary 淺藍色
- btn btn-info 深藍色
- btn btn-success 綠色
- btn btn-danger 紅色
- btn btn-warning 黃色
- btn btn-inverse 黑色
按鈕之間的間隙通過style="margin:5px"來調節
頁面顯示效果
完整的前端代碼
<!DOCTYPE html>
<html lang="en">
<head>
{% load static %}
<title>bootstrap-table</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" type="text/css" href="/static/bootstarp/css/bootstrap.min.css" >
<link rel="stylesheet" type="text/css" href="/static/bootstrap-table/dist/bootstrap-table.min.css" >
<link rel="stylesheet" type="text/css" href="/static/bootstrap-table/dist/bootstrap-table.css" >
<script type="text/javascript" src="/static/bootstarp/jquery/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="/static/bootstarp/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/bootstrap-table/dist/bootstrap-table.min.js"></script>
<script type="text/javascript" src="/static/bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>
</head>
<body>
<div class="container">
<h1>bootstrapTable實例</h1>
<hr/>
<div id="toolbar" class="btn-group">
<button id="btn_add" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
</button>
<button id="btn_edit" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
</button>
<button id="btn_delete" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>刪除
</button>
</div>
<table id="table" class="table table-striped" data-toolbar="#toolbar"></table>
</div>
</body>
<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:'ID',
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, //是否顯示表格搜索
showColumns: true, //是否顯示所有的列
showRefresh: true, //是否顯示刷新按鈕
minimumCountColumns: 2, //最少允許的列數
//height: 500, //行高，如果沒有設置height屬性，表格自動根據記錄條數決定表格高度
showToggle: true, //是否顯示詳細視圖和列表視圖的切換按鈕
columns: columns, //列參數
//detailView: true, //是否顯示父子表
//得到查詢的參數，會在url后面拼接，如：?rows=5&page=2&sortOrder=asc&search_kw=&_=1564105760651
queryParams: function (params) {
//這里的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也需要改成一樣的
var temp = {
page: (params.offset / params.limit) + 1, //頁碼, //頁碼
size: params.limit, //頁面大小
//查詢框中的參數傳遞給后台
//search_kw: $('#search-keyword').val(), // 請求時向服務端傳遞的參數
};
return temp;
}
});
//操作欄的格式化
function actionFormatter(value, row, index) {
var id = value;
var result = "";
result += '<a href="javascript:;" class="btn btn-xs btn-success" style="margin:5px" onclick="EditViewById(\'undefined\', 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(\'undefined\')" title="編輯">';
result += '<span class="glyphicon glyphicon-pencil"></span></a>';
result += '<a href="javascript:;" class="btn btn-xs btn-danger" style="margin:5px" onclick="DeleteByIds(\'undefined\')" title="刪除">';
result += '<span class="glyphicon glyphicon-remove"></span></a>';
return result;
}
</script>