一聚教程网:一个值得你收藏的教程网站

热门教程

Bootstrap table学习心得 问题解答

时间:2022-06-29 01:32:46 编辑:袖梨 来源:一聚教程网

第一次使用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'

 }, ]

});

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

热门栏目