2. 程式人生 > 其它 >boostrap-table表格外掛筆記

boostrap-table表格外掛筆記

阿新 • • 發佈：2021-08-01

1 bootstrap-table外掛介紹

一個基於bootstrap的表格渲染外掛,可以極大的簡化表格的渲染操作

2 下載

github：https://github.com/wenzhixin/bootstrap-table

中文官網：https://www.bootstrap-table.com.cn/

英文官網：https://bootstrap-table.com/

下載後相關的依賴都在dist資料夾下

3 入門案例

請求json資料渲染表格

3.1 搭建工程

其中data.json的資料檔案內容如下：

[
	{"id":"1","name":"tom","sal":"4000","sex":"男","age":"18"},
	{"id":"2","name":"jerry","sal":"2000","sex":"女","age":"26"},
	{"id":"3","name":"heliufang","sal":"8000","sex":"男","age":"25"},
	{"id":"4","name":"lucy","sal":"2500","sex":"女","age":"28"},
	{"id":"5","name":"linda","sal":"1000","sex":"女","age":"16"},
	{"id":"6","name":"jack","sal":"2500","sex":"男","age":"28"}
]

這個data.json只是在做前端分頁的時候使用

3.2 編寫測試程式碼

【1.入門案例.html】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入相關樣式表 -->
		<link rel="stylesheet" type="text/css" href="bootstrap3/css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="bootstrap3/css/bootstrap-theme.min.css"/>
		<link rel="stylesheet" type="text/css" href="bootstrap-table/bootstrap-table.min.css"/>
	</head>
	<body>
		<!-- 建立表格容器 -->
		<table id="table"></table>
		<!-- 引入相關js -->
		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="bootstrap3/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="bootstrap-table/bootstrap-table.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="bootstrap-table/bootstrap-table-zh-CN.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//通過bootrap-table外掛渲染表格
			$('#table').bootstrapTable({
			    url: 'json/data.json',//請求的url
			    columns: [{
			        field: 'id',
			        title: '序號'
			    }, {
			        field: 'name',
			        title: '姓名'
			    }, {
			        field: 'sal',
			        title: '薪水'
			    }, {
			        field: 'sex',
			        title: '性別'
			    },{
			        field: 'age',
			        title: '年齡'
			    }]
			});
		</script>
	</body>
</html>

測試結果如下：

可以看到外掛自動幫我們把資料渲染好了,是不是很方便！！！

4 前端分頁實現

【2.前端分頁.html】將【1.入門案例.html】中的渲染的js程式碼改成如下：

//通過bootrap-table外掛渲染表格
$('#table').bootstrapTable({
    url: 'json/data.json',
    columns: [{
        field: 'id',
        title: '序號'
    }, {
        field: 'name',
        title: '姓名'
    }, {
        field: 'sal',
        title: '薪水'
    }, {
        field: 'sex',
        title: '性別'
    },{
        field: 'age',
        title: '年齡'
    }],
    striped: false,    //是否顯示行間隔色
    cache: false,     //是否使用快取，預設為true，所以一般情況下需要設定一下這個屬性（*）
    pagination: true, //是否顯示分頁（*）
    sortable: true,   //是否啟用排序
    sortOrder: "asc", //排序方式
    sidePagination: "client",//分頁方式：client客戶端分頁，server服務端分頁（*）
    pageNumber: 1,//初始化載入第一頁，預設第一頁,並記錄
    pageSize: 2,//每頁的記錄行數（*）
    pageList: [2, 5, 10, 20], //可供選擇的每頁的行數（*）
    search: true,//是否顯示錶格搜尋
    strictSearch: false,//是否使用嚴格搜尋模式
    showColumns: true, //是否顯示所有的列（選擇顯示的列）
    showRefresh: true,//是否顯示重新整理按鈕
    minimumCountColumns: 2,//最少允許的列數
    clickToSelect: true,//是否啟用點選選中行
    //height: 500,//行高，如果沒有設定height屬性，表格自動根據記錄條數設定表格高度
    uniqueId: "id",//每一行的唯一標識，一般為主鍵列
    showToggle: true,//是否顯示詳細檢視和列表檢視的切換按鈕
    cardView: false,//是否顯示詳細檢視
    detailView: false,//是否顯示父子表
});

效果如下：

5 工具欄

工具欄實現分為兩步

  • 準備工具按鈕容器

  • bootstrap-table中引用外掛

​ 加上這個配置即可：toolbar: '#toolbar', //工具按鈕用哪個容器

