前言：
此刻咱们对“ajaxqueryparams格式”都比较着重，同学们都想要知道一些“ajaxqueryparams格式”的相关知识。那么小编在网上搜集了一些有关“ajaxqueryparams格式””的相关知识，希望看官们能喜欢，大家一起来了解一下吧！Tips：祈澈姑娘 技术博客：
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
这里推荐一个时间戳转换工具：[]，()有兴趣的小伙伴可以去看一下。
image.png
话不多说，上代码，里面的引入文件可以直接去官网下载，这里为了使用方便，用的是cdn引入，建议将下载到本地哦。
示例：
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <title>Dashboard | Nadhif - Responsive Admin Template</title> <link rel="stylesheet" href=";> <link rel="stylesheet" href=";> <script src=";></script> <script src=";></script> <script src=";></script> <script src=";></script> </head> <body> <a href="javascript:;" id="remove"><span class="hidden-480">删除</span></a> <table id="mytab" class="table table-hover"></table> <script> $('#mytab').bootstrapTable({ method: 'get', url: "test.json", // 请求路径 striped: true, // 是否显示行间隔色 pageNumber: 1, // 初始化加载第一页 pagination: true, // 是否分页 sidePagination: 'client', // server:服务器端分页|client：前端分页 pageSize: 5, // 单页记录数 pageList: [5, 20, 30], // showRefresh : true,// 刷新按钮 queryParams: function(params) { // 上传服务器的参数 var temp = { name: $("#sname").val(), viewReason: $("#viewReason").val(), }; return temp; }, columns: [{ checkbox: true }, { title: 'id', field: 'id', visible: false }, { title: '设备编号', field: 'deviceId', }, { title: '姓名', field: 'name', }, { title: '性别', field: 'sex', formatter: formatSex }, { title: '证件号码', cellStyle: formatTableUnit, formatter: paramsMatter, field: 'card' }, { title: '联系电话', field: 'phone' }, { title: '被访姓名', field: 'viewPeople' }, { title: '来访事由', field: 'viewReason', formatter: formatReason }, { title: '来访时间', field: 'visitTime', formatter: formatTime }, { title: '是否离开', field: 'isLeave', formatter: formatIsLeave }, { title: '操作', field: 'id', formatter: option }] }) // 定义删除、更新按钮 function option(value, row, index) { var htm = ""; htm += '<button id="dupdevice" deviceId="' + value + '" onclick="updDevice(' + value + ')">编辑</button>' return htm; } //表格超出宽度鼠标悬停显示td内容 function paramsMatter(value, row, index) { var span = document.createElement("span"); span.setAttribute("title", value); span.innerHTML = value; return span.outerHTML; } //td宽度以及内容超过宽度隐藏 function formatTableUnit(value, row, index) { return { css: { "white-space": "nowrap", "text-overflow": "ellipsis", "overflow": "hidden", "max-width": "60px" } } } // 格式化性别"sex": 0,是女 "sex": 1,是男 function formatSex(value, row, index) { return value == 1 ? "男" : "女"; } // 格式化在离厂//"isLeave": 0,是离场，"isLeave": 1,是在场 function formatIsLeave(value, row, index) { return value == 1 ? "离厂" : "在厂"; } // 格式化时间 function formatTime(value, row, index) { var date = new Date(); date.setTime(value); var month = date.getMonth() + 1; var hours = date.getHours(); if(hours < 10) hours = "0" + hours; var minutes = date.getMinutes(); if(minutes < 10) minutes = "0" + minutes; var time = date.getFullYear() + "-" + month + "-" + date.getDate() + " " + hours + ":" + minutes; return time; } // 格式化访问理由 "viewReason": 1是面试,2是开会，3是拜访客户，4是项目实施 function formatReason(value, row, index) { var str; switch(value) { case 1: str = "面试"; break; case 2: str = "开会"; break; case 3: str = "拜访客户"; break; case 4: str = "项目实施"; break; default: str = "其他"; } return str; } // 删除按钮事件 $("#remove").on("click", function() { if(!confirm("是否确认删除？")) return; var rows = $("#mytab").bootstrapTable('getSelections'); // 获得要删除的数据 if(rows.length == 0) { // rows 主要是为了判断是否选中，下面的else内容才是主要 alert("请先选择要删除的记录!"); return; } else { var ids = new Array(); // 声明一个数组 $(rows).each(function() { // 通过获得别选中的来进行遍历 ids.push(this.id); // cid为获得到的整条数据中的一列 }); //后端删除的方法 deleteMs(ids) } }) // 删除访客,删除数据库内容，刷新表格即可删除 function deleteMs(ids) { $.ajax({ url: basePath + "/caller/dels?ids=" + ids, dataType: "json", type: "get", success: function(data) { if(data > 0) { msg(6, "操作成功") $('#mytab').bootstrapTable('refresh', { url: basePath + '/caller/list' }); } } }); } // 编辑访客 function updDevice(id) { alert("编辑") } </script> </body></html>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": ";, "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": ";, "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": ";, "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": ";, "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": ";, "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": ";, "organIds": null }] 版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #ajaxqueryparams格式
