bootstrap-table使用總結php
bootstrap-table是在bootstrap-table的基礎上寫出來的，專門用於顯示數據的表格插件。而bootstrap是來自 Twitter，是目前最受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的，具備簡便靈活，快速前端開發的優點。對與bootstrap在此就不在敘述。本文將着重講解本身在項目中使用到bootstrap-table的一些理解和如何學習它。css
首先交代一下，jquery ，bootstrap ，bootstrap-table 三者之間的關係。bootstrap不少部分代碼涉及到了jquery的，也就是說 bootstrap是依賴jquery的，而咱們要使用的bootstrap-table則是在bootstrap基礎上創造出來的，因此在使用bootstrap-table以前必須引用 jquery 和bootstrap的相關js，css文件。html
接着說，bootstrap-table的特色:與jquery-ui，jqgrid等表格顯示插件而言，bootstrap-table扁平化，輕量級,對於一些輕量級的數據顯示，他是綽綽有餘，而對父子表等的支持也很好，最主要的是能夠與bootstrap的其餘標籤無縫組合。前端
好了，簡介的話就說到這，直接上代碼和效果圖以後，再作進一步的討論。java
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<head>
<title>bootstrap-table</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="./js/jquery-2.2.1.js"></script>
<script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="./bootstrap-table/bootstrap-table-all.js"></script>
<script type="text/javascript" src="./bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
<link rel="stylesheet" type="text/css" href="./bootstrap/css/bootstrap.min.css" >
<link rel="stylesheet" type="text/css" href="./bootstrap-table/bootstrap-table.min.css" >
</head>
<script language="javascript">
</script>
<body>
<div class="col-md-offset-3 col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title text-center">已添加教師帳號</h3>
</div>
<div class="panel-body">
<div id="toolbar" class="btn-group">
<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="teacher_table" data-toggle="table" data-url="./data.php" data-method="post"
data-query-params="queryParams"
data-toolbar="#toolbar"
data-pagination="true"
data-search="true"
data-show-refresh="true"
data-show-toggle="true"
data-show-columns="true"
data-page-size="5">
<thead>
<tr>
<th data-field="name">用戶帳號</th>
<th data-field="pwd">用戶密碼</th>
<th data-field="t_name">教師姓名</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</body>
|
效果圖：jquery
好接下來咱們 分步驟剖析一下上面的代碼的含義。數據庫
1.首先咱們須要去下載相應的 jquery bootstrap bootstrap-table的包，這些網上都有教程，在此再也不敘述如何下載。json
由上面<head>標籤中引用js和css文件名可知咱們必須引進這幾個文件。bootstrap
注意bootstrap，下載編譯過的壓縮包中只有三個文件夾 css ，fonts， js
1. jquery-2.2.1.js ---- 最新的jquery文件
2. bootstrap.min.js --- 最新的bootstrap/js中bootstrap.min.js 壓縮文件
3.bootstrap.min.css ---最新的bootstrap/css中bootstrap.min.css 壓縮文件
4.bootstrap-table-all.js ---最新bootstrap-table下的js文件
5.bootstrap-table-zh-CN.js ----最新bootstrap-table/locale下的中文初始文件
6.bootstrap-table.min.css ---最新的bootstrap-table下css壓縮文件
這六個必須配置，其中bootstrap-table-zh-CN.js是支持中文的js文件，只有加載了這個文件咱們的一些表格顯示信息纔會被設置成中文。
咱們來實驗一下 將bootstrap-table-zh-CN.js去掉後的顯示效果。
固然咱們還能夠把顯示信息設置成其餘語言，只要將bootstrap-table-zh-CN.js換成其餘語言的js文件便可。bootstrap-table包中都有支持。
咱們還能夠看看這個文件中的源碼，咱們看一下，就知道這個文件幹了什麼了。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
/**
* Bootstrap Table Chinese translation
* Author: Zhixin Wen<wenzhixin2010@gmail.com>
*/
(function ($) {
'use strict';
$.fn.bootstrapTable.locales['zh-CN'] = {
formatLoadingMessage: function () {
return '正在努力地加載數據中，請稍候……';
},
formatRecordsPerPage: function (pageNumber) {
return '每頁顯示 ' + pageNumber + ' 條記錄';
},
formatShowingRows: function (pageFrom, pageTo, totalRows) {
return '顯示第 ' + pageFrom + ' 到第 ' + pageTo + ' 條記錄，總共 ' + totalRows + ' 條記錄';
},
formatSearch: function () {
return '搜索';
},
formatNoMatches: function () {
return '沒有找到匹配的記錄';
},
formatPaginationSwitch: function () {
return '隱藏/顯示分頁';
},
formatRefresh: function () {
return '刷新';
},
formatToggle: function () {
return '切換';
},
formatColumns: function () {
return '列';
}
};
$.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['zh-CN']);
})(jQuery);
|
粗略一看就知道，引用該js文件後，在加載時，便祈禱了初始化的效果。將一些顯示信息的內容轉爲相應的中內容。
2.接着咱們來講相關的html代碼，實際上與bootstrap-table有關的html代碼只有這一部分
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<table id="teacher_table" data-toggle="table" data-url="./data.php" data-method="post"
data-query-params="queryParams"
data-toolbar="#toolbar"
data-pagination="true"
data-search="true"
data-show-refresh="true"
data-show-toggle="true"
data-show-columns="true"
data-page-size="5">
<thead>
<tr>
<th data-field="name">用戶帳號</th>
<th data-field="pwd">用戶密碼</th>
<th data-field="t_name">教師姓名</th>
</tr>
</thead>
</table>
|
對，就只有一個table標籤，再加上一大堆了 參數，而表格的展示形式就是經過這些在參數 來實現的。要知道有哪些樣式和功能，光靠我列舉確定是九牛一毛，授人以魚不如授人以漁，我告訴你們去哪查找這些類.class的含義。 咱們可到bootstrap-table的專業網站上去查找 這有一個我用的連接，點擊打開連接若是無效的能夠 直接輸入http://bootstrap-table.wenzhixin.net.cn/documentation
固然還能夠在example中看一些例子
咱們如何查看 相應的參數的含義呢？ 看到上面這張圖，最右邊的是一些選項，能夠選這能夠設置的表格屬性，行屬性，以及可綁定的事件。
點擊表格屬性 Table options 顯示以下圖，首先看到標題Name用於js建立表格是使用，而Attribute是html建立表格使用的，
舉幾個例子在咱們上面的代碼中有這麼幾個 參數他們的意思是：
data-url：索取數據的url。
data-method：請求方式。
data-height：設置表格的高
data-query-params="queryParams" ：設置
data-toolbar="#toolbar" ：設置裝按鈕的容器爲id爲toolbar的。
data-pagination="true" ：設置是否顯示頁碼數
data-search="true" ：設置search框
data-show-refresh="true" ：設置刷新按鈕
data-show-toggle="true" ：設置數據顯示格式
這下你該明白怎麼樣查看了吧！
注意其中下面段代碼是核心，<tr>表示一行 <th>一個格，data-field="name"表示一行中一個格子中的數據名 你能夠把 data-field理解成id，由於後臺傳送過來的數據就是根據data-field的來區分，那個數據發送給誰的。
|
1
2
3
4
5
6
7
|
<thead>
<tr>
<th data-field="name">用戶帳號</th>
<th data-field="pwd">用戶密碼</th>
<th data-field="t_name">教師姓名</th>
</tr>
</thead>
|
對於不想用html靜態生成，也可使用js動態生成。給一個代碼demo，要設置相關的參數只須要採用 上面講的 Name:options 便可。例如在html中設置數據請求的目的文件 data-url："./data.php" 在js中只要聲明 url:"./data.php"
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
$('#table').bootstrapTable({
columns: [{
field: 'id',
title: 'Item ID'
}, {
field: 'name',
title: 'Item Name'
}, {
field: 'price',
title: 'Item Price'
}],
data: [{
id: 1,
name: 'Item 1',
price: '$1'
}, {
id: 2,
name: 'Item 2',
price: '$2'
}]
});
|
3.這樣說，其餘代碼是幹什麼的，其中一部分代碼是使用了 boostrap中的面板來設置格式，即將table鑲嵌在面板中。 所去掉面板的代碼後bootstrap-table的效果是這樣的
僅僅是沒有了面板而已。
4.傳送數據的格式，bootstrap-table 接收的數據形式默認爲json格式的
在上面能夠看到請求的後臺地址爲:"./data.php",咱們來看一下他的內容
|
1
2
3
4
5
6
7
8
|
<?php
$results[0]=array("name"=>"aoze","pwd"=>"20132588","t_name"=>"張三");
$results[1]=array("name"=>"lisi","pwd"=>"1234","t_name"=>"李四");
$results[2]=array("name"=>"wangwu","pwd"=>"44455","t_name"=>"王五");
echo json_encode($results);
?>
|
很簡單吧！ 固然這只是我手寫的一些測試數據，在項目中固然是從數據庫中查找出來的。
5.固然僅僅使顯示數據有時候仍是不夠的，咱們須要和table進行一些互動，好比進行一些刪除，修改的功能，這時就須要用到bootstrap-table 的一些事件了。在上面的案例中我在table的中鑲嵌了兩個button組件如圖
這個鑲嵌的實現辦法是在在table的屬性中 添加了這麼一行 data-toolbar="#toolbar"
其意思就是在工具欄的一行添加 id爲toolbar的標籤。
在本人作到這個項目中，要經過這兩個按鈕對table中點擊選中的行進行相應的操做。
編寫相應的事件，首先爲table綁定一個選中的觸發事件，而後經過getSelectRow函數得到點擊選中行的數據。
|
1
2
3
4
5
6
7
8
9
|
$('#teacher_table').on('click-row.bs.table', function (e, row, element)
{
$('.success').removeClass('success');//去除以前選中的行的，選中樣式
$(element).addClass('success');//添加當前選中的 success樣式用於區別
}); function getSelectedRow()
{
var index = $('#teacher_table').find('tr.success').data('index');//得到選中的行
return $('#teacher_table').bootstrapTable('getData')[index];//返回選中行全部數據
}
|
若是你們還想深刻學習，能夠點擊這裏進行學習，再爲你們附3個精彩的專題：
以上就是本文的所有內容，但願對你們的學習有所幫助，也但願你們多多支持腳本之家。
如對本文有疑問，請提交到交流社區，廣大熱心網友會爲你解答！！ 點擊進入社區