Bootstrap-table使用教程

Bootstrap 专栏收录该内容
2 篇文章 0 订阅

前言

我们先从Bootstrap-table(以下简称BS-table)的基础使用开始讲起,写法来说,BS-table主要分为两种写法,一种是HTML写法,一种是JS写法。这能这里用"HTML写法"和"JS写法"不太专业准确,我就先这么描述着吧,一会代码放上来就能明白我说的什么意思了。本文也主要将这两种写法的大部分(并不敢说我什么都会)使用方法告知大家。

【版本使用】

jQuery@3.3.1

备份地址:https://gitee.com/fd214333890/jquery_3.3.1

bootstrap@4.1.1

备份地址:https://gitee.com/fd214333890/Bootstrap_4.1.1

bootstrap-table@1.12.1

备份地址:https://gitee.com/fd214333890/Bootstrap_table_1.12.1


二、使用

2.1 下载必要的插件

本文所使用的必需的插件以及版本如下表2-1

表2-1 必需的插件及版本
名称版本备注
jQuery3.3.1必须中的必需,不用我多说了吧
Bootstrap3.3.7需要依赖jQuery
Bootstrap-table1.12.1

需要依赖Bootstrap

 

如果使用bower或者npm下载Bootstrap的话,注意可能他会默认给下载Bootstrap v4版本的,因为这里使用的是Bootstrap@3.3.7,所以需要在下载的时候指定版本。如果是自己去官网下载的话,稍微注意一下别下载成了v4版本即可。

2.2 引入BS-table需要的库

一个引入BS-table的HTML文件代码如下:

<!DOCTYPE html>
<html>
  <head>
    <title>BS-table</title>
    <!-- 引入Bootstrap样式 -->
    <link rel="stylesheet" href="/bower/bootstrap/dist/css/bootstrap.min.css">
    <!-- 引入Bootstrap-table样式 -->
    <link rel="stylesheet" href="/bower/bootstrap-table/dist/bootstrap-table.min.css">
    <!-- 引入自己写的样式(可省) -->
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <!-- jQuery -->
    <script src="/bower/jquery/dist/jquery.min.js"></script>
    <!-- BS-table -->
    <script src="/bower/bootstrap-table/dist/bootstrap-table.min.js"></script>
    <!-- BS-table中文必须的js(如果不介意用英文的话这个可省略) -->
    <script src="/bower/bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>
  </body>
</html>

具体什么文件是做什么的已在代码的注释中写的比较详细了,就不一一阐述了,如有不明白的可以通过评论来问我。

此时打开页面,F12查看引入的外部文件是否加载成功,如果有问题,检查一下自己的外部文件路径是否正确。

三、通过HTML的方法来使用BS-table

 

3.1 创建一个基础的BS-table

BS-table官网中也有给出这样的例子,就不再赘述,直接看代码就能知道个大概。

<table data-toggle="table">
      <thead>
        <tr>
          <th data-field="id">学号</th>
          <th data-field="name">姓名</th>
          <th data-field="math">数学</th>
          <th data-field="chinese">语文</th>
          <th data-field="english">英语</th>
          <th data-field="biology">生物</th>
          <th data-field="physics">物理</th>
          <th data-field="chemistry">化学</th>
          <th data-field="politics">政治</th>
          <th data-field="geography">地理</th>
          <th data-field="history">历史</th>
        </tr>
      </thead>
    </table>

这是最基础的一个BS-table的代码,其中需要注意的是<thead>中每一行都有一个data-field属性(在<tbody>中是不需要的),这个属性相当于规定了这一列的id,之后BS-table获取来的数据就会根据我们给出的这个data-field进行一一对应的填表。运行一下,看看我们的BS-table样式。如下图3-1所示。

图3-1 最基础的BS-table样式

 

3.2 为BS-table添加相应的功能

3.2.1 添加一个搜索框

BS-table中已经给我们设置了搜索框功能了,我们只需要在相应设置中将其开启即可。HTML写法的话,就是在<table>标签中添加一个data-search="true"属性即可。在不写该属性时,默认的是data-search="false"。

