bootstrap-table列超宽用省略号代替，并加tooltip提示

项目使用了bootstrap table做表格插件，今天遇到了列超宽的问题，下面把解决的办法说明一下。

测试引入的css：bootstrap.min.css; bootstrap-table.min.css

测试引入的js：jquery.min.js; bootstrap.min.js; bootstrap-table.min.js; bootstrap-table-zh-CN.min.js

演示地址：https://www.oschina.net/p/hplus-requirejs，bootstrapTable栏目

1、测试表格

HTML代码：

<table id="exampleTableFromData">
    <thead>
        <tr>
            <th data-field="Tid">ID</th>
            <th data-field="First">说明</th>
            <th data-field="sex">性别</th>
            <th data-field="Score">评分</th>
        </tr>
    </thead>
</table>

JavaScript代码：

var testData = [{
    Tid: "1",
    First: "JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。",
    sex: "男",
    Score: "50"
}, {
    Tid: "2",
    First: "灞波儿奔",
    sex: "男",
    Score: "94"
}];
$("#exampleTableFromData").bootstrapTable({
    data: testData
});

页面效果：

2、控制列宽度

【说明】这列太宽，需要控制它的宽度，如控制宽度100px，在【说明】这列上添加data-width="100px"。

HTML代码：

<table id="exampleTableFromData">
    <thead>
        <tr>
            <th data-field="Tid">ID</th>
            <th data-field="First" data-width="100px">说明</th>
            <th data-field="sex">性别</th>
            <th data-field="Score">评分</th>
        </tr>
    </thead>
</table>

页面效果：

3、设置样式

当控制列宽度后，文字被行数增多，视觉效果更差，这时我想到的是用css实现文字超出省略。于是用data-cell-style来设置【说明】这列的样式。

HTML代码：

<table id="exampleTableFromData">
    <thead>
        <tr>
            <th data-field="Tid">ID</th>
            <th data-field="First" data-width="100px" data-cell-style="colStyle">说明</th>
            <th data-field="sex">性别</th>
            <th data-field="Score">评分</th>
        </tr>
    </thead>
</table>

JavaScript代码：

function colStyle(value, row, index) {
	return {
		css : {
			"text-overflow" : "ellipsis",
			"white-space" : "nowrap",
			"overflow" : "hidden"
		}
	};
}

页面效果：

   dom渲染效果：

【说明】这列css内联样式有了，可是并没有起到作用，经过百度了解到：如果想要一个table固定大小，里面的文字强制换行(尤其是在一长串英文文本，并且中间无空格分隔的情况下)，以达到使过长的文字不撑破表格的目的，一般是使用样式：table-layout: fixed。注意：bootstrap table渲染表格时，会生成三个table来组合成头部、数据部分和尾部，它们都要加此样式才能对齐表格，下面css直接选择table。

css代码：

<style>
table {
	table-layout: fixed;
}
</style>

页面效果：

已经达到了显示效果，可是这样文本被影藏了，看不到，这时想到了加bootstrap的tooptip。

4、设置tooltip

需要重新formatter【说明】这列，以符合bootstrap的tooltip插件的dom结构，给【说明】这列加data-formatter。

HTML代码：

<table id="exampleTableFromData">
    <thead>
        <tr>
            <th data-field="Tid">ID</th>
            <th data-field="First" data-width="100px" data-cell-style="colStyle" data-formatter="FirstFormatter">说明</th>
            <th data-field="sex">性别</th>
            <th data-field="Score">评分</th>
        </tr>
    </thead>
</table>

JavaScript代码：

function colStyle(value, row, index) {
    return {
        css: {
            "text-overflow": "ellipsis",
            "white-space": "nowrap",
            "overflow": "hidden"
        }
    };
}

function FirstFormatter(value, row, index) {
    return `<span data-toggle="tooltip" data-placement="left" title="${value}">${value}</span>`;
}

var testData = [{
    Tid: "1",
    First: "JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。",
    sex: "男",
    Score: "50"
}, {
    Tid: "2",
    First: "灞波儿奔",
    sex: "男",
    Score: "94"
}];
$("#exampleTableFromData").bootstrapTable({
    data: testData
});
$('span[data-toggle="tooltip"]').tooltip(); // bootstrap table渲染完成以后执行

页面效果：

鼠标放上去有tooltip提示了。