bootstrap table表格的点击详情按钮的时候 只改变当前按钮的状态 其余不变
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> <!-- 引入bootstrap-table样式 --> <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet"> <!-- jquery及bootstrapjs --> <script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <!-- bootstrap-table.min.js --> <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script> <!-- 引入中文语言包 --> <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script> <body> <table id="mytab" class="table table-hover"></table> <script> $('#mytab').bootstrapTable({ method: 'get', url: "data.json",// 请求路径 striped: true, // 是否显示行间隔色 pageNumber: 1, // 初始化加载第一页 pagination: true,// 是否分页 sidePagination: 'server',// server:服务器端分页|client：前端分页 pageSize: 15,// 单页记录数 queryParams: function (params) {// 上传服务器的参数 var temp = {// 如果是在服务器端实现分页，limit、offset这两个参数是必须的 "pageBean.page": (params.offset / params.limit) + 1, // 当前页码 "pageBean.rows": params.limit, // 每页显示数量 "pageBean.pagination": true }; return temp; }, columns: [{ checkbox: true }, { title: 'id', field: 'id', visible: false },{ title: '姓名', field: 'name', }, { title: '编号', field: 'deviceId', }, { title: '分配', field: 'leaveTime', formatter: option }] }) // 详情按钮 function option(value, row, index) { var htm = '<button class="staffdetails" sid="' + row.id + '" onclick="showDetail('+row.id+')">分配</button>' return htm; } function showDetail(sid){ var that = $('.staffdetails[sid='+sid+']') if(that.text() =="分配"){ that.text("取消分配") }else if(that.text() =="取消分配"){ that.text("分配") } } </script> </body> </html>
json
{ "msg": "查询成功", "total": 15, "code": 1, "rows": [{ "id": 1, "deviceId": "44100AE7ECB4", "name": "王小婷" },{ "id": 2, "deviceId": "44ED45B4", "name": "李晓飞" },{ "id": 3, "deviceId": "2345DFGHJ2345", "name": "李大厨" },{ "id": 4, "deviceId": "2345ASDF4", "name": "吴大佐" }] }
效果如下
点击分配按钮 将当前点击按钮改变文字即可
