自从使用bootstrap框架后,页面搭建简直又快又好。往后需要搜索什么插件的时候,都会在搜索框里多输入一个bootstrap,看有没有基于bootstrap写成的相关框架。这不,一个超级好用的表格插件就被我搜索到了。开心❤。
下面就给小伙伴们分享一下使用过程(主要是码下来方便自己以后查找【(ノへ ̄、)捂脸】)。
1.简介
顾名思义,bootstrapTable是一个基于bootstrap的表格框架,支持单选按钮、复选框、排序、分页及其他附加功能。支持多语言。
2.下载
源码地址:
https://github.com/wenzhixin/bootstrap-table/archive/master.zip
也可以通过bower:
$ bower install bootstrap-table
也可以通过npm
$ npm install bootstrap-table
同时你也可以下载对应的中文提示包。bootstrap-table-zh-CN.min.js
3.使用
引入 Bootstrap 库(假如你的项目还没有使用)和 bootstrap-table.css 到 head 标签下。
引入 jQuery 库,bootstrap 库(假如你的项目还没有使用)和 bootstrap-table.js 到 head 标签下或者在 body 标签关闭之前(一般建议这么做)。
使用data属性的方式
无需编写 JavaScript 启用 bootstrap table,我们对普通的 table 设置 data-toggle="table" 即可。
Item ID | Item Name | Item Price |
---|---|---|
1 | Item 1 | $1 |
2 | Item 2 | $2 |
我们也可以通过设置远程的 url 如 data-url="data1.json" 来加载数据。
Item IDItem NameItem Price
自己等着自己更新都等了好久😂,先发出来吧。做事不能拖延啊,拖延了就不知道当初想写什么了。