案例【3.工具欄.html】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入相關樣式表 -->
		<link rel="stylesheet" type="text/css" href="bootstrap3/css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="bootstrap3/css/bootstrap-theme.min.css"/>
		<link rel="stylesheet" type="text/css" href="bootstrap-table/bootstrap-table.min.css"/>
	</head>
	<body>
		<!-- 工具欄容器 -->
		<div id="toolbar" class="row" style="margin-left: 5px;">
			<button type="button" class="btn btn-default col-md-4">新增</button>
			<button type="button" class="btn btn-info col-md-4">修改</button>
			<button type="button" class="btn btn-danger col-md-4">刪除</button>
		</div>
		<!-- 建立表格容器 -->
		<table id="table"></table>
		<!-- 引入相關js -->
		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="bootstrap3/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="bootstrap-table/bootstrap-table.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="bootstrap-table/bootstrap-table-zh-CN.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//通過bootrap-table外掛渲染表格
			$('#table').bootstrapTable({
			    url: 'json/data.json',
			    columns: [{
			        field: 'id',
			        title: '序號'
			    }, {
			        field: 'name',
			        title: '姓名'
			    }, {
			        field: 'sal',
			        title: '薪水'
			    }, {
			        field: 'sex',
			        title: '性別'
			    },{
			        field: 'age',
			        title: '年齡'
			    }],
				toolbar: '#toolbar',              //工具按鈕用哪個容器
				striped: true,                      //是否顯示行間隔色
				cache: false,                       //是否使用快取，預設為true，所以一般情況下需要設定一下這個屬性（*）
				pagination: true,                   //是否顯示分頁（*）
				sortable: true,                     //是否啟用排序
				sortOrder: "asc",                   //排序方式
				sidePagination: "client",           //分頁方式：client客戶端分頁，server服務端分頁（*）
				pageNumber: 1,                      //初始化載入第一頁，預設第一頁,並記錄
				pageSize: 2,                     //每頁的記錄行數（*）
				pageList: [2, 5, 10, 20],        //可供選擇的每頁的行數（*）
				search: true,                      //是否顯示錶格搜尋
				strictSearch: false,
				showColumns: true,                  //是否顯示所有的列（選擇顯示的列）
				showRefresh: true,                  //是否顯示重新整理按鈕
				minimumCountColumns: 2,             //最少允許的列數
				clickToSelect: true,                //是否啟用點選選中行
				//height: 500,                      //行高，如果沒有設定height屬性，表格自動根據記錄條數設定表格高度
				uniqueId: "id",                     //每一行的唯一標識，一般為主鍵列
				showToggle: false,                   //是否顯示詳細檢視和列表檢視的切換按鈕
				cardView: false,                    //是否顯示詳細檢視
				detailView: false,                  //是否顯示父子表
			});
		</script>
	</body>
</html>

效果如下：

6 後端分頁

後端介面,我後端是java寫的具體分頁程式碼就不上了,這裡把介面文件寫出來

pageNum:查詢的是哪一頁
pageSize：每頁顯示的條數
name：姓名
age：年齡
比如：http://localhost:8080/user/searchPage?name=tom&age=&pageSize=2&pageNum=1
  • 響應(json)

注意：這裡必須是返回{"total":"","rows",[]}這種格式的資料

total是總共的記錄數量

rows是當前頁查出來的記錄物件陣列

{
  "total": 1,
  "rows": [
    {
      "id": 1,
      "name": "tom",
      "age": 18,
      "gender": "1",
      "createTime": "2021-02-22 09:53:24"
    }
  ]
}

