bootstrap table表格的点击详情按钮操作

简介: bootstrap table表格的点击详情按钮操作

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": "吴大佐"
    }]
}

效果如下

点击分配按钮 将当前点击按钮改变文字即可

相关文章
|
4月前
|
前端开发 JavaScript
Bootstrap Table根据参数搜索功能
Bootstrap Table根据参数搜索功能
37 0
|
4月前
|
前端开发
bootstrap table点击修改按钮给弹框赋值
bootstrap table点击修改按钮给弹框赋值
19 0
|
4月前
|
JSON 前端开发 数据库
Bootstrap Table使用教程(请求json数据渲染表格)
Bootstrap Table使用教程(请求json数据渲染表格)
42 0
|
4月前
|
前端开发
bootstrap table分页悬停颜色改变
bootstrap table分页悬停颜色改变
18 0
|
4月前
|
前端开发
解决bootstrap table刷新加载时白色闪屏问题
解决bootstrap table刷新加载时白色闪屏问题
28 0
|
5月前
|
前端开发 容器
|
5月前
|
前端开发 容器
|
5月前
|
前端开发 开发者 容器
|
5月前
|
前端开发
|
5月前
|
前端开发 JavaScript 容器