此时,我们的table代码应如下所示。

<!-- 在这里添加了data-search属性 -->
    <table data-toggle="table" data-search="true">
      <thead>
        <tr>
          <th data-field="id">学号</th>
          <th data-field="name">姓名</th>
          <th data-field="math">数学</th>
          <th data-field="chinese">语文</th>
          <th data-field="english">英语</th>
          <th data-field="biology">生物</th>
          <th data-field="physics">物理</th>
          <th data-field="chemistry">化学</th>
          <th data-field="politics">政治</th>
          <th data-field="geography">地理</th>
          <th data-field="history">历史</th>
        </tr>
      </thead>
    </table>

此时,刷新页面,将会看到在表格右上方多出了一个搜索框。如图3-2所示。

图 3-2

注意,这里BS-table给出的搜索框仅限于对表中已有的数据进行搜索,并不具备向服务器发起请求获取数据功能(可能是我对BS-table了解的太少,没发现有这个功能)

3.2.2 搜索框相关设置

  • 搜索框位置

使用“data-search-align”属性设置搜索框的位置。目前我所知的值可以填“left”和“right”,其余值都将把搜索框设置为与table等宽(width:100%)。默认值为“right”。使用如下:

    <!-- 在这里添加了data-search属性 -->
    <!-- data-search-align设置搜索框为左上方 -->
    <table data-toggle="table" data-search="true" data-search-align="left">
      <thead>
        <tr>
          <th data-field="id">学号</th>
          <th data-field="name">姓名</th>
          <th data-field="math">数学</th>
          <th data-field="chinese">语文</th>
          <th data-field="english">英语</th>
          <th data-field="biology">生物</th>
          <th data-field="physics">物理</th>
          <th data-field="chemistry">化学</th>
          <th data-field="politics">政治</th>
          <th data-field="geography">地理</th>
          <th data-field="history">历史</th>
        </tr>
      </thead>
    </table>

 显示效果如图3-3所示。

图 3-3

这里data-search-align属性并没有“center”值,如果设置为“left”或“right”之外的值,则搜索框会变为与table等宽的样式。如图3-4。

图3-4

 

  • 搜索框按键触发 

BS-table 的搜索框默认的是当你输入内容后自动进行搜索,类似监听搜索框的onchange事件再加一个setInterval进行搜索。设置搜索框按键触发是使用data-search-on-enter-key属性,默认是data-search-on-enter-key="false",即输入内容自动进行搜索。将data-search-on-enter-key设置为true(data-search-on-enter-key="true")后,搜索框将会在你按下Enter(回车)键之后进行搜索。(这里截图也展示不了相关的效果,大家就自行尝试吧)。相关代码如下: 

<!-- 在这里添加了data-search属性 -->
    <!-- data-search-on-enter-key="true"设置搜索框需按下enter键才开始搜索操作 -->
    <table data-toggle="table" data-search="true" data-search-on-enter-key="true">
      <thead>
        <tr>
          <th data-field="id">学号</th>
          <th data-field="name">姓名</th>
          <th data-field="math">数学</th>
          <th data-field="chinese">语文</th>
          <th data-field="english">英语</th>
          <th data-field="biology">生物</th>
          <th data-field="physics">物理</th>
          <th data-field="chemistry">化学</th>
          <th data-field="politics">政治</th>
          <th data-field="geography">地理</th>
          <th data-field="history">历史</th>
        </tr>
      </thead>
    </table>

 

 

  • 精确 / 模糊搜索 

BS-table中使用data-strict-search来对精确搜索进行设置,默认的设置是data-strict-search="false",即不开启精确搜索。不开启精确搜索时,搜索将会是模糊搜索,例如表中有三个人“张三”、“李四”、“赵老五”,当我们输入“赵老”时,依然会将“赵老五”列入搜索结果中。如下图3-5所示。

图3-5 模糊搜索

 如果将data-strict-search设置为true(data-strict-search="true")则开启精确搜索。此时我们再搜索“赵老”,将不会把“赵老五”列入搜索结果中。如图3-6所示。

