bootTrap table 使用总结（三） 点击当前行，弹出具体的详细信息(使用detailFormatter属性）

项目开发中经常会有这样的需求，表格中展示主要的信息，点击会展示详细信息，下面我们就来实现这一功能。复制代码就直接可以使用啦！！！

效果图：

//错误日志
$(function () {
    var option = {
            url: '../etlLog/selectAll',
            pagination: true,	//显示分页条
            sidePagination: 'server',//服务器端分页
            showRefresh: true,  //显示刷新按钮
            search: true,
            toolbar: '#toolbar',
            striped: true,     //设置为true会有隔行变色效果
            //idField: 'menuId',
            detailView: true,
            responseHandler: function (res) {
                //testlist = res;
                return {
                    rows: res.list,
                    total: res.total,
                }
            },
            queryParams: function (params) {
                return {
                    offset: params.offset,
                    limit: params.limit,
                    search: params.search
                }
            },
            columns: [
                {
                    field: 'logId',
                    title: '序号',
                    width: 40,
                    formatter: function (value, row, index) {
                        var pageSize = $('#table').bootstrapTable('getOptions').pageSize;
                        var pageNumber = $('#table').bootstrapTable('getOptions').pageNumber;
                        return pageSize * (pageNumber - 1) + index + 1;
                    }
                },

                {title: '监控对象名称', field: 'objectName'},
                {title: '监控类别', field: 'monitetypeName'},
                {
                    title: '报警级别', field: 'sublist',
                    formatter:
                        function (value, row, index) {
                            if (value == '1') {
                                return '提示';
                            } else if (value == '2') {
                                return '次要';
                            } else if (value == '3') {
                                return '重要';
                            } else {
                                return '紧急';
                            }

                        }
                },
                {
                    title: '报错信息 ', field:
                        'errorInfo', cellStyle: formatTableUnit
                }
                ,
                {
                    title: '负责人 ', field:
                        'owner'
                }
                ,
                {
                    title: '报警日期', field:
                        'logDate'
                }

                ,
                {
                    title: '处理状态', field:
                        'handleStatus', formatter:

                        function (value, row, index) {
                            var a = "";
                            if (value === '0')
                                a = '<span style=" color:red;font-size: 14px;font-weight: bolder">待处理</span>';
                            else
                                a = '<span style=" color:red;font-size: 14px;font-weight: bolder">已处理</span>';
                            return a;
                        }
                }
                ,
                {
                    title: '操作', field:
                        'operate',
                    events: operateEvents,
                    formatter: operateFormatter
                }
            ],
            detailFormatter: function (index, row) {
                var str = "";
                if (row.monitetypeId === '01') {
                    console.log(row.monitetypeId);
                    var data = row.logId;
                    console.log(data);
                    var logDetail = new Array();
                    $.ajax({
                        type: "GET",
                        url: "../logDetail/selectLogDetail",
                        data: {logId: data},
                        dataType: "json",
                        async: false,//设置为同步传输
                        success: function (result) {
                            logDetail = result.log;
                        }
                    });
                    console.log("得到的结果是：" + JSON.stringify(logDetail))
                    str = "<form> ";
                    str += "<div class='fix-margin-horizontal form-group' style='margin-left:5.4%;margin-right:5.4%;display: inline-block;height: auto;width: auto'>";
                    str += "报错信息 ：" + row.errorInfo + "</div>";
                    str += "<br>";
                    str += "<div class='fix-margin-horizontal form-group' style='margin-left:5.4%;margin-right:5.4%;display: inline-block;height: auto;width: auto'>";
                    str += "处理建议 ：&nbsp;" + row.logAdvise + "</div>";
                    str += "<br>";
                    var j = -1;
                    for (var i = 0; i < Math.floor((logDetail.length / 3)); i++) {
                        str += "<div class='fix-margin-horizontal container' style='margin-left:3%;margin-right:3%;display: inline-block;>";
                        str += "<div class='row'>";
                        str += "<div class='col-xs-8 col-md-4\'>";
                        str += logDetail[++j].modelKey + " : " + logDetail[j].modelValue;
                        str += "</div>";
                        str += "<div class='col-xs-8 col-md-4\'>";
                        str += logDetail[++j].modelKey + " : " + logDetail[j].modelValue;
                        str += "</div>";
                        str += "<div class='col-xs-8 col-md-4\'>";
                        str += logDetail[++j].modelKey + " : " + logDetail[j].modelValue;
                        str += "</div>";
                        str += "</div>";
                        str += "</div>";
                    }
                    if (logDetail.length % 3 == 1) {
                        str += "<div class='fix-margin-horizontal container' style='margin-left:3%;margin-right:3%;display: inline-block;>";
                        str += "<div class='row'>";
                        str += "<div class='col-xs-8 col-md-4\'>";
                        str += logDetail[++j].modelKey + " : " + logDetail[j].modelValue;
                        str += "</div>";
                        str += "</div>";
                        str += "</div>";
                    } else if (logDetail.length % 3 == 2) {
                        str += "<div class='fix-margin-horizontal container' style='margin-left:3%;margin-right:3%;display: inline-block;>";
                        str += "<div class='row'>";
                        str += "<div class='col-xs-8 col-md-4\'>";
                        str += logDetail[++j].modelKey + " : " + logDetail[j].modelValue;
                        str += "</div>";
                        str += "<div class='col-xs-8 col-md-4\'>";
                        str += logDetail[++j].modelKey + " : " + logDetail[j].modelValue;
                        str += "</div>";
                        str += "</div>";
                        str += "</div>";
                    }
                    str += "</form>";
                    return str;

                }
            }
            ,
        }
    ;
    $('#table').bootstrapTable(option);
});

function formatTableUnit(value, row, index) {
    return {
        css: {
            "white-space": 'nowrap',
            "text-overflow": 'ellipsis',/*当文本溢出时，溢出的部分隐藏，显示省略号*/
            "overflow": 'hidden',
            "max-width": "200px"
        }
    }
}

这里有彩蛋
教你如何使用BootStrap table，BootStrap table使用总结（一） （带有详细的案例）

BootStrap table 使用总结（二）如何自定义参数，传递给后台以及怎么在表格中添加按钮并绑定事件

Bootstrap table 中文帮助文档