2022-12-11_bootstrap-table详细使用说明

2022-12-11 本文已影响0人微笑碧落

前言

网上关于bootstrap-table的资料很多，但是零零散散的没有整理，有个别已经有点不适合新版本。
所以我整出了这个bootstrap-table详细使用说明，力争一篇文章覆盖基本常用的bootstrap-table知识点。
bootstrap-table是一款前端表格工具，可以很简单的展示一个表格

1.安装

使用npm下载bootstrap,bootstrap-table,bootstrap-icons这几个包。然后把下载的包的dist文件夹复制到项目里面。
也可以用CDN的方式引用，就是CDN源不好找。
然后如下引用。注意，必须全部引用。否则个别功能不正常。

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" >
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.21.1/dist/bootstrap-table.min.css">

    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.21.1/dist/bootstrap-table.min.js"></script>

2.使用

可以用html方法也可以用js方法，用js方法比较灵活。

2.1 js方法

Call a bootstrap table with id table via JavaScript.
We can also use remote URL data by setting url: 'data1.json'.
You can also add pagination, search, and sorting to a table like the following table.
在html里面定义一个table的dom。
在js里面通过bootstrapTable引用这个table
可以在传递给bootstrapTable方法的的对象参数中增加各种属性。各种参数详细见后文。
可以自动访问服务器获取数据。不需要自己写ajax代码。只需要指定一个url参数即可。

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

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

3. 列定义`columns`

align:Indicate how to align the column data. 'left', 'right', 'center' can be used.
title:The column title text.
titleTooltip:The column title tooltip text. This option also supports the title HTML attribute.
sortable:Set true to allow the column can be sorted.
field:The column field name. This field must be unique, or some unknown problems may occur.

columns: [{
            field: 'id',
            title: 'Item ID',
            align: 'left',
            sortable: true,
            titleTooltip: "this is name"
            checkbox: true,
            width: 20,//宽度
            align: "center",//水平
            valign: "middle"//垂直
        }, {
            field: 'name',
            title: 'Item Name'
        }]

3.1列数据自定义formatter

可以对列数据进行格式化处理。比如增加图形等。在数据显示前处理。
甚至可以增加一个新列
可以通过这个方法，增加一些操作按钮

