Bootstrap table内容过长鼠标移动后显示全部内容

Bootstrap table表格内容过长鼠标移动之后显示全部内容解决方案

一、使用自定义的省略号，点击可以展开全部，也可以关闭全部。

//首先定义一个全局变量count
        var count=-1;
        var formatterStatus = function (value) {
            //没有内容的时候显示“-”
            var temp = "";
            if (value == '') {
                var temp = "-";
            }
            else {
                temp = value;
            }
            //有内容时通过处理显示一部分
            var text = value;
            var flag = text != null && text.length > 4;
            if (flag) {
                count = count + 1;
                temp = "<p>" + text.substring(0,4)
                    + "<span id='hide" + count + "' style='display:none'>" + text.substring(4) + "</span>"
                    + "<a href='#'id='open" + count + "'οnclick='showhide(" + count + ")'>...</a></p >"
            }
            return temp;
        };
        //点击展开收缩的方法。
        function showhide(count) {
            if ($("#open" + count).text() == "...") {
                $("#open" + count).text("....");
                $("#hide" + count).show();
            } else {
                $("#open" + count).text("...");
                $("#hide" + count).hide();
            }
        };

这样自定义的内容溢出就成功解决，注意：

{
                field: 'standardOpinion',
                title: '监督意见',
                align: 'center',
                formatter:formatterStatus//每个表格都要调用
            },
            {
                field: 'handlerBy',
                title: '处理依据',
                align: 'center',
                formatter:formatterStatus
            },

二、鼠标移动到表格显示全部内容
1、第一种方法，亲自试过，成功，

onLoadSuccess:function(){
//鼠标悬停显示全部内容~

$('.bootstrap-table tr td').each(function () {
$(this).attr("title", $(this).text());
$(this).css("cursor", 'pointer');
});
}

2、第二种方法目前没有尝试（如有尝试过的大佬请记得评论一下是否能够成功）

function paramsMatter(value,row,index, field) {
var span=document.createElement(‘span’);
span.setAttribute(‘title’,value);
span.innerHTML = value;
return span.outerHTML;
}

三、Bootstrap table中自带的一种内容溢出的部分显示省略号，注意这种没有办法展开，只是现示成省略号，鼠标移动到表格就可以显示全部内容。

function formatTableUnit(value, row, index) {
    return {
            css: {
            "white-space": 'nowrap',
            "text-overflow": 'ellipsis',
            "overflow": 'hidden',
            "max-width":"80px"
            }
        }
    }

注意这个方法在这里调用：

{
                field: 'handlerContent',
                title: '处理内容',
                align: 'center',
                cellStyle:formatTableUnit
                //调用处理的方法，也可以直接将此方法写在这里。因为我这边需要全部调用此方法，所以将该方法提到外面，只在每列进行调用即可。
            },

通过查找资料总结出这几种方法，希望对大家有所帮助！！！