Bootstrap Table 点击每行显示子页面

最新推荐文章于 2023-03-02 16:10:30 发布

原创最新推荐文章于 2023-03-02 16:10:30 发布 · 4.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap table

Bootstrap 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个基于bootstrapTable的机房来访记录管理系统，详细解释了如何通过ajax调用后端接口获取数据并展示在表格中，包括来访者信息、状态及操作按钮的动态生成。同时，系统支持按主键排序、分页、高度自适应等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//初始化表格
function initTable() {
    $table.bootstrapTable({
        ajax: function (params) {
            $.post('__URL__/GetList', params.data, function (e) {

                if($('#total').val()==""){
                    $('#total').val(e.total);
                }
                params.success({rows:e.rows,total:$('#total').val()});
                
            }, 'json')
        },
        queryParams:queryParams,
        idField: 'id',//指定主键列
        uniqueId: "id",//对每一行指定唯一标识符
        sortName: 'visitstarttime',
        sortOrder: "desc",
        striped: true,
        pageSize: 10,
        pageNumber:1,
        queryParamsType:"",
        toolbar: '#toolbar',
        toolbarAlign: 'none',
        height: tableHeight(),
        detailView: true,
        detailFormatter: "detailFormatter" ,
        pagination: true,
        sidePagination:'server',
        paginationDetailHAlign: 'right',  
        columns: [[
            {
                field: 'id', visible: false
            },
            {
                field: 'roomname', title: '机房名称'
            },
            {
                field: 'visitstatusStr', title: '来访状态'
            },
            {
                field: 'visitstarttime', title: '来访时间'
            },
            {
                field: 'visitpersoncompanyname', title: '来访单位'
            },
            {
                field: 'visitperson', title: '来访人数'
            },
            {
                field: 'phonenumber', title: '联系电话'
            },
            {
                field: 'accompanyusername', title: '接待责任人'
            },
            {
        title: '操作', align: 'center', width: 190, formatter: function (value, row) {
            var str = [];
            if($uac['Computer-show'] == true){
                str.push('<a href="javascript:;" onclick="showitem(\'' + row.id + '\')" class="btn btn-xs btn-del" title="查看"><i class="tn tn-search"></i></a>');
            }
            if($uac['Computer-edit'] == true && row.visitstatus == 1){
                str.push('<a href="javascript:;" onclick="edititem(\'' + row.id + '\')" class="btn btn-xs btn-edit" title="修改"><i class="tn tn-edit"></i></a>');
            }
            if($uac['Computer-out'] == true && row.visitstatus == 1){
                str.push('<a href="javascript:;" onclick="editStatus(\'' + row.id + '\')" class="btn btn-xs" title="登记离开"><i class="tn tn-role"></i></a>');
            }else{
                str.push('<a href="javascript:;" onclick="editStatus(\'' + row.id + '\')" class="btn btn-xs disabled" title="已离开"><i class="tn tn-role"></i></a>');
            }
            return str.join(" ");
        }

    }
        ]],
        onLoadSuccess: function () {
            $('.panel-box .action-refresh').removeClass('fa-spin');
        },
        onExpandRow: function (index, row, $detail) {
            detailview(index, row, $detail)
        }
    })
}

function detailview(index, row, $detail) {
    var inoutid = row.id;
    var $tb = $detail.find('table');
    $tb.bootstrapTable({
        ajax: function (params) {
            $.post('__APP__/Mainten/Userinfoopreation/GetuserlistByinoutid',params.data, function (e) {
                params.success(e ? e.rows : []);
            }, 'json')
        },
        'idField': 'id',//指定主键列
        "uniqueId": "id",//对每一行指定唯一标识符
        "pagination": false,
        queryParams: function (params) {
            params.inoutid= inoutid;
            return params;
        },
    });
}

function detailFormatter(index, row, element) {
    var html = '<table class="table table-hover" id="ddv-'+index+'">' +
        '          <thead>' +
        '            <tr>' +
        '                <th data-field="personname">人员名称 </th>' +
        '                <th data-field="idcard">人员证号 </th>' +
        '            </tr>' +
        '          </thead>' +
        '          </tbody>' +
        '        </table>';
    return html;
}