【4.後端分頁.html】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入相關樣式表 -->
		<link rel="stylesheet" type="text/css" href="bootstrap3/css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="bootstrap3/css/bootstrap-theme.min.css"/>
		<link rel="stylesheet" type="text/css" href="bootstrap-table/bootstrap-table.min.css"/>
	</head>
	<body>
		<div class="container">
			<!-- 工具欄 -->
			<div id="toolbar" class="row" style="margin-left: 5px;">
				<form class="form-inline">
					<button type="button" class="btn btn-success">新增</button>
					 <div class="form-group">
						<label>姓名</label><input type="text" class="form-control" id="nameTxt"/>
					</div>
					<div class="form-group">
						<label>年齡</label><input type="text" class="form-control" id="ageTxt"/>
					</div>
					<button onclick="search()" type="button" class="btn btn-info">查詢</button>
				</form>
			</div>
			<!-- 建立表格容器 -->
			<table id="myTable"></table>
		</div>
		<!-- 引入相關js -->
		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="bootstrap3/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="bootstrap-table/bootstrap-table.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="bootstrap-table/bootstrap-table-zh-CN.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			 //封裝一個初始化表格的方法
			function initTable(tableId,url,columns,query){
				//將原有的表格銷燬
				$("#"+tableId).bootstrapTable('destroy');
				//通過bootrap-table外掛渲染表格
				var myTable = $('#'+tableId).bootstrapTable({
					method: 'GET',  //請求方式（*）
					url: url,
					columns: columns,
					toolbar: '#toolbar', //工具按鈕用哪個容器
					striped: true, //是否顯示行間隔色
					cache: false,//是否使用快取，預設為true，所以一般情況下需要設定一下這個屬性（*）
					pagination: true,//是否顯示分頁（*）
					sortable: false,//是否啟用排序
					sortOrder: "asc", //排序方式
					sidePagination: "server", //分頁方式：client客戶端分頁，server服務端分頁
					pageNumber: 1, //初始化載入第一頁，預設第一頁,並記錄
					pageSize: 2, //每頁的記錄行數（*）
					pageList: [2, 5, 10, 20],//可供選擇的每頁的行數（*）
					search: false,//是否顯示錶格搜尋
					strictSearch: false,
					showColumns: true,//是否顯示所有的列（選擇顯示的列）
					showRefresh: true,//是否顯示重新整理按鈕
					minimumCountColumns: 2,//最少允許的列數
					clickToSelect: true,//是否啟用點選選中行
					//height: 500,//行高，如果沒有設定height屬性，表格自動根據記錄條數設定表格高度
					uniqueId: "id",//每一行的唯一標識，一般為主鍵列
					showToggle: false,//是否顯示詳細檢視和列表檢視的切換按鈕
					cardView: false,//是否顯示詳細檢視
					detailView: false,//是否顯示父子表
					//得到查詢的引數
					queryParams : function (params) {
						//這裡的鍵的名字和控制器的變數名必須一致，這邊改動，控制器也需要改成一樣的
						/* var temp = {
							pageSize: params.limit,                         //頁面大小
							pageNum: (params.offset / params.limit) + 1,   //頁碼
							//sort: params.sort,      //排序列名
							//sortOrder: params.order //排位命令（desc，asc）
							//自定義的引數
							name:params.name, //姓名
							age:params.age //年齡
						}; */
						if(null == query || undefined == query){
							query = {};
						}
						query.pageSize = params.limit; //頁面大小
						query.pageNum = (params.offset / params.limit) + 1;  //頁碼
						console.log(query);
						return query;
					}
				});
			}
			//初始化列資訊
			var columns =  [
				{
					field: 'id',
					title: '序號'
				}, 
				{
					field: 'name',
					title: '姓名'
				}, 
				{
					field: 'gender',
					title: '性別',
					//formatter 為格式化函式,後端返回的性別型別: 1男2女 所以這裡要處理一下再顯示
					formatter: function(value, row, index){
						//console.log(value);//當前列資料
						//console.log(row);//當前行json資料
						if(value == 1){
							return "男";
						}
						return "女";
					}
				},
				{
					field: 'age',
					title: '年齡'
				},
				{
						field: '',
						title: '操作',
                    	//如果需要對列處理可以寫在formatter函式中
						formatter: function(value,row,index){
							return '<button onclick="updateFun('+row.id+')" type="button" class="btn btn-warning btn-xs">修改</button>&nbsp;'
								   + '<button onclick="deleteFun('+row.id+')" type="button" class="btn btn-danger btn-xs">刪除</button>'
						}
				}
			 ];
			//點選修改按鈕
			function updateFun(data){
				alert("修改："+data)
				console.log(data)
			}
			//點選刪除按鈕
			function deleteFun(data){
				alert("刪除："+data)
				console.log(data)
			}
			
			//點選查詢按鈕
			function search(){
				var name = $("#nameTxt").val();
				var age = $("#ageTxt").val();
				var queryParams = {name,age};
initTable("myTable",'http://localhost:8080/user/searchPage',columns,queryParams);
			}
			//第一次進入頁面載入表格
		    initTable("myTable",'http://localhost:8080/user/searchPage',columns,null);
		</script>
	</body>
</html>

執行效果如下：

參考

Bootstrap-table 使用總結

BOOTSTRAP TABLE表格前臺分頁，點選TAB選項，重新重新整理表格

Bootstrap Table 中文文件（完整翻譯版）

相關推薦

boostrap-table表格外掛筆記

