不同点

bootstrap-table 以下简称bt.
bt目前版本是1.14.1 支持bootstrap v4

• 引入popper.js
• detailview 作为详情使用
• subtable配合detailview作为子表一起使用。
  这是与原先最大的不同之处
• 界面更好看了，新增一些功能

子表

$('#table').bootstrapTable初始化时添加

detailView:true,
onExpandRow: function (index, row, $detail) {
            expandTable(index, row, $detail)
},

实现onexpandTable函数

function expandTable(index, row, $detail) {
        console.log(row.id)
        var sub_table = $detail.html('<table></table>').find('table');
        sub_table.bootstrapTable({
          columns: [{"field": "id", "title": "id"}, {"field": "name", "title": "应用"}, {"field": "note", "title": "备注"}],
          data: [{"id": 1, "name": "app_1", "note":  "测试—1"}, {"id": 2, "name": "app_2", "note": "测试—2"}],

        })
    };

效果

image.png

参考：

https://github.com/hugoren/bootstrap-table-examples/blob/develop/options/sub-table.html

增加铵钮功能

• formatter

 {
            field: "action",
            title: "操作",
            formatter: "operateFormatter",
            events: "operateEvents",
},

• operateFormatter函数要放在#table的bootstrap初始化之前，否则报错 Cannot convert undefined or null to object

 function operateFormatter(value, row, index) {
        return [
           '<a class="add_app" href="javascript:" title="添加"><i class="fa fa-heart">&nbsp</i></a>',
           '<a class="remove" href="javascript:" title="删除"><i class="fa fa-heart">&nbsp</i></a>',
        ].join('')
    };


    window.operateEvents = {
        'click .add_app': function (e, value, row, index) {
          alert('You click like action, row: ' + JSON.stringify(row))
        },
        'click .remove': function (e, value, row, index) {
          $table.bootstrapTable('remove', {
            field: 'id',
            values: [row.id]
          })
        }
    };
    $('#table').bootstrapTable({

参考

api
https://bootstrap-table.com/docs/api/column-options/#formatter
样例
https://github.com/hugoren/bootstrap-table-examples/blob/develop/options/format.html
解决Cannot convert undefined or null to object
https://github.com/wenzhixin/bootstrap-table/issues/4125}

bootstrap v4默认不带字icon了

虽然现在bootstrap也出了自已icon，但也只是alpha版， 跟fontawesome还差好远。

image.png

• Font Awesome
• Feather
• Octicons

解决icon不出现或只出现方框的问题

• icon不出现是因为没引入fa fa-xx的类。而这些类在第三方的css中，比如fontawsome

• 在fontawesome5.12.1版本中只出现方框，是引用的css错了。要引用all.css 和webfonts
  效果

  
  
  image.png

可使用
http://www.bootcss.com/p/font-awesome/
https://github.com/FortAwesome/Font-Awesome

image.png

亲测试，效果挺好

官方也推荐了
https://v4.bootcss.com/docs/4.0/extend/icons/

image.png

感觉没font awesome好用

table表头前添加按钮

image.png

利用toolbar自定义div

image.png

<!--自定义搜toolbar-->
        <div id="toolbar">
              <div class="form-inline" role="form">
                    <div class="form-group">
                       <button type="button" class="btn btn-success create_project">创建项目</button>
                    </div>

              </div>
   </div>

参考：
https://github.com/wenzhixin/bootstrap-table-examples/blob/develop/options/custom-toolbar.html