登录
当前位置： 首页 > 工具软件 > Bootstrap Data Table > 使用案例 >

bootstrap-table插件

鱼志学
2023-12-01

Overview（bootstrap-table概述）

官网网址:https://bootstrap-table.com/

Bootstrap表的设计目的是减少开发时间，并且不需要开发人员提供特定的知识。它重量轻，功能丰富
且与一些最广泛使用的CSS框架集成。(支持Bootstrap，语义UI, Bulma, Material Design, Foundation)

Quick start(快速引入插件)

bootstrap-table需要bootstrapV4版本的支持所以html必须要先引入bootstrapV4相关内容

引入bootstrapV4(下面是通过CDN的方式引入的，也可以通过本地下载好引入本地的JS和CSS)

CSS

把下面这段css的样式放在页面的<head></head>标签中

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
JS

把下面这段JS的样式放在页面的</body>标签之后，由于Bootstrap依赖了 jQuery, Popper.js所以需要先引入这两个的JS

注:jquery-3.3.1.slim.min.js这个好像没有$.ajax的函数所以需要换成jquery.min.js

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
Starter template

引入CSS和JS后页面该有的格式:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

引入bootstrap-table(下面是通过CDN的方式引入的，也可以通过本地下载好引入本地的JS和CSS)

CSS

把下面这段css的样式放在页面的<head></head>标签中且要先引入BootstrapV4的样式

<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.14.2/dist/bootstrap-table.min.css">
JS

把下面这段JS的样式放在页面的</body>标签之后且要先引入BootstrapV4的JS

<script src="https://unpkg.com/bootstrap-table@1.14.2/dist/bootstrap-table.min.js"></script>
Starter template

由于Bootstrap v4使用了字体Awesome作为默认图标，因此需要导入字体Awesome链接
下面就是引入bootstrap-table应该要有的格式:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Hello, Bootstrap Table!</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.14.2/dist/bootstrap-table.min.css">
  </head>
  <body>
    <table data-toggle="table">
      <thead>
        <tr>
          <th>Item ID</th>
          <th>Item Name</th>
          <th>Item Price</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Item 1</td>
          <td>$1</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Item 2</td>
          <td>$2</td>
        </tr>
      </tbody>
    </table>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/bootstrap-table@1.14.2/dist/bootstrap-table.min.js"></script>
  </body>
</html>

Download Source code(如何下载源代码)

Source code

源码下载地址
通过上面的下载地址可以下载bootstrap-table的源码

Contents

Precompiled Bootstrap Table(预编译的内容格式)
bootstrap-table/
└── dist/
    ├── extensions/
    ├── locale/
    ├── bootstrap-table-locale-all.js
    ├── bootstrap-table-locale-all.min.js
    ├── bootstrap-table.css
    ├── bootstrap-table.min.css
    ├── bootstrap-table.js
    └── bootstrap-table.min.js

dist/文件夹包含用src/编译和缩小的所有内容。为了便于使用，我们还将所有locale文件编译为一个文件bootstrap-table-local -all.js

Source Code(源码的内容格式)
bootstrap-table/
├── site/
└── src/
    ├── extensions/
    ├── locale/
    ├── bootstrap-table.css
    └── bootstrap-table.js

src/、locale/和extensions/是我们的CSS、JS的源代码。站点/文件夹包含文档的源代码。除此之外，任何其他包含的文件都提供了对包、许可证信息和开发的支持

Usage(表中数据的几种赋值方式)

1.Via data attributes(不使用JS赋值)

  • 直接在通过html写死值
<table data-toggle="table">
  <thead>
    <tr>
      <th>Item ID</th>
      <th>Item Name</th>
      <th>Item Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Item 1</td>
      <td>$1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Item 2</td>
      <td>$2</td>
    </tr>
  </tbody>
</table>
  • 在通过html中引入bootstrap-table的属性
    下面这段代码是通过data-url=“data1.json"来赋值的，data1.json可以是后台的一个requestMapping,也可以直接是static下的静态json格式文件，内容要符合"[{'name':'abc','age':'18'},{'name':'abc','age':'17'}]"这中格式
<table
  data-toggle="table"
  data-url="data1.json">
  <thead>
    <tr>
      <th data-field="id">Item ID</th>
      <th data-field="name">Item Name</th>
      <th data-field="price">Item Price</th>
    </tr>
  </thead>
</table>

你也可以通过设置属性pagination, search, sorting来控制表格是否需要分页，搜索，排序等功能,其他功能属性可以阅读API:

<table
  data-toggle="table"
  data-url="data1.json"
  data-pagination="true"
  data-search="true">
  <thead>
    <tr>
      <th data-sortable="true" data-field="id">Item ID</th>
      <th data-field="name">Item Name</th>
      <th data-field="price">Item Price</th>
    </tr>
  </thead>
</table>

