快捷導(dǎo)航

Bootstrap Table使用方法詳解

更新時間：2016年08月01日 10:46:10 作者：aozeahj

這篇文章主要為大家詳細(xì)介紹了JS組件Bootstrap Table使用方法，具有一定的實用性和參考價值，感興趣的小伙伴們可以參考一下

bootstrap-table使用總結(jié)

bootstrap-table是在bootstrap-table的基礎(chǔ)上寫出來的，專門用于顯示數(shù)據(jù)的表格插件。而bootstrap是來自 Twitter，是目前最受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，具有簡便靈活，快速前端開發(fā)的優(yōu)勢。對與bootstrap在此就不在敘述。本文將著重講解自己在項目中使用到bootstrap-table的一些理解和如何學(xué)習(xí)它。

首先交代一下，jquery ，bootstrap ，bootstrap-table 三者之間的關(guān)系。bootstrap很多部分代碼涉及到了jquery的，也就是說 bootstrap是依賴jquery的，而我們要使用的bootstrap-table則是在bootstrap基礎(chǔ)上創(chuàng)造出來的，所以在使用bootstrap-table之前必須引用 jquery 和bootstrap的相關(guān)js，css文件。

接著說，bootstrap-table的特點:與jquery-ui，jqgrid等表格顯示插件而言，bootstrap-table扁平化，輕量級,對于一些輕量級的數(shù)據(jù)顯示，他是綽綽有余，而對父子表等的支持也很好，最主要的是可以與bootstrap的其他標(biāo)簽無縫組合。

好了，簡介的話就說到這，直接上代碼和效果圖之后，再做進(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">已添加教師賬號</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>

效果圖：

好接下來我們分步驟剖析一下上面的代碼的含義。

1.首先我們需要去下載相應(yīng)的 jquery bootstrap bootstrap-table的包，這些網(wǎng)上都有教程，在此不再敘述如何下載。

由上面<head>標(biāo)簽中引用js和css文件名可知我們必須引進(jìn)這幾個文件。

注意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文件，只有加載了這個文件我們的一些表格顯示信息才會被設(shè)置成中文。

我們來實驗一下將bootstrap-table-zh-CN.js去掉后的顯示效果。

當(dāng)然我們還可以把顯示信息設(shè)置成其他語言，只要將bootstrap-table-zh-CN.js換成其他語言的js文件即可。bootstrap-table包中都有支持。

我們還可以看看這個文件中的源碼，我們看一下，就知道這個文件干了什么了。

/**
 * Bootstrap Table Chinese translation
 * Author: Zhixin Wen<wenzhixin2010@gmail.com>
 */
(function ($) {
 'use strict';

 $.fn.bootstrapTable.locales['zh-CN'] = {
 formatLoadingMessage: function () {
 return '正在努力地加載數(shù)據(jù)中，請稍候……';
 },
 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文件后，在加載時，便祈禱了初始化的效果。將一些顯示信息的內(nèi)容轉(zhuǎn)為相應(yīng)的中內(nèi)容。

2.接著我們來說相關(guān)的html代碼，實際上與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">用戶賬號</th>
 <th data-field="pwd">用戶密碼</th>
 <th data-field="t_name">教師姓名</th>
 </tr>
 </thead>
 </table>

對，就只有一個table標(biāo)簽，再加上一大堆了參數(shù)，而表格的展現(xiàn)形式就是通過這些在參數(shù) 來實現(xiàn)的。要知道有哪些樣式和功能，光靠我列舉肯定是九牛一毛，授人以魚不如授人以漁，我告訴大家去哪查找這些類.class的含義。我們可到bootstrap-table的專業(yè)網(wǎng)站上去查找這有一個我用的鏈接，點擊打開鏈接如果無效的可以直接輸入http://bootstrap-table.wenzhixin.net.cn/documentation

當(dāng)然還可以在example中看一些例子

我們?nèi)绾尾榭?相應(yīng)的參數(shù)的含義呢？看到上面這張圖，最右邊的是一些選項，可以選這可以設(shè)置的表格屬性，行屬性，以及可綁定的事件。

點擊表格屬性 Table options 顯示如下圖，首先看到標(biāo)題Name用于js創(chuàng)建表格是使用，而Attribute是html創(chuàng)建表格使用的，

舉幾個例子在我們上面的代碼中有這么幾個參數(shù)他們的意思是：

data-url：索取數(shù)據(jù)的url。
data-method：請求方式。
data-height：設(shè)置表格的高
data-query-params="queryParams" ：設(shè)置
data-toolbar="#toolbar" ：設(shè)置裝按鈕的容器為id為toolbar的。
data-pagination="true" ：設(shè)置是否顯示頁碼數(shù)
data-search="true" ：設(shè)置search框
data-show-refresh="true" ：設(shè)置刷新按鈕
data-show-toggle="true" ：設(shè)置數(shù)據(jù)顯示格式

這下你該明白怎么樣查看了吧！

注意其中下面段代碼是核心，<tr>表示一行 <th>一個格，data-field="name"表示一行中一個格子中的數(shù)據(jù)名你可以把 data-field理解成id，因為后臺傳送過來的數(shù)據(jù)就是根據(jù)data-field的來區(qū)分，那個數(shù)據(jù)發(fā)送給誰的。

<thead>
 <tr>
 <th data-field="name">用戶賬號</th>
 <th data-field="pwd">用戶密碼</th>
 <th data-field="t_name">教師姓名</th>
 </tr>
</thead>

對于不想用html靜態(tài)生成，也可以使用js動態(tài)生成。給一個代碼demo，要設(shè)置相關(guān)的參數(shù)只需要采用上面講的 Name:options 即可。例如在html中設(shè)置數(shù)據(jù)請求的目的文件 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.這樣說，其他代碼是干什么的，其中一部分代碼是使用了 boostrap中的面板來設(shè)置格式，即將table鑲嵌在面板中。所去掉面板的代碼后bootstrap-table的效果是這樣的

僅僅是沒有了面板而已。

4.傳送數(shù)據(jù)的格式，bootstrap-table 接收的數(shù)據(jù)形式默認(rèn)為json格式的

在上面可以看到請求的后臺地址為:"./data.php",我們來看一下他的內(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);

?>

很簡單吧！當(dāng)然這只是我手寫的一些測試數(shù)據(jù)，在項目中當(dāng)然是從數(shù)據(jù)庫中查找出來的。

5.當(dāng)然僅僅使顯示數(shù)據(jù)有時候還是不夠的，我們需要和table進(jìn)行一些互動，比如進(jìn)行一些刪除，修改的功能，這時就需要用到bootstrap-table 的一些事件了。在上面的案例中我在table的中鑲嵌了兩個button組件如圖

這個鑲嵌的實現(xiàn)辦法是在在table的屬性中添加了這么一行 data-toolbar="#toolbar"

其意思就是在工具欄的一行添加 id為toolbar的標(biāo)簽。

在本人做到這個項目中，要通過這兩個按鈕對table中點擊選中的行進(jìn)行相應(yīng)的操作。

編寫相應(yīng)的事件，首先為table綁定一個選中的觸發(fā)事件，然后通過getSelectRow函數(shù)獲得點擊選中行的數(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í)，可以點擊這里進(jìn)行學(xué)習(xí)，再為大家附3個精彩的專題：

Bootstrap學(xué)習(xí)教程

Bootstrap實戰(zhàn)教程

Bootstrap Table使用教程

Bootstrap插件使用教程

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: