第一次记录Bootstrap table学习笔记(1)
第一次使用Bootstrap-table这个表格插件,记录一下使用过程中遇到的问题。
|引入CSS文件
|引入相关库
我们需要引入Jquery库、bootstrap库、以及bootstrap-table.js文件
<--putyourlocalefilesafterbootstrap-table.js-->
|启用BootstrapTable插件:
官方文档中给出了我们有两种那个方式来启用bootstrap-table插件:
1、通过data属性的方式:
ItemID ItemName ItemPrice 1 Item1 $1 2 Item2 $2
2、通过js的方式:
//只需要HTML中写下table标签,并设置id
$('#table').bootstrapTable({ columns:[{ field:'id', title:'ItemID' },{ field:'name', title:'ItemName' },{ field:'price', title:'ItemPrice' }], data:[{ id:1, name:'Item1', price:'$1' },{ id:2, name:'Item2', price:'$2' }] });
也可以通过url获取数据
$('#table').bootstrapTable({ url:'data1.json', columns:[{ field:'id',//与返回值的JSON数据的key值对应 title:'ItemID'//列名 },{ field:'name', title:'ItemName' },{ field:'price', title:'ItemPrice' },] });
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。