bootstrap-table使用總結
bootstrap-table是在bootstrap-table的基礎上寫出來的，專門用于顯示數(shù)據(jù)的表格插件。而bootstrap是來自 Twitter，是目前最受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，具有簡便靈活，快速前端開發(fā)的優(yōu)勢。對與bootstrap在此就不在敘述。本文將著重講解自己在項目中使用到bootstrap-table的一些理解和如何學習它。
首先交代一下，jquery ，bootstrap ，bootstrap-table 三者之間的關系。bootstrap很多部分代碼涉及到了jquery的，也就是說 bootstrap是依賴jquery的，而我們要使用的bootstrap-table則是在bootstrap基礎上創(chuàng)造出來的，所以在使用bootstrap-table之前必須引用 jquery 和bootstrap的相關js，css文件。
接著說，bootstrap-table的特點:與jquery-ui，jqgrid等表格顯示插件而言，bootstrap-table扁平化，輕量級,對于一些輕量級的數(shù)據(jù)顯示，他是綽綽有余，而對父子表等的支持也很好，最主要的是可以與bootstrap的其他標簽無縫組合。
好了，簡介的話就說到這，直接上代碼和效果圖之后，再做進一步的討論。
<!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.首先我們需要去下載相應的 jquery bootstrap bootstrap-table的包，這些網(wǎng)上都有教程，在此不再敘述如何下載。
由上面<head>標簽中引用js和css文件名可知我們必須引進這幾個文件。
注意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包中都有支持。
我們還可以看看這個文件中的源碼，我們看一下，就知道這個文件干了什么了。
/** * 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)為相應的中內(nèi)容。
2.接著我們來說相關的html代碼，實際上與bootstrap-table有關的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標簽，再加上一大堆了 參數(shù)，而表格的展現(xiàn)形式就是通過這些在參數(shù) 來實現(xiàn)的。要知道有哪些樣式和功能，光靠我列舉肯定是九牛一毛，授人以魚不如授人以漁，我告訴大家去哪查找這些類.class的含義。 我們可到bootstrap-table的專業(yè)網(wǎng)站上去查找 這有一個我用的鏈接，點擊打開鏈接如果無效的可以 直接輸入http://bootstrap-table.wenzhixin.net.cn/documentation
當然還可以在example中看一些例子
我們?nèi)绾尾榭?相應的參數(shù)的含義呢？ 看到上面這張圖，最右邊的是一些選項，可以選這可以設置的表格屬性，行屬性，以及可綁定的事件。
點擊表格屬性 Table options 顯示如下圖，首先看到標題Name用于js創(chuàng)建表格是使用，而Attribute是html創(chuàng)建表格使用的，
舉幾個例子在我們上面的代碼中有這么幾個 參數(shù)他們的意思是：
data-url：索取數(shù)據(jù)的url。
data-method：請求方式。
data-height：設置表格的高
data-query-params="queryParams" ：設置
data-toolbar="#toolbar" ：設置裝按鈕的容器為id為toolbar的。
data-pagination="true" ：設置是否顯示頁碼數(shù)
data-search="true" ：設置search框
data-show-refresh="true" ：設置刷新按鈕
data-show-toggle="true" ：設置數(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ù)只需要采用 上面講的 Name:options 即可。例如在html中設置數(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中的面板來設置格式，即將table鑲嵌在面板中。 所去掉面板的代碼后bootstrap-table的效果是這樣的
僅僅是沒有了面板而已。
4.傳送數(shù)據(jù)的格式，bootstrap-table 接收的數(shù)據(jù)形式默認為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);?>很簡單吧！ 當然這只是我手寫的一些測試數(shù)據(jù)，在項目中當然是從數(shù)據(jù)庫中查找出來的。
5.當然僅僅使顯示數(shù)據(jù)有時候還是不夠的，我們需要和table進行一些互動，比如進行一些刪除，修改的功能，這時就需要用到bootstrap-table 的一些事件了。在上面的案例中我在table的中鑲嵌了兩個button組件如圖
這個鑲嵌的實現(xiàn)辦法是在在table的屬性中 添加了這么一行 data-toolbar="#toolbar"
其意思就是在工具欄的一行添加 id為toolbar的標簽。
在本人做到這個項目中，要通過這兩個按鈕對table中點擊選中的行進行相應的操作。
編寫相應的事件，首先為table綁定一個選中的觸發(fā)事件，然后通過getSelectRow函數(shù)獲得點擊選中行的數(shù)據(jù)。
$('#teacher_table').on('click-row.bs.table', function (e, row, element) { $('.success').removeClass('success');//去除之前選中的行的，選中樣式 $(element).addClass('success');//添加當前選中的 success樣式用于區(qū)別}); function getSelectedRow() { var index = $('#teacher_table').find('tr.success').data('index');//獲得選中的行 return $('#teacher_table').bootstrapTable('getData')[index];//返回選中行所有數(shù)據(jù)}如果大家還想深入學習，可以點擊這里進行學習，再為大家附3個精彩的專題：
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
