Bootstrap Table使用方法详解

2024-10-06 17:31:02

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>

效果图：

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

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

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

点击表格属性 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>

对于不想用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];//返回选中行所有数据
}

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

Bootstrap学习教程

Bootstrap实战教程

Bootstrap Table使用教程

Bootstrap插件使用教程

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

BootStrap 可编辑表Table格

一. 显示数据(基础功能) 在html页面中定义表格以及表格的列名,最后把从数据库中查询出来的数据,循环显示到页面中.这个系统用的是PHP语言,里边用到了PHP中的语法,如果是Java语言,把php换成jsp中对应的语法就行 <div class="containe"> <table class="table table-striped table-bordered table-hover"> <thead> <tr cla
bootstrap Table的一些小操作

本文实例为大家分享了bootstrap Table的操作代码,供大家参考,具体内容如下 function HQCreatTable(ob) { var option = { cache: false,//是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*) scrollX: true, scrollY:true, striped: true, //使表格带有条纹 //是否显示行间隔色 sidePagination: "client",//分页方式:client客户端分
Bootstrap嵌入jqGrid，使你的table牛逼起来

Bootstrap原生的table组件只能满足简单的数据展示,满足不了更富有操作性的要求.当然了,你可以找到一款叫做"DataTables-1.10.11"的基于bootstrap的table组件,但如果你对API看得不甚了解的话,用起来可就痛苦了,但是如果你选择使用jqGrid,那么本篇教程就给你带来了解决这种富操作性table的解决方案. 一.效果展示 OK,就展示这一张图片,相信你已经爱上了bootstrap版的jqGrid,和bootstrap很兼容,简直完美,当然了,这需要我
bootstrap table 服务器端分页例子分享

1,前台引入所需的js 可以从官网上下载复制代码代码如下: function getTab(){ var url = contextPath+'/fundRetreatVoucher/fundBatchRetreatVoucherQuery.htm'; $('#tab').bootstrapTable({ method: 'get', //这里要设置为get,不知道为什么设置post获取不了 url: url, cache: false, height: 400, striped: tru
JS表格组件神器bootstrap table详解（基础版）

一.Bootstrap Table的引入关于Bootstrap Table的引入,一般来说还是两种方法: 1.直接下载源码,添加到项目里面来. 由于Bootstrap Table是Bootstrap的一个组件,所以它是依赖Bootstrap的,我们首先需要添加Bootstrap的引用. 2.使用我们神奇的Nuget 打开Nuget,搜索这两个包 Bootstrap已经是最新的3.3.5了,我们直接安装即可. 而Bootstrap Table的版本竟然是0.4,这也太坑爹了.所以博主建议Boot
Bootstrap table分页问题汇总

首先非常感谢作者针对bootstrap table分页问题进行详细的整理,并分享给了大家,希望通过这篇文章可以帮助大家解决Bootstrap table分页的各种问题,谢谢大家的阅读. 问题1 :服务器端取不到form值,querystring没有问题, 但是request.form取不到值解决:这是ajax的问题,原代码使用原生的ajax. 1可以用读流文件解决.2 如果想用request.form 方式,设置 contentType: "application/x-www-form-
JS组件Bootstrap Table使用方法详解

最近客户提出需求,想将原有的管理系统,做下优化,通过手机也能很好展现,想到2个方案: a方案:保留原有的页面,新设计一套适合手机的页面,当手机访问时,进入m.zhy.com(手机页面),pc设备访问时,进入www.zhy.com(pc页面) b方案:采用bootstrap框架,替换原有页面,自动适应手机.平板.PC 设备采用a方案,需要设计一套界面,并且要得重新写适合页面的接口,考虑到时间及成本问题,故项目采用了b方案一.效果展示二.BootStrap table简单介绍 bootStra
BootStrap table表格插件自适应固定表头(超好用)

首先是简单的页面形式,大家可以按照平常画表格的方式来创建html表格,然后通过js控制特殊的样式等操作(优点是表格更加直观,方便调整表格样式等,速度快) 当然,也可以只在页面上放一个table标签,之后的所有数据和样式都通过js控制也是可以的,后面会说(优点方便控制修改数据,尤其是ajax方式获取的json格式,但是调整样式比较麻烦) ps:这个是插件的官网,里面有英文api和例子:http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 还有,使用前请引入b
Bootstrap Table的使用总结

Jquery中的一些东西学习一下子,补充完善一下,毕竟有些时候没有使用到这个方式很有用,在使用bootstrap table的时候,选择当前已经选择的节点的事件中的ID的值当前rows中有很多的数据,但是我只需要id这一个值,这个时候进行操作就非常的简单了. $.map(data,function(item,index){return XXX}) 使用的总结: 把一个数组,按照新的方式进行组装返回,和原来的数组不一样. 遍历data数组中的每个元素,并按照return中的计算方式形成一个新的
第一次动手实现bootstrap table分页效果

先上图吧,这就是bootstrap table分页效果图上代码(这一部分是工具栏的,还包括slider滑动条) <div class="box-body"> <div class="row"> <div class="form-group col-xs-3" style="width: 432px;"> <label for="SendUser" class=&q

Bootstrap Table使用方法详解

相关推荐

随机推荐