处理Bootstrap-table 内容显示太多问题

在开发的过程当中会出现表格显示的内容太多的问题，这样就会导致有些行的间距被内容撑大，正好今天遇到这个问题，简单写下处理的办法。

设置bootstraptable的时候，设置columns的时候，有个formatter属性，在这定义方法。

var bootstrapTableOption = function () {
            var option = {
                url: ' ',
                method: 'Get',//请求后台的URL（*）
                
                columns: [
                    {
                        title: ' ',
                        field: '',
                        align: 'left',
                        valign: 'middle',
                        formatter: formatterStatus
                    },],
                    
               
                striped: true,  //是否显示行间隔色
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true,                   //是否显示分页（*）
                paginationPreText: "«",
                paginationNextText: "»",
                queryParams: queryParams,//传递参数（*）
                sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                pageSize: 20,                       //每页的记录行数（*）
                pageList: [20, 50, 100],        //可供选择的每页的行数（*）
                //showRefresh: true,                  //是否显示刷新按钮
                minimumCountColumns: 2,             //最少允许的列数
                clickToSelect: true,                //是否启用点击选中行
                uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
                onLoadSuccess: function () {
                    modify();
                }
                //showToggle: true,                    //是否显示详细视图和列表视图的切换按钮
                //showExport: true,
                //exportDataType: 'all'
                //formatter: formattertemp
            };
            return option;
        };

{
                        title: 'Option',
                        field: 'TempValue',
                        align: 'center',
                        valign: 'middle',
                        formatter: formattertemp
                    },

然后在formattertemp 中处理对内容得操作

//先定义一个全局变量count
var count=-1；
var formatterStatus = function (value) {
//没有内容的时候显示“-”
            var temp = "";
            if (value == '') {
                var temp = "-";
            }
            else {
                temp = value;
            }
//有内容时，内容大于50字符则大于的部分隐藏，点击Show More 显示内容
            var text = value;
            var flag = text.length > 50 ? true : false;
            if (flag) {
                count = count + 1;
                temp = "<p>" + text.substring(0, 50)
                    + "<span id='hide" + count + "' style='display:none'>" + text.substring(50) + "</span>"
                    + "<a href='javascript:;' id='open" + count + "' onclick='showhide(" + count + ")'>...Show more</a></p>"
            }

            return temp;
        }

function showhide(count) {
        if ($("#open" + count).text() == "...Show more") {
            $("#open" + count).text("Pick up");
            $("#hide" + count).show();
        } else {
            $("#open" + count).text("...Show more");
            $("#hide" + count).hide();
        }
    }