[bootstrap table]Bootstrap table学习心得 问题解答

更新时间:2021-07-06    来源:jquery    手机版     字体:

【www.bbyears.com--jquery】

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

|引入CSS文件

|引入相关库

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

<scriptsrc="jquery.min.js"></script> <scriptsrc="bootstrap.min.js"></script> <scriptsrc="bootstrap-table.js"></script> <-- put your locale files after bootstrap-table.js --> <scriptsrc="bootstrap-table-zh-CN.js"></script>

官方文档中给出了我们有两种那个方式来启用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"  }, ] });  

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

本文来源:http://www.bbyears.com/wangyezhizuo/128086.html

热门标签

更多>>

本类排行