【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>word-wrap: break-word; margin: 5px 0px; color: rgb(0, 0, 0); font-family: "sans serif", tahoma, verdana, helvetica; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;">|启用Bootstrap Table插件:
官方文档中给出了我们有两种那个方式来启用bootstrap-table插件:
1、通过data属性的方式:
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" }, ] });以上就是本文的全部内容,希望对大家的学习有所帮助