columns: [{
  field: 'info',
  title: '信息',
  formatter:function (value,row,index,field) {
  return row.id + row.name + row.age;
}]

image.png

3.2 表格底部自定义`footerFormatter`

注意，这个是添加在columns的每个栏目的。很容易理解，不同栏目的汇总方法不一样，需要自己书写代码。
注意必须打开showFooter: true。
The function, takes two parameters:
data: Array of all the data rows.
value: If footer data is set, the value of the footer column.
The function should return a string with the text to show in the footer cell.
If you fetch data from a server and set the footer value from the server response, please use the footerField Option.

{
  field: 'name',
  title: 'Item Name',
  footerFormatter:function (data,value) {
     return data.length;
 }

如下展示了如何获得该列的field。

function stockNumFormatter(data) {
    var total = 0;
    var field = this.field;
    for (var i = 0; i < data.length; i++) {
        total = total + parseInt(data[i][field]);
    }
    return "总计：" + total
}

4.数据`data`

用来提供静态数据
数据格式必须正确，否则不能正常显示
类型是一个数组

data: [{
            id: 1,
            name: 'Item 1',
            price: '$1'
        }, {
            id: 2,
            name: 'Item 2',
            price: '$2'
        }]

5.服务端分页

所谓服务端分页，就是服务器分批次返回数据，可以节约数据传输量。
很容易理解，前端必须告诉服务器所需要的数据范围。后端根据前端的需求返回数据。
具体流程是:
前端请求服务器第一页数据（offset=0,limit=pageSize)
后端必须返回total，表示有多少数据。如下
注意如下格式，不能少了双引号必须是"total"和"cows"

{
"total":200,
"rows":[
  {"id":1, "name":"sallency", "age": 26},
  {"id":2, "name":"sallency", "age": 26},
  {"id":3, "name":"sallency", "age": 26},
  {"id":4, "name":"sallency", "age": 26},
  {"id":5, "name":"sallency", "age": 26}]
}

前端根据总数据和每页显示的数据量，自动生成页码。用户点击页码，前端根据用户点击的页码，向服务器发送请求。收到回复后，把数据展示出来。
很容易得到如下结论，虽说指定了pageSize，但是服务器如果返回的不是5个条目，前端也照旧全部显示。

5.1前端

如果是post请求，必须contentType: "application/x-www-form-urlencoded"。否则服务器端无法收到offset和limit。

{
  dataField:'rows'//后端返回的数据的键值，默认是rows
  pageNumber: 1//默认显示的页面，默认值是1
  url:'dms/PSSVEZ',
  method:'get',
  dataType: "json",
  contentType: 'application/json,charset=utf-8',
  pageSize: 5,
  pagination: true,//是否分页
  pageList: [5, 10, 20, 50],//分页步进值
  sidePagination: "server",//服务端分页
}

5.2 后端

服务器端主要是根据limit和offset来返回数据。
当然，也可以忽略。

public String PSSVEZ(Integer limit, Integer offset, String searchText) {}

5.3 传递给后端的查询参数

queryParamsType: If queryParamsType = 'limit', the params object contains: limit, offset, search, sort, order.
Else, it contains: pageSize, pageNumber, searchText, sortName, sortOrder默认是limit
queryParams:自定义传递给后端的查询参数

 queryParams: function getParams(params) {
                //params obj
                params.other = "otherInfo";
                return params;
            },

6. 客户端分页

客户端分页就是服务器把所有数据一次发给客户端，由客户端来进行分页等操作。
客户端仅仅请求一次数据，且请求不会带有limit和offset等参数。
服务端回复的格式和服务端分页一样，但是此时客户端会忽略total。前端会根据数据自己计算数据总数。
客户端分页的时候，服务器还有一种简单的相应方式，就是返回一个包含数据对象的数组。如下：
但是，这种简单的书写方式，有部分插件不支持。。会导致无法加载数据。。这也是网上好多人使用插件的时候无法加载的原因

[{},{},{},]

因为不传递参数。所以contentType可以随便设置。
如果服务端响应分页是同一个方法，可以通过判断limit和offset是否有值来判断客户端的分页类型。如果limit值是null，就是客户端分页。

{
  url:'dms/PSSVEZ',
  method:'get',
  dataType: "json",//期待返回的数据格式
  contentType: 'application/json,charset=utf-8',//请求类型
  pageSize: 5,
  pagination: true,//是否分页
  pageList: [5, 10, 20, 50],//分页步进值
}

7.详细页`detail`

必须指定detailFormatter函数，否则弹出的是空的。
效果如下。点击+号即可显示详细页面
TODO 弹窗显示。。

image.png

{
  detailView: true,
  detailFormatter:function (index, row) {
      var html = []
      $.each(row, function (key, value) {
          html.push('<p><b>' + key + ':</b> ' + value + '</p>')
      })
      return html.join('')
  }
}

8. 列选择相关参数

showColumns:Set true to show the columns drop down list. We can set the switchable column option to false to hide the columns item in the drop down list.显示列选择下拉菜单。
showColumnsSearch：Set true to show a search for the column’s filter。在列选择下拉菜单中增加列搜索框。
showColumnsToggleAll:增加一个选择全部列的选择框。
image.png

9. 搜索相关参数

search:增加一个搜索输入框
searchOnEnterKey:回车搜索
showSearchButton:在搜索框后面显示搜索按钮，点击可以开始搜索
showSearchClearButton:在搜索框后面增加一个清空搜索文字按钮
showExtendedPagination:在分页后面增加一个搜索结果的总数提醒。
searchText:默认搜索文字
strictSearch:严格方式搜索
searchAlign:"left"//查询框对齐方式.默认是右边
image.png
image.png

10. 按钮相关参数

showButtonIcons:显示按钮图标
showButtonText:显示按钮文字
showToggle:true显示详细页、表格显示切换按钮
showRefresh:true显示刷新按钮
buttonsAlign: "left",//按钮对齐方式，默认是右边
image.png

11. 事件

bootstrap-table支持很多事件，事件有2种注册方法，一种是在jQuery，一种是在bootstrapTable方法的的对象参数中注册。
大部分事件都大同小异，注意如下例子的row.id，可以访问该row对应的数据

//row: the record corresponding to the clicked row.
//$element: the tr element.
//field: the field name corresponding to the clicked cell.
{
        onClickRow: function(row, $element,field) {
            //$element是当前tr的jquery对象
            $element.css("background-color", "green");
            alert(row.id);
        },//单击row事件

        onCheck: function (row,$element) {
            $element.css("background-color", "green");
            alert(row.id);
        }
}

12.表格外观自定义

classes:控制表格的显示外观'table', 'table-bordered', 'table-hover', 'table-striped', 'table-dark', 'table-sm' 以及'table-borderless'这些参数可选
默认是值'table table-bordered table-hover'
注意table这个class不能去掉，否则显示很奇怪。
table-striped用来增加奇偶行不同颜色

13. 单选或多选框

checkbox:Set true to show a checkbox. The checkbox column has a fixed width.
If a value is given, the checkbox is automatically checked. Its also possible to check/uncheck the checkbox by using a formatter (return true to check, return false to uncheck).通常单独开一个，用来提供checkbox。
这里的参数是在columns里面的。因为情况特殊，单独拿出来
idField：Indicate which field will be used as checkbox/radiobox value

{
  idField:'id',//id列给checkbox的值
  columns: [{checkbox: true}] //增加一个checkbox列
}

14. 中文支持或界面文字自定义

14.1 中文支持（使用官方语言包）

{
  locale:'zh-CN',
}

使用前必须手动引入如下语言包

<script src="bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

image.png

14.2界面文字自定义

不得不说，官方的翻译真差。
自定义提示文字，可以修改导入的js文件。也可以如下：

$('#table').bootstrapTable({ 
 //加载数据时提示
formatLoadingMessage:function()
{
return "数据加载中...";
},
//每页显示
formatRecordsPerPage:function(pageNumber)
{
     return pageNumber+'行每页';
  },
//页码
  formatShowingRows:function(pageFrom, pageTo, totalRows)
          {
            return "第"+pageFrom+"-"+pageTo+"行，总共"+totalRows+"";
   },
 
formatSRPaginationPreText :function(){
return '上一页';
},
 
formatSRPaginationPageText:function(page){
return '跳转至'+page;
},
 formatSRPaginationNextText:function(){
return '下一页';
},
 
 formatDetailPagination:function(totalRows)
 {
 return "总计："+totalRows;
 }
,
formatSearch:function()
{
return  "搜索";
}
,
formatClearSearch:function()
{
return  "清除搜索";
}
 ,
formatNoMatches:function()
{
return  "未查询到相关记录";
} ,
  formatPaginationSwitch:function()
  {
  return "隐藏显示分页";
  }
,
formatPaginationSwitchDown:function()
  {
  return "显示分页";
  },
formatPaginationSwitchUp:function()
  {
  return "隐藏分页";
  } ,
formatRefresh:function()
  {
  return "刷新";
  }  ,
formatToggle:function()
  {
  return "展开";
  }  ,
formatToggleOn:function()
  {
  return "显示卡片视图";
  } ,  
  formatToggleOff :function()
  {
  return "隐藏卡片视图";
  },
formatColumns:function(){
return "列视图";
}
,
formatColumnsToggleAll:function()
{
return 'Toggle all';
}
 ,
formatFullscreen:function()
{
return '全屏';
} ,
formatAllRows function()
{
return '全部';
}
 
});

15. 常用插件

15.1 Table Resizable

允许用户在ui上修改表格的列的宽度。
注意必须引用jquery-reiszable-columns包
使用

<link rel="stylesheet" href="jquery-reiszable-columns/jquery.resizableColumns.css">
<script src="jquery-reiszable-columns/jquery.resizableColumns.min.js"></script>
<script src="bootstrap-table/extensions/resizable/bootstrap-table-resizable.js"></script>

选项

resizable:true //Set true to allow the resize in each column.

15.2 Sticky Header

固定表头，滚动页面的时候，始终显示表头
注意，需要指定offset。
使用

<link rel="stylesheet" href="extensions/sticky-header/bootstrap-table-sticky-header.css">
<script src="extensions/sticky-header/bootstrap-table-sticky-header.js"></script>

选项

stickyHeader: true //Set true to use sticky header.
stickyHeaderOffsetLeft:50//Set the left offset of the sticky header container. If the body padding left is 60px, this value would be 60
stickyHeaderOffsetRight
stickyHeaderOffsetY

15.3 Toolbar

事实上是高级搜索，扩展搜索框的功能，允许针对单独的列进行搜索
会弹出一个搜索框。

image.png
使用

<script src="extensions/toolbar/bootstrap-table-toolbar.js"></script>

选项

advancedSearch:true,
idTable:'table',//必须指定
formatAdvancedSearch:function () {
  return '高级搜索'; //自定义按钮名称
},

15.4 Print

增加打印功能。
使用

<script src="extensions/print/bootstrap-table-print.js"></script>

选项

showPrint:true,//显示打印按钮
printSortColumn://排序行的名称
printSortOrder//Valid values: ‘asc’, ‘desc’. Relevant only if printSortColumn is set

15.5 Page Jump To

增加跳转至第几页的功能

image.png
使用

<link rel="stylesheet" href="extensions/page-jump-to/bootstrap-table-jump-to.css"></style>
<script src="extensions/page-jump-to/bootstrap-table-jump-to.js"></script>

选项

showJumpTo:true //显示跳转框
showJumpToByPages:5//当页面超过20页才显示跳转框

15.6 Export

增加导出功能
需要引入tableExport.jquery.plugin插件
当同时使用官方的Filter Control插件的时候，会有一个小bug。导出的列名会包含所有选项。
使用

<script src="tableExport.jquery.plugin-master/tableExport.min.js"></script>
<script src="extensions/export/bootstrap-table-export.js"></script>

选项

showExport:true//显示导出按钮
exportDataType//Export data type, support: 'basic', 'all', 'selected'.
exportFooter:true//是否导出表脚
exportOptions//导出选项。主要是定义文件名
exportOptions: {
    fileName: function () {
       return 'exportName'
    }
 }
exportTypes:Export types, support types: ['json', 'xml', 'png', 'csv', 'txt', 'sql', 'doc', 'excel', 'xlsx', 'pdf'].

15.7 Westsyan/bootstrap-advanced-sortable

这是一款第三方插件。
比官方的筛选工具功能更强，支持复选，还可以在表头上显示筛选条件。
注意：如果是用客户端分页的方式，服务器也必须返回{"total":200, "rows":[{},{},{}]}这种格式的数据。否则会解析不到数据。
如果是服务端分页，筛选是在服务器这边，本地不会做任何筛选。
不足的地方：复选框、单选框必须人为事先给定选项，没办法直接根据数据来自动提取数据。多列筛选的时候，无法根据前一个筛选结果进一步缩短复选框的选项。
有一个小bug：原本的分页页码跳转会被拉伸成这个样子。
还有一个小bug：按钮bar被强制靠左了。
这款插件支持num，text，radio，checkbox，date等方式，但是，这些方式必须和数据的类型对应。。比如数据源的某一个字段类型是num，就不能用text的方式，必须用num的方式。否则全部筛选都不起作用。

image.png

使用

<script src="select2/js/select2.js"></script>
<script src="bootstrap-advanced-sortable/js/bootstrap-advanced-sortable-en.js"></script>
<link rel="stylesheet" href="select2/css/select2.css">
<link rel="stylesheet" href="bootstrap-advanced-sortable/css/bootstrap-advanced-sortable.css">

选项

$('#table').bootstrapTable({
   advancedSortable:true, //打开高级筛选
    columns:[{
        field:"testText",
        title:"TestText",
        sortable:"true",//必须打开这个开关，否则无法弹出筛选对话框
        searchType:"text"
    },{
        field:"testRadio",
        title:"TestRadio",
        sortable:"true",
        searchType:"radio",
        searchSelect:["test1","test2","test3"]
    }]
});

参考文章

AJAX POST请求中参数以form data和request payload形式在servlet中的获取方式

Bootstrap table 服务器端分页示例

bootstrap-table官方文档

bootstrap table轻松实现数据表格

bootstrap table中文设置

表格组件神器：bootstrap table详细使用指南

设置bootstrap table footerStyle表格底部样式
8.Westsyan/bootstrap-advanced-sortable

2022-12-11_bootstrap-table详细使用说明

前言

1.安装

2.使用

2.1 js方法

3. 列定义`columns`

3.1列数据自定义formatter

3.2 表格底部自定义`footerFormatter`

4.数据`data`

5.服务端分页

5.1前端

5.2 后端

5.3 传递给后端的查询参数

6. 客户端分页

7.详细页`detail`

8. 列选择相关参数

9. 搜索相关参数

10. 按钮相关参数

11. 事件

12.表格外观自定义

13. 单选或多选框

14. 中文支持或界面文字自定义

14.1 中文支持（使用官方语言包）

14.2界面文字自定义

15. 常用插件

15.1 Table Resizable

15.2 Sticky Header

15.3 Toolbar

15.4 Print

15.5 Page Jump To

15.6 Export

15.7 Westsyan/bootstrap-advanced-sortable

参考文章

猜你喜欢

热点阅读

2022-12-11_bootstrap-table详细使用说明

前言

1.安装

2.使用

2.1 js方法

3. 列定义columns

3.1列数据自定义formatter

3.2 表格底部自定义footerFormatter

4.数据data

5.服务端分页

5.1前端

5.2 后端

5.3 传递给后端的查询参数

6. 客户端分页

7.详细页detail

8. 列选择相关参数

9. 搜索相关参数

10. 按钮相关参数

11. 事件

12.表格外观自定义

13. 单选或多选框

14. 中文支持或界面文字自定义

14.1 中文支持（使用官方语言包）

14.2界面文字自定义

15. 常用插件

15.1 Table Resizable

15.2 Sticky Header

15.3 Toolbar

15.4 Print

15.5 Page Jump To

15.6 Export

15.7 Westsyan/bootstrap-advanced-sortable

参考文章

猜你喜欢

热点阅读

3. 列定义`columns`

3.2 表格底部自定义`footerFormatter`

4.数据`data`

7.详细页`detail`