当表格里面的内容列数过多的，内容长度过长的时候，会出现自动换行的效果，整个表格的每一行高度就不相同了，看上去就不够美观。
参考demo如下：
bootstrap-table表格超过长度自动省略
$('#mytab').bootstrapTable({
method: 'get',
url: "data.json", // 请求路径
striped: true, // 是否显示行间隔色
pageNumber: 1, // 初始化加载第一页
pagination: true, // 是否分页
sidePagination: 'client', // server:服务器端分页|client：前端分页
pageSize: 5, // 单页记录数
pageList: [5, 20, 30],
queryParams: function(params) { // 上传服务器的参数
var temp = {
name: $("#sname").val(),
viewReason: $("#viewReason").val(),
};
return temp;
},
columns: [{
checkbox: true
}, {
title: 'id',
field: 'id',
visible: false
}, {
title: '设备编号',
field: 'deviceId',
}, {
title: '姓名',
field: 'name',
}, {
title: '证件号码',
cellStyle: formatTableUnit,
formatter: paramsMatter,
field: 'card'
}]
})
//表格超出宽度鼠标悬停显示td内容
function paramsMatter(value, row, index) {
var span = document.createElement("span");
span.setAttribute("title", value);
span.innerHTML = value;
return span.outerHTML;
}
//td宽度以及内容超过宽度隐藏
function formatTableUnit(value, row, index) {
return {
css: {
"white-space": "nowrap",
"text-overflow": "ellipsis",
"overflow": "hidden",
"max-width": "60px"
}
}
}
参考的json数据[
{
"id": 139,
"deviceId": "3",
"name": "王小婷",
"card": "12354765787798745677"
}, {
"id": 139,
"deviceId": "3",
"name": "祈澈菇凉",
"card": "3408231998918484"
},{
"id": 139,
"deviceId": "3",
"name": "小飞侠",
"card": "340823199823545"
},{
"id": 139,
"deviceId": "3",
"name": "uzi",
"card": "340823199853467"
},{
"id": 139,
"deviceId": "3",
"name": "mlxg",
"card": "34082319983563456"
}, {
"id": 139,
"deviceId": "3",
"name": "小虎",
"card": "34082319983252"
}
]
修改之后的效果就是这样的，如果超出宽度就会自动省略超过的部分，鼠标放在上面的时候，会将全部的内容显示出来。
分享到：
