bootstrap-table插件

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的样式放在页面的标签中

JS

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

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

Starter template

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

  
    
    
    

    
    

    
  
  
    
Hello, world!

    
    
    
    
    
  

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

CSS

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

JS

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

Starter template

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

  
    
    
    
    

    
    
    
  
  
    

      

        

          
Item ID
          
Item Name
          
Item Price
        
      
      

        

          
1
          
Item 1
          
$1
        
        

          
2
          
Item 2
          
$2
        
      
    

    
    
    
    
  

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写死值

  

    

      
Item ID
      
Item Name
      
Item Price
    
  
  

    

      
1
      
Item 1
      
$1
    
    

      
2
      
Item 2
      
$2
    
  

• 在通过html中引入bootstrap-table的属性
  下面这段代码是通过data-url=“data1.json"来赋值的，data1.json可以是后台的一个requestMapping,也可以直接是static下的静态json格式文件，内容要符合"[{'name':'abc','age':'18'},{'name':'abc','age':'17'}]"这中格式

  

    

      
Item ID
      
Item Name
      
Item Price
    
  

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

  

    

      
Item ID
      
Item Name
      
Item Price
    
  

2.Via JavaScript（通过JS赋值）

html中表的代码:

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 [案例]

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

  

    

      
ID
      
Item Name
      
Item Price
    
  

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

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