图3-6 精确搜索

 

 

  • 默认搜索字符串

设置搜索框默认搜索字符串使用data-search-text属性,例如我把搜索框的默认字符串设置为"赵老五"(data-search-text="赵老五"),那么当我载入BS-table后搜索框将自动填充“赵老五”,并且对该内容进行搜索,即我们可以使用该属性设置BS-table初始的搜索内容(并显示)。下图即是我们刚载入BS-table后的界面。可以看到此时BS-table已经对搜索框的内容“赵老五”进行了搜索。

图3-7 搜索框默认搜索字符串

 设置搜索框默认搜索字符串相关代码如下:

<!-- data-search-text设置搜索框默认搜索字符串为“赵老五” -->
<table data-toggle="table" data-search="true" data-search-on-enter-key="true" 
    data-search-text="赵老五"
    data-url="/data.json" >
      <thead>
        <tr>
          <th data-field="id">学号</th>
          <th data-field="name">姓名</th>
          <th data-field="math">数学</th>
          <th data-field="chinese">语文</th>
          <th data-field="english">英语</th>
          <th data-field="biology">生物</th>
          <th data-field="physics">物理</th>
          <th data-field="chemistry">化学</th>
          <th data-field="politics">政治</th>
          <th data-field="geography">地理</th>
          <th data-field="history">历史</th>
        </tr>
      </thead>
    </table>

 

  • 搜索超时

 为了防止搜索时长过长从而导致“锁表”,我们可以设置搜索超时属性,data-search-time-out属性即是设置搜索超时,默认的值为500,即超过0.5s则视为搜索超时,这里是以毫秒为单位的。(因为条件有限,这里对该属性就不进行测试了,我也没有遇到相关的情况,具体的设置还是以官方文档为主)。

3.2 给BS-table获取数据

现在表格样式大致是可以了,接下来说说表格最重要的东西了——获取数据,按照之前做HTML+jQuery的思路,<table>获取数据大致思路为以下两种:

1)直接在HTML中使用<tr><td></td></tr>写死,但是如果遇到从后端获取数据就没办法了。

2)使用ajax获取数据,然后DOM操作给<table>加上数据,最常用的方法了,异步加载数据,能从后端获取数据

这里使用BS-table你会发现在加载完BS-table后table的结构远远不止一个<table>那么简单,想用ajax强行加上去,我不敢说这么做不行(反正我是没敢这么做),但是这种方法绝对是劳民伤财的方法。

BS-table中已经有了对应的从后台获取数据的方法了,HTML写法中,添加两个属性即可:

1)data-method

2)data-url

和我们写ajax一个道理,总要有一个url和method对吧。talk is cheap,show me the code。

下面是获取后台数据的相关代码

<index.html>

<table data-toggle="table" data-search="true"
      data-method="post"
      data-url="/getData" >
      <thead>
        <tr>
          <th data-field="id" data-sortable="true">学号</th>
          <th data-field="name">姓名</th>
          <th data-field="math">数学</th>
          <th data-field="chinese">语文</th>
          <th data-field="english">英语</th>
          <th data-field="biology">生物</th>
          <th data-field="physics">物理</th>
          <th data-field="chemistry">化学</th>
          <th data-field="politics">政治</th>
          <th data-field="geography">地理</th>
          <th data-field="history">历史</th>
        </tr>
      </thead>
    </table>

上面代码,data-method="post"是使用post方法对数据进行获取(可以理解为ajax的post方法),data-url="/getData"从/getData这个路由获取数据。接下来我也把后端代码贴出来,加深对数据获取的理解。

<服务器端>

