首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Bootstrap Table使用方法详解

Posted in Javascript onAugust 01, 2016

bootstrap-table使用总结

bootstrap-table是在bootstrap-table的基础上写出来的，专门用于显示数据的表格插件。而bootstrap是来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，具有简便灵活，快速前端开发的优势。对与bootstrap在此就不在叙述。本文将着重讲解自己在项目中使用到bootstrap-table的一些理解和如何学习它。

       首先交代一下，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>

效果图：

Bootstrap Table使用方法详解

好接下来我们 分步骤剖析一下上面的代码的含义。

 1.首先我们需要去下载相应的 jquery bootstrap  bootstrap-table的包，这些网上都有教程，在此不再叙述如何下载。

       由上面<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使用方法详解

  当然我们还可以把显示信息设置成其他语言，只要将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 '正在努力地加载数据中，请稍候……';
 },
 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代码只有这一部分

<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中看一些例子

Bootstrap Table使用方法详解

我们如何查看 相应的参数的含义呢？ 看到上面这张图，最右边的是一些选项，可以选这可以设置的表格属性，行属性，以及可绑定的事件。

 点击表格属性 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的来区分，那个数据发送给谁的。

<thead>
 <tr>
 <th data-field="name">用户账号</th>
 <th data-field="pwd">用户密码</th>
 <th data-field="t_name">教师姓名</th>
 </tr>
</thead>

Bootstrap Table使用方法详解

 对于不想用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的效果是这样的

仅仅是没有了面板而已。

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组件如图

Bootstrap Table使用方法详解

这个镶嵌的实现办法是在在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];//返回选中行所有数据
}

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

Bootstrap Table使用方法详解

- Author -

aozeahj

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript:以前写的xmlhttp池,代码
May 18 Javascript
Jquery.LazyLoad.js修正版下载，实现图片延迟加载插件
Mar 12 Javascript
可选择和输入的下拉列表框示例
Nov 05 Javascript
Jquery实现侧边栏跟随滚动条固定（兼容IE6）
Apr 02 Javascript
javascript操作excel生成报表全攻略
May 04 Javascript
JS实现的通用表单验证插件完整实例
Aug 20 Javascript
Bootstrap源码学习笔记之bootstrap进度条
Dec 24 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
Jan 23 Javascript
vue中的模态对话框组件实现过程
May 01 Javascript
JS 实现获取验证码 倒计时功能
Oct 29 Javascript
详解mpvue中小程序自定义导航组件开发指南
Feb 11 Javascript
JS轻量级函数式编程实现XDM三
Jun 16 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
Aug 01 #Javascript
Angular 页面跳转时传参问题
Aug 01 #Javascript
AngularJS基础 ng-copy 指令实例代码
Aug 01 #Javascript
1秒50万字!js实现关键词匹配
Aug 01 #Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
Aug 01 #Javascript
JS实现数字格式千分位相互转换方法
Aug 01 #Javascript
AngularJS ng-controller 指令简单实例
Aug 01 #Javascript
神经网络(7) mysql(6) data(4) 字符集(1) 2022年7月新番(1) SSH(3) character(1) OVERLORD(1) 数据表(1) name_scope (1)
You might like
PHP中根据IP地址判断城市实现城市切换或跳转代码
2012/09/04 PHP
php数组合并与拆分实例分析
2015/06/12 PHP
PHP微信支付开发实例
2016/06/22 PHP
PHP数据库处理封装类实例
2016/12/24 PHP
php基于环形链表解决约瑟夫环问题示例
2017/11/07 PHP
PHP封装curl的调用接口及常用函数详解
2018/05/31 PHP
laravel 错误处理,接口错误返回json代码
2019/10/25 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
jquery常用技巧及常用方法列表集合
2011/04/06 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
2014/01/09 Javascript
浅析Javascript中“==”与“===”的区别
2014/12/23 Javascript
js进行表单验证实例分析
2015/02/10 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
2015/03/05 Javascript
js实现跨域的方法实例详解
2015/06/24 Javascript
JS简单测试循环运行时间的方法
2016/09/04 Javascript
canvas实现钟表效果
2017/02/13 Javascript
写jQuery插件时的注意点
2017/02/20 Javascript
10个经典的网页鼠标特效代码
2018/01/09 Javascript
深入剖析Express cookie-parser中间件实现示例
2018/02/01 Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
2018/03/15 Javascript
Python中内建函数的简单用法说明
2016/05/05 Python
python实现分页效果
2017/10/25 Python
matplotlib给子图添加图例的方法
2018/08/03 Python
python画图——实现在图上标注上具体数值的方法
2019/07/08 Python
解决python3 requests headers参数不能有中文的问题
2019/08/21 Python
python+django+rest框架配置创建方法
2019/08/31 Python
浅谈python元素如何去重,去重后如何保持原来元素的顺序不变
2020/02/28 Python
Python开发企业微信机器人每天定时发消息实例
2020/03/17 Python
html5指南-4.使用Geolocation实现定位功能
2013/01/07 HTML / CSS
毕业生个人的自我评价优秀范文
2013/10/03 职场文书
生产经理的自我评价分享
2013/11/07 职场文书
公司合作意向书范文
2014/07/30 职场文书
2014年学校办公室工作总结
2014/12/19 职场文书
繁星春水读书笔记
2015/06/30 职场文书
《猴王出世》教学反思
2016/02/23 职场文书
go语言求任意类型切片的长度操作
2021/04/26 Golang