Bootstrap table学习心得 问题解答

第一次使用Bootstrap-table这个表格插件，记录一下使用过程中遇到的问题。

|引入CSS文件

css">

|引入相关库

我们需要引入Jquery库、bootstrap库、以及bootstrap-table.js文件

<-- put your locale files after bootstrap-table.js -->

|启用Bootstrap Table插件：

官方文档中给出了我们有两种那个方式来启用bootstrap-table插件：

1、通过data属性的方式：

  Item ID

  Item Name

  Item Price

  1

  Item 1

  $1

  2

  Item 2

  $2

2、通过js的方式：

//只需要HTML中写下table标签，并设置id

$('#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获取数据

$('#table').bootstrapTable({

 url:'data1.json',

 columns: [{

 field:'id',    //与返回值的JSON数据的key值对应

 title:'Item ID'  //列名

 }, {

 field:'name',

 title:'Item Name'

 }, {

 field:'price',

 title:'Item Price'

 }, ]

});

以上就是本文的全部内容，希望对大家的学习有所帮助