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": "吴大佐"
}]
}
效果如下
点击分配按钮 将当前点击按钮改变文字即可
网友评论