2.Via JavaScript（通过JS赋值）

html中表的代码:

<table id="table"></table>

JS控制代码:

$('#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'
  }]
})

也可以通过url, pagination, search, sorting 来通过不同方式赋值和控制是否需要分页，搜索，排序等功能:

$('#table').bootstrapTable({
  url: 'data1.json',
  pagination: true,
  search: true,
  columns: [{
    field: 'id',
    title: 'Item ID'
  }, {
    field: 'name',
    title: 'Item Name'
  }, {
    field: 'price',
    title: 'Item Price'
  }]
})

API

相关API地址

Table Options

下面是height属性的描述,其他属性和这是一样的套路:

height
Attribute: data-height

Type: Number

Detail:

The height of table, enable fixed header of table.

Default: undefined

Example: Table Height
height [属性名称]
  • Attribute: data-height [在代码中引入的名称]
  • Type: Number [这个属性值的类型]
  • Detail: [这个属性具体的作用描述]
    The height of table, enable fixed header of table.
  • Default: undefined [默认的值]
  • Example: Table Height [案例]

这个属性在代码中的引入:

<link href="https://unpkg.com/bootstrap-table@1.14.2/dist/bootstrap-table.min.css" rel="stylesheet">

<script src="https://unpkg.com/bootstrap-table@1.14.2/dist/bootstrap-table.min.js"></script>

<table
  id="table"
  data-toggle="table"
  data-height="460"
  data-url="json/data1.json">
  <thead>
    <tr>
      <th data-field="id">ID</th>
      <th data-field="name">Item Name</th>
      <th data-field="price">Item Price</th>
    </tr>
  </thead>
</table>

Column Options

title属性的描述:

title
Attribute: data-title
Type: String
Detail:
	The column title text.
Default: undefined
title [属性名称]
  • Attribute: data-title [在代码中引入的名称]
  • Type: String [这个属性值的类型]
  • Detail:[这个属性具体的作用描述]
    The column title text.
  • Default: undefined [默认的值]

这个属性在代码中的引入:

$('#table').bootstrapTable({
  url: 'data1.json',
  pagination: true,
  search: true,
  columns: [{
    field: 'id',
    title: 'Item ID'
  }, {
    field: 'name',
    title: 'Item Name'
  }, {
    field: 'price',
    title: 'Item Price'
  }]
})

Events

事件的描述:
onCheck
jQuery Event: check.bs.table
Parameter: row, $element
Detail:
Fires when user check a row, the parameters contain:
	row: the record corresponding to the clicked row.
	$element: the DOM element checked.
onCheck [事件的名称]
  • jQuery Event: check.bs.table [jquery中使用的名称]
  • Parameter: row, $element [事件参数]
  • Detail: [参数和作用的具体描述]
    Fires when user check a row, the parameters contain:
    • row: the record corresponding to the clicked row.
    • $element: the DOM element checked.
事件的使用有两种方式

1.通过使用事件的名称:
$(’#table’).bootstrapTable({
onEventName: function (arg1, arg2, …) {
// …
}
})
eg：

$('#table').bootstrapTable({
	  onCheck : function (arg1, arg2, ...) {
	    // ...
	  }
	})

2.通过使用jquery中使用的名称:
$(’#table’).on(‘event-name.bs.table’, function (e, arg1, arg2, …) {
// …
})
eg：

$('#table').on('check.bs.table', function (e, arg1, arg2, ...) {
	  // ...
	})

Methods

方法的使用方式:$('#table').bootstrapTable('method', parameter)
eg：

getAllSelections
Parameter: undefined
Detail:
	Return all selected rows contain search or filter, when no record selected, an empty array will return.
getAllSelections [方法名称]
  • Parameter: undefined [参数]
  • Detail:[这个方法的具体描述，返回值等等]
    Return all selected rows contain search or filter, when no record selected, an empty array will return.

引用getAllSelections 这个方式是没有参数的，返回一个数组:

var array = `$('#table').bootstrapTable('getAllSelections')`

Extensions(bootstrap-table扩张)

具体描述地址

Examples（bootstrap-table案例）

其实很多功能在这个案例里面都可以找到的
具体描述地址

 类似资料：

相关阅读

SpringMVC+bootstrap table实例详解Bootstrap Table的使用总结JS组件Bootstrap Table布局详解Bootstrap table分页问题汇总BootStrap table使用方法分析

相关文章

SQL ALTER TABLESQL DROP TABLESQL CREATE TABLEAngularJS BootstrapBootstrap Wells

相关问答

HBase.Meta。Table-ReadRequestsCount太高雪花-TABLE命令PostgreSQL 中的 Table lock什么是bootstrap？找不到table Java Glassfish

相关文档

BootStrap 前端UI库Bootstrap 入门教程Bootstrap 3 中文文档教程WordPress 插件开发Babel 插件手册
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.