1 bootstrap-table外掛介紹 一個基於bootstrap的表格渲染外掛,可以極大的簡化表格的渲染操作

使用vue開發簡單的table表格外掛，表頭固定，內容區可滾動

開發背景就不過多贅述了，直接先來幾張效果圖吧  首先編寫元件 tablePY.vue 程式碼如下：

【JQuery外掛】把網頁或某div或table表格內容轉為圖片並下載

今天介紹一個非常好用的JQuery外掛，它可以把網頁或某個div或table表格內容轉為圖片並下載儲存。這個外掛叫html2canvas，它只有一個js檔案html2canvas.js，而使用起來也非常簡單。

File-Saver外掛：El-Table表格資料匯出到Excel表格

一、引入外掛 　　1、npm命令引入外掛依賴： cnpm install --save xlsx file-saver 　　 　　2、頁面引入

getdata table表格資料join mysql方法

public function json_product_list($where,$order){ global $_M; $this->table = load::sys_class(\'tabledata\',\'new\');

Angular8 實現table表格表頭固定效果

最近專案中有個需求，表頭固定，內部實現滾動條。除了單個表頭，還有多個表頭的情況（下一篇中介紹）。

VUE table表格動態新增一列資料,新增的這些資料不可以編輯（v-model繫結的資料不能實時更新）

一、問題 用elementUi橫著增加一行資料沒毛病，可以操作 新增一列，這新增的這一列， 第一次去賦值的時候值是改了， 但沒生效

正則表示式替換table表格中的樣式與空標記(保留rowspan與colspan)

完整測試程式碼 <script> var str=\'<p>\'; str=\'<table id=\"tblSort\" cellspacing=\"0\" helvetica=\"\" sans=\"\"><tr id=\"sdf\"><td style=\"color:red\" class=\"ok\" colspan

vue+Element中table表格實現可編輯（select下拉框）

最近在工作中遇到一個問題，需要在表格中實現資料可編輯狀態，具體情況是需要在單元格里加入下拉框；並且每個下拉框的陣列資料是不一樣的，具體是根據當前行前面資料的id查詢而來，前面的是資料是動態生成的，後面的

js Table 表格選中一行變色並獲取該行值

1、原始樣式： 2、滑鼠滑過時： 3、滑鼠選中點選某一行 1、先寫html語言，當然還是應用的前幾天相同的程式碼，可是多了一點點...

CSS佈局-table表格佈局

table佈局歷史久遠，現在已經很少使用，但是因為table本身的一些特性，比如上下對齊，左右對齊，文字預設居中使得table佈局在處理一些規範的佈局時還是很有用的，另外，通過table佈局也正好可以學習一下table的使用方

小謝第36問：elemet - table表格修改後表格行高亮顯示且定位到當前行當前頁

第一次做這個需求得時候很亂，總是在表格頁和修改頁徘徊，總覺得什麼都會，但是就是做不出自己想要得效果

vue elementui table表格展開行每次只展開一行

需求：表格展開行每次只展開一行 <template> <el-table :row-key=\"getRowKeys\" :expand-row-keys=\"expands\"

elemen-table表格資料轉換-formatter屬性

有時候我們資料請求回來的格式並不是我們想要的，這時候我們用 formatter就可以啦

vuejs element table 表格新增行,修改,單獨刪除行,批量刪除行操作

1.表格動態新增，也可刪除 <template> <div class=\"TestWord\"> <el-button @click=\"addLine\">新增行數</el-button>

element的el-table表格自定義表頭，slot="header"內，資料不更新的問題

<template> <div class=\"bidsInfo\"> <el-table ref=\"singleTable\" :data=\"noticeData\" highlight-current-row style=\"width: 100%;margin-top:40px;\">

前端實現匯出table表格為Excel

前端實現匯出table表格為Excel jquery.table2excel.js要基於jquery的基礎上才能使用，是一款專門匯入excel的外掛

ant-design vue table表格高亮某一行 某一格

一、高亮某一行 1.table屬性rowClassName 1 <a-table 2class=\"alerm\" 3size=\"small\" 4ref=\"table\"

封裝Vue Element的table表格元件

上週分享了幾篇關於React元件封裝方面的博文，這周就來分享幾篇關於Vue元件封裝方面的博文，也好讓大家能更好地瞭解React和Vue在元件封裝方面的區別。

封裝Vue Element的table表格元件的示例詳解

上週分享了幾篇關於React元件封裝方面的博文，這周就來分享幾篇關於Vue元件封裝方面的博文，也好讓大家能更好地瞭解React和Vue在元件封裝方面的區別。