Bootstrap Table使用方法詳解
bootstrap-table使用總結(jié)
bootstrap-table是在bootstrap-table的基礎(chǔ)上寫出來(lái)的，專門用于顯示數(shù)據(jù)的表格插件。而bootstrap是來(lái)自 Twitter，是目前最受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，具有簡(jiǎn)便靈活，快速前端開(kāi)發(fā)的優(yōu)勢(shì)。對(duì)與bootstrap在此就不在敘述。本文將著重講解自己在項(xiàng)目中使用到bootstrap-table的一些理解和如何學(xué)習(xí)它。
首先交代一下，jquery ，bootstrap ，bootstrap-table 三者之間的關(guān)系。bootstrap很多部分代碼涉及到了jquery的，也就是說(shuō) bootstrap是依賴jquery的，而我們要使用的bootstrap-table則是在bootstrap基礎(chǔ)上創(chuàng)造出來(lái)的，所以在使用bootstrap-table之前必須引用 jquery 和bootstrap的相關(guān)js，css文件。
接著說(shuō)，bootstrap-table的特點(diǎn):與jquery-ui，jqgrid等表格顯示插件而言，bootstrap-table扁平化，輕量級(jí),對(duì)于一些輕量級(jí)的數(shù)據(jù)顯示，他是綽綽有余，而對(duì)父子表等的支持也很好，最主要的是可以與bootstrap的其他標(biāo)簽無(wú)縫組合。
好了，簡(jiǎn)介的話就說(shuō)到這，直接上代碼和效果圖之后，再做進(jìn)一步的討論。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <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">已添加教師賬號(hào)</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">用戶賬號(hào)</th> <th data-field="pwd">用戶密碼</th> <th data-field="t_name">教師姓名</th> </tr> </thead> </table> </div> </div> </div> </body>
效果圖：
好接下來(lái)我們 分步驟剖析一下上面的代碼的含義。
1.首先我們需要去下載相應(yīng)的 jquery bootstrap bootstrap-table的包，這些網(wǎng)上都有教程，在此不再敘述如何下載。
由上面<head>標(biāo)簽中引用js和css文件名可知我們必須引進(jìn)這幾個(gè)文件。
注意bootstrap，下載編譯過(guò)的壓縮包中只有三個(gè)文件夾 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壓縮文件
這六個(gè)必須配置，其中bootstrap-table-zh-CN.js是支持中文的js文件，只有加載了這個(gè)文件我們的一些表格顯示信息才會(huì)被設(shè)置成中文。
我們來(lái)實(shí)驗(yàn)一下 將bootstrap-table-zh-CN.js去掉后的顯示效果。
當(dāng)然我們還可以把顯示信息設(shè)置成其他語(yǔ)言，只要將bootstrap-table-zh-CN.js換成其他語(yǔ)言的js文件即可。bootstrap-table包中都有支持。
我們還可以看看這個(gè)文件中的源碼，我們看一下，就知道這個(gè)文件干了什么了。
/**
* Bootstrap Table Chinese translation
* Author: Zhixin Wen<wenzhixin2010@gmail.com>
*/
(function ($) {
'use strict';
$.fn.bootstrapTable.locales['zh-CN'] = {
formatLoadingMessage: function () {
return '正在努力地加載數(shù)據(jù)中，請(qǐng)稍候……';
},
formatRecordsPerPage: function (pageNumber) {
return '每頁(yè)顯示 ' + pageNumber + ' 條記錄';
},
formatShowingRows: function (pageFrom, pageTo, totalRows) {
return '顯示第 ' + pageFrom + ' 到第 ' + pageTo + ' 條記錄，總共 ' + totalRows + ' 條記錄';
},
formatSearch: function () {
return '搜索';
},
formatNoMatches: function () {
return '沒(méi)有找到匹配的記錄';
},
formatPaginationSwitch: function () {
return '隱藏/顯示分頁(yè)';
},
formatRefresh: function () {
return '刷新';
},
formatToggle: function () {
return '切換';
},
formatColumns: function () {
return '列';
}
};
$.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['zh-CN']);
})(jQuery);
粗略一看就知道，引用該js文件后，在加載時(shí)，便祈禱了初始化的效果。將一些顯示信息的內(nèi)容轉(zhuǎn)為相應(yīng)的中內(nèi)容。
2.接著我們來(lái)說(shuō)相關(guān)的html代碼，實(shí)際上與bootstrap-table有關(guān)的html代碼只有這一部分
<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">用戶賬號(hào)</th> <th data-field="pwd">用戶密碼</th> <th data-field="t_name">教師姓名</th> </tr> </thead> </table>
對(duì)，就只有一個(gè)table標(biāo)簽，再加上一大堆了 參數(shù)，而表格的展現(xiàn)形式就是通過(guò)這些在參數(shù) 來(lái)實(shí)現(xiàn)的。要知道有哪些樣式和功能，光靠我列舉肯定是九牛一毛，授人以魚不如授人以漁，我告訴大家去哪查找這些類.class的含義。 我們可到bootstrap-table的專業(yè)網(wǎng)站上去查找 這有一個(gè)我用的鏈接，點(diǎn)擊打開(kāi)鏈接如果無(wú)效的可以 直接輸入http://bootstrap-table.wenzhixin.net.cn/documentation
當(dāng)然還可以在example中看一些例子
我們?nèi)绾尾榭?相應(yīng)的參數(shù)的含義呢？ 看到上面這張圖，最右邊的是一些選項(xiàng)，可以選這可以設(shè)置的表格屬性，行屬性，以及可綁定的事件。
點(diǎn)擊表格屬性 Table options 顯示如下圖，首先看到標(biāo)題Name用于js創(chuàng)建表格是使用，而Attribute是html創(chuàng)建表格使用的，
舉幾個(gè)例子在我們上面的代碼中有這么幾個(gè) 參數(shù)他們的意思是：
data-url：索取數(shù)據(jù)的url。
data-method：請(qǐng)求方式。
data-height：設(shè)置表格的高
data-query-params="queryParams" ：設(shè)置
data-toolbar="#toolbar" ：設(shè)置裝按鈕的容器為id為toolbar的。
data-pagination="true" ：設(shè)置是否顯示頁(yè)碼數(shù)
data-search="true" ：設(shè)置search框
data-show-refresh="true" ：設(shè)置刷新按鈕
data-show-toggle="true" ：設(shè)置數(shù)據(jù)顯示格式
這下你該明白怎么樣查看了吧！
注意其中下面段代碼是核心，<tr>表示一行 <th>一個(gè)格，data-field="name"表示一行中一個(gè)格子中的數(shù)據(jù)名 你可以把 data-field理解成id，因?yàn)楹笈_(tái)傳送過(guò)來(lái)的數(shù)據(jù)就是根據(jù)data-field的來(lái)區(qū)分，那個(gè)數(shù)據(jù)發(fā)送給誰(shuí)的。
<thead> <tr> <th data-field="name">用戶賬號(hào)</th> <th data-field="pwd">用戶密碼</th> <th data-field="t_name">教師姓名</th> </tr> </thead>
對(duì)于不想用html靜態(tài)生成，也可以使用js動(dòng)態(tài)生成。給一個(gè)代碼demo，要設(shè)置相關(guān)的參數(shù)只需要采用 上面講的 Name:options 即可。例如在html中設(shè)置數(shù)據(jù)請(qǐng)求的目的文件 data-url："./data.php" 在js中只要聲明 url:"./data.php"
$('#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.這樣說(shuō)，其他代碼是干什么的，其中一部分代碼是使用了 boostrap中的面板來(lái)設(shè)置格式，即將table鑲嵌在面板中。 所去掉面板的代碼后bootstrap-table的效果是這樣的
僅僅是沒(méi)有了面板而已。
4.傳送數(shù)據(jù)的格式，bootstrap-table 接收的數(shù)據(jù)形式默認(rèn)為json格式的
在上面可以看到請(qǐng)求的后臺(tái)地址為:"./data.php",我們來(lái)看一下他的內(nèi)容
<?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);
?>
很簡(jiǎn)單吧！ 當(dāng)然這只是我手寫的一些測(cè)試數(shù)據(jù)，在項(xiàng)目中當(dāng)然是從數(shù)據(jù)庫(kù)中查找出來(lái)的。
5.當(dāng)然僅僅使顯示數(shù)據(jù)有時(shí)候還是不夠的，我們需要和table進(jìn)行一些互動(dòng)，比如進(jìn)行一些刪除，修改的功能，這時(shí)就需要用到bootstrap-table 的一些事件了。在上面的案例中我在table的中鑲嵌了兩個(gè)button組件如圖
這個(gè)鑲嵌的實(shí)現(xiàn)辦法是在在table的屬性中 添加了這么一行 data-toolbar="#toolbar"
其意思就是在工具欄的一行添加 id為toolbar的標(biāo)簽。
在本人做到這個(gè)項(xiàng)目中，要通過(guò)這兩個(gè)按鈕對(duì)table中點(diǎn)擊選中的行進(jìn)行相應(yīng)的操作。
編寫相應(yīng)的事件，首先為table綁定一個(gè)選中的觸發(fā)事件，然后通過(guò)getSelectRow函數(shù)獲得點(diǎn)擊選中行的數(shù)據(jù)。
$('#teacher_table').on('click-row.bs.table', function (e, row, element)
{
$('.success').removeClass('success');//去除之前選中的行的，選中樣式
$(element).addClass('success');//添加當(dāng)前選中的 success樣式用于區(qū)別
}); function getSelectedRow()
{
var index = $('#teacher_table').find('tr.success').data('index');//獲得選中的行
return $('#teacher_table').bootstrapTable('getData')[index];//返回選中行所有數(shù)據(jù)
}
如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附3個(gè)精彩的專題：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- Bootstrap Table 在指定列中添加下拉框控件并獲取所選值
- Bootstrap Table列寬拖動(dòng)的方法
- bootstrap table列和表頭對(duì)不齊的解決方法
- JS組件Bootstrap Table使用方法詳解
- bootstrap table實(shí)現(xiàn)單擊單元格可編輯功能
- bootstrap table單元格新增行并編輯
- 值得分享的bootstrap table實(shí)例
- 值得分享的輕量級(jí)Bootstrap Table表格插件
- 基于BootStrap的Metronic框架實(shí)現(xiàn)頁(yè)面鏈接收藏夾功能按鈕移動(dòng)收藏記錄(使用Sortable進(jìn)行拖動(dòng)排序)
- Bootstrap?table列上下移動(dòng)效果
相關(guān)文章
JavaScript設(shè)計(jì)模式之單例模式詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript設(shè)計(jì)模式之例模式的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要為大家詳細(xì)介紹了JS中this上下文對(duì)象使用方式,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
node.js 一個(gè)簡(jiǎn)單的頁(yè)面輸出實(shí)現(xiàn)代碼
最近決定重拾node.js，用它來(lái)做一個(gè)合并JS文件的東西。由于忘得差不多了，先看能不能輸出一個(gè)頁(yè)面來(lái)再說(shuō)。以下是我的一些筆記，省得以后又忘凈光2012-03-03
js控制href內(nèi)容的連接內(nèi)容的變化示例
這篇文章主要介紹了使用js控制href內(nèi)容的連接內(nèi)容的變化,需要的朋友可以參考下2014-04-04
小程序角標(biāo)的添加及綁定購(gòu)物車數(shù)量進(jìn)行實(shí)時(shí)更新的實(shí)現(xiàn)代碼
這篇文章主要介紹了小程序角標(biāo)的添加及綁定購(gòu)物車數(shù)量進(jìn)行實(shí)時(shí)更新的實(shí)現(xiàn)代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-12-12
javascript 動(dòng)態(tài)參數(shù)判空操作
在做交友中心的頁(yè)面的時(shí)候，有一個(gè)javascript函數(shù)，它的第二個(gè)參數(shù)是動(dòng)態(tài)的。2008-12-12
bootstrap-treeview自定義雙擊事件實(shí)現(xiàn)方法
這篇文章主要介紹了bootstrap-treeview自定義事件雙擊事件實(shí)現(xiàn)方法,需要的朋友可以參考下2016-01-01
原生js簡(jiǎn)單實(shí)現(xiàn)放大鏡特效
這篇文章主要為大家詳細(xì)介紹了原生js簡(jiǎn)單實(shí)現(xiàn)放大鏡特效，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
有時(shí)候我們需要數(shù)組元素的值，那么就可以參考下面的方法，文中提到了不少這方面的資料，數(shù)組去重功能等2013-03-03
為Javascript中的String對(duì)象添加去除左右空格的方法(示例代碼)
這篇文章主要介紹了為Javascript中的String對(duì)象添加去除左右空格的方法(示例代碼)。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11