Bootstrap Table使用方法詳解
- PHPz原創
- 2017-01-04 11:12:5110160瀏覽
bootstrap-table使用總結
bootstrap-table是在bootstrap-table的基礎上寫出來的，專門用於顯示資料的表格插件。而bootstrap是來自 Twitter，是目前最受歡迎的前端框架。 Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的，具有簡單靈活，快速前端開發的優勢。對與bootstrap在此就不在敘述。本文將著重講解自己在專案中使用到bootstrap-table的一些理解和如何學習它。
【相關影片推薦：Bootstrap教學】
先交代一下，jquery ，bootstrap ，bootstrap-table 三者之間的關係。 bootstrap很多部分程式碼涉及到了jquery的，也就是說bootstrap是依賴jquery的，而我們要使用的bootstrap-table則是在bootstrap基礎上創造出來的，所以在使用bootstrap-table之前必須引用jquery 和bootstrap的相關js，css檔。
接著說，bootstrap-table的特點:與jquery-ui，jqgrid等表格顯示插件而言，bootstrap-table扁平化，輕量級,對於一些輕量級的數據顯示，他是綽綽有餘，而對父子表等的支援也很好，最主要的是可以與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的包，這些網上都有教程，在此不再敘述如何下載。
由上面
標籤中引用js和css檔案名稱可知我們必須引進這幾個檔案。注意bootstrap，下載編譯過的壓縮包中只有三個資料夾css ，fonts，js
1. jquery-2.2.1.js ---- 最新的jquery檔案pootm. --- 最新的bootstrap/js中bootstrap.min.js 壓縮檔案
3.bootstrap.min.css ---最新的bootstrap/css中bootstrap.min.css 壓縮檔案
片.js ---最新bootstrap-table下的js檔案
5.bootstrap-table-zh-CN.js ----最新bootstrap-table/locale下的中文初始檔案
strap-table/locale下的中文初始檔案 .css ---最新的bootstrap-table下css壓縮文件這六個必須配置，其中bootstrap-table-zh-CN.js是支持中文的js文件，只有加載了這個文件我們的一些表格顯示信息才會被設定成中文。 我們來實驗一下 將bootstrap-table-zh-CN.js去掉後的顯示效果。
/**
* 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檔案後，在載入時，便祈禱了初始化的效果。將一些顯示訊息的內容轉為對應的中內容。 <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中看一些例子
举几个例子在我们上面的代码中有这么几个 参数他们的意思是：
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" ：设置数据显示格式
这下你该明白怎么样查看了吧！
注意其中下面段代码是核心，a34de1251f0d9fe1e645927f19a896e8表示一行 b4d429308760b6c2d20d6300079ed38e一个格，data-field="name"表示一行中一个格子中的数据名 你可以把 data-field理解成id，因为后台传送过来的数据就是根据data-field的来区分，那个数据发送给谁的。
<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"
$('#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",我们来看一下他的内容
<?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函数获得点击选中行的数据。
$('#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];//返回选中行所有数据
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持PHP中文网。
更多Bootstrap Table使用方法详解相关文章请关注PHP中文网！