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

原创
2017/12/15 12:24
阅读数 6.1K

项目使用了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提示了。

展开阅读全文
加载中

作者的其它热门文章

打赏
0
0 收藏
分享
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部