bootstraptable下载与使用_Bootstrap Table使用教程（请求json数据渲染表格）

Tips：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1

90后前端妹子

今天来写一个关于Bootstrap Table使用教程(请求json数据渲染表格)，json数据来源于后端小伙伴的接口，我放在本地进行模拟了

涉及到的知识点
1：Bootstrap Table使用教程，基本请求，将请求过来的数据进行分页，每页5条内容，也可以选择每页15条，20条或者更多。

2：定义删除按钮功能、获得要删除的数据，声明一个数组，通过获得别选中的来进行遍历，cid为获得到的整条数据中的一列，前端删除就没写了，直接后端删除，删除掉数据库内容，在执行刷新表格即可删除。

3：编辑按钮，编辑按钮的时候会弹出form表单，节省篇幅，留一个编辑按钮的点击事件，可自行测试。

4：表格的内容过长的时候，整个表格会变得不那么美观，有些内容会占据两行，但是表格稀稀疏疏，优化的时候做到将超过的内容隐藏起来，以达到自适应的要求。

5：将后端传过来的性别等进行判断，后端0，1渲染的时候判断男女

6：格式化时间，将后端传过来的时间转化，比如后端传的时间戳："visitTime":1572502840091,通过代码转化成时分秒的格式2019-10-31 14:20

这里推荐一个时间戳转换工具：[https://tool.lu/timestamp/]，(https://tool.lu/timestamp/)有兴趣的小伙伴可以去看一下。

image.png

话不多说，上代码，里面的引入文件可以直接去官网下载，这里为了使用方便，用的是cdn引入，建议将下载到本地哦。
示例：

  Dashboard | Nadhif - Responsive Admin Template删除 

test.json

[ { "id": 139, "deviceId": "3", "name": "424", "sex": 0, "viewReason": 1, "viewPeople": "4", "card": "340823199308151524", "isLeave": 1, "phone": "13661725475", "organId": 1, "organName": "字节跳动", "companyId": 1, "visitTime": 1572502840091, "fenceId": "20191031142032", "headUrl": "http://localhost:8081/pion/images/cmao.jpg", "organIds": null }, { "id": 140, "deviceId": "EAFA6CCF3CDD", "name": "访客围栏测试1", "sex": 0, "viewReason": 2, "viewPeople": "测试", "card": "", "isLeave": 0, "phone": "", "organId": 1, "organName": "字节跳动", "companyId": 1, "visitTime": 1572512489920, "fenceId": "2019103117129", "headUrl": "http://localhost:8081/pion/images/cmao.jpg", "organIds": null },{ "id": 140, "deviceId": "EAFA6CCF3CDD", "name": "访客围栏测试2", "sex": 1, "viewReason": 1, "viewPeople": "测试", "card": "", "isLeave": 0, "phone": "", "organId": 1, "organName": "字节跳动", "companyId": 1, "visitTime": 1572512489920, "fenceId": "2019103117129", "headUrl": "http://localhost:8081/pion/images/cmao.jpg", "organIds": null },{ "id": 140, "deviceId": "EAFA6CCF3CDD", "name": "访客围栏测试3", "sex": 1, "viewReason": 1, "viewPeople": "测试", "card": "", "isLeave": 0, "phone": "", "organId": 1, "organName": "字节跳动", "companyId": 1, "visitTime": 1572512489920, "fenceId": "2019103117129", "headUrl": "http://localhost:8081/pion/images/cmao.jpg", "organIds": null },{ "id": 140, "deviceId": "EAFA6CCF3CDD", "name": "访客围栏测试4", "sex": 1, "viewReason": 1, "viewPeople": "测试", "card": "", "isLeave": 0, "phone": "", "organId": 1, "organName": "字节跳动", "companyId": 1, "visitTime": 1572512489920, "fenceId": "2019103117129", "headUrl": "http://localhost:8081/pion/images/cmao.jpg", "organIds": null }, { "id": 142, "deviceId": "公寓i467ty8", "name": "跳跳21鱼", "sex": 1, "viewReason": 1, "viewPeople": "11", "card": "3408231234567851524", "isLeave": 0, "phone": "13661725475", "organId": 1, "organName": "212联", "companyId": 1, "visitTime": 1572513935374, "fenceId": "20191031172532", "headUrl": "http://localhost:8081/pion/images/cmao.jpg", "organIds": null }]