// 定义组数据(这里数据写死了,可以根据自己需要来获取数据库中的数据)
const tableData = [
    {
        "id": "1111",
        "name": "张三",
        "math": "98",
        "chinese": "10",
        "english": "80",
        "biology": "20",
        "physics": "23",
        "chemistry": "100",
        "politics": "9",
        "geography": "5",
        "history": "25"
    },
    {
        "id": "1112",
        "name": "李四",
        "math": "10",
        "chinese": "80",
        "english": "60",
        "biology": "100",
        "physics": "70",
        "chemistry": "50",
        "politics": "50",
        "geography": "33",
        "history": "25"
    },
    {
        "id": "1113",
        "name": "赵老五",
        "math": "60",
        "chinese": "60",
        "english": "60",
        "biology": "60",
        "physics": "60",
        "chemistry": "60",
        "politics": "60",
        "geography": "60",
        "history": "60"
    }
]
// 路由设置
router.post('/getData', function (req, res) {
    // 返回数据
    res.send(tableData);
})

这样就完成了从服务器获取数据的整套流程(当然,服务器端从数据库获取数据的那些代码就不用我再写了吧,和这个也没多大关系了),写服务器端代码主要是让大家了解一下数据再服务器端是以什么样的格式返回回来的(当时研究这个服务器端格式也让我掉了挺多头发了,我这里给大家省省头发)。

就这样BS-table的大致从获取数据到表格渲染数据的流程就完成了。最后结果如图3-7所示。

图  3-7 

写在最后

至此,BS-table的HTML写法大体说完了,后面我再慢慢跟新JS写法了,可能BS-table的其他样式方面的东西讲的比较少达不到各种各样的需求,我下来再充分准备准备继续更新。因为不属于官方文档,本论文肯定会有写得不谨慎的地方,还请大家多多指出,若大家有什么相关的需求可以评论留言,我会尽量满足大家的需求。

参考资料:

Bootstrap-table API中文版

  • 9
    点赞
  • 10
    评论
  • 45
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

JS组件Bootstrap Table使用方法详解 转载 2016年03月21日 15:06:09 标签: Bootstrap Table 最近客户提出需求,想将原有的管理系统,做下优化,通过手机也能很好展现,想到2个方案: a方案:保留原有的页面,新设计一套适合手机的页面,当手机访问时,进入m.zhy.com(手机页面),pc设备访问时,进入www.zhy.com(pc页面) b方案:采用bootstrap框架,替换原有页面,自动适应手机、平板、PC 设备 采用a方案,需要设计一套界面,并且要得重新写适合页面的接口,考虑到时间及成本问题,故项目采用了b方案 一、效果展示 二、BootStrap table简单介绍 bootStrap table 是一个轻量级的table插件使用AJAX获取JSON格式的数据,其分页和数据填充很方便,支持国际化 三、使用方法 1、引入js、css [js] view plain copy <!--css样式--> <link href=&quot;css/bootstrap/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;> <link href=&quot;css/bootstrap/bootstrap-table.css&quot; rel=&quot;stylesheet&quot;> <!--js--> [removed][removed] [removed][removed] [removed][removed] [removed][removed] 2、table数据填充 bootStrap table获取数据有两种方式,一是通过table 的data-url属性指定数据源,二是通过JavaScript初始化表格时指定url来获取数据 [xhtml] view plain copy ... ... [xhtml] view plain copy $('#table').bootstrapTable({ url: 'data.json' }); 第二种方式交第一种而言在处理复杂数据时更为灵活,一般使用第二种方式来进行table数据填充。 [js] view plain copy $(function () { //1.初始化Table var oTable = new TableInit(); oTable.Init(); //2.初始化Button的点击事件 /* var oButtonInit = new ButtonInit(); oButtonInit.Init(); */ }); var TableInit = function () { var oTableInit = new Object(); //初始化Table oTableInit.Init = function () { $('#tradeList').bootstrapTable({ url: '/VenderManager/TradeList', //请求后台的URL(*) method: 'post', //请求方式(*) toolbar: '#toolbar', //工具按钮用哪个容器 striped: true, //是否显示行间隔色 cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*) pagination: true, //是否显示分页(*) sortable: false, //是否启用排序 sortOrder: &quot;asc&quot;, //排序方式 queryParams: oTableInit.queryParams,//传递参数(*) sidePagination: &quot;server&quot;, //分页方式:client客户端分页,server服务端分页(*) page
©️2021 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值