bootstrap-table插件

其他 2019-06-16 12:09:23 阅读次数: 0
版权声明：terryR https://blog.csdn.net/weixin_44474742/article/details/90738643

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/[email protected]/dist/bootstrap-table.min.css">
JS

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

<script src="https://unpkg.com/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/dist/bootstrap-table.min.css" rel="stylesheet">

<script src="https://unpkg.com/[email protected]/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案例）

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

猜你喜欢

转载自blog.csdn.net/weixin_44474742/article/details/90738643
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022