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

王小婷

发布于 2025-05-20 06:12:46

14300

代码可运行

文章被收录于专栏：编程微刊编程微刊

运行总次数：0

代码可运行

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