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案例)

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

 类似资料: