背景：
bootstrapTable中备注列内容过长会导致展示效果不佳
解决方案：
进行处理，超出范围使用省略号，鼠标移至上方时展示详细信息
详细方案：
首先设置表格单元格、行、列的算法规则
算法规则设置为“列宽由表格宽度和列宽度设定”
css源码：
<table id="UserManger" style="table-layout:fixed;"></table>
然后设置超出范围显示省略号：
css：
.colStyle { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 70px; }bootstrapTable：
field: 'Remark', align: 'center', title: '备注', //设置固定宽度防止单元格自适应 width: '60px', //绑定样式 class: 'colStyle',最后进行处理，bootstrapTable单元格绑定提示面板：
bootstrapTable：
formatter: operateFormatterManger //自定义方法，添加操作按钮jq：
/* * 判断备注内容是否长度过长 * 如过长则进行处理，后面加上省略号，鼠标移入后展示完整数据 * 如长度合适则不进行处理 * **/ function paramsMatter(value, row, index) { //获取备注内容 var values = row.Remark; //判断备注内容是否为空，为空则设置为空字符 if (values == null) { values = ""; } //自定义单元格内容 var span = document.createElement('span'); //写入面板标题 span.setAttribute('title', values); //写入面板内容 span.innerHTML = values; //将面板返回至单元格展示 return span.outerHTML; }
完整源码：
css：
.colStyle { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 70px; }html：
<table id="UserManger" style="table-layout:fixed;"></table>jq：
/* * 判断备注内容是否长度过长 * 如过长则进行处理，后面加上省略号，鼠标移入后展示完整数据 * 如长度合适则不进行处理 * **/ function paramsMatter(value, row, index) { //获取备注内容 var values = row.Remark; //判断备注内容是否为空，为空则设置为空字符 if (values == null) { values = ""; } //自定义单元格内容 var span = document.createElement('span'); //写入面板标题 span.setAttribute('title', values); //写入面板内容 span.innerHTML = values; //将面板返回至单元格展示 return span.outerHTML; }bootstrapTable：
$('#UserManger').bootstrapTable({
url: '/UserManger/GetUserManger?id=' + Math.random(), //请求后台的URL（*）
align: 'center',
method: 'get', //请求方式（*）
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
sortable: false, //是否启用排序
sortOrder: "asc", //排序方式
queryParams: par,//传递参数（*）
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
pageNumber: 1, //初始化加载第一页，默认第一页
pageSize: 10, //每页的记录行数（*）
pageList: [10, 25], //可供选择的每页的行数（*）
//search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
contentType: "application/x-www-form-urlencoded",
strictSearch: true,
//showColumns: true, //是否显示所有的列
//showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
uniqueId: "no", //每一行的唯一标识，一般为主键列
//showToggle: true, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
columns: [
{
align: 'center',
title: '序号',
formatter: function (value, row, index) {
var pageSize = $('#ArbetTable').bootstrapTable('getOptions').pageSize;//通过表的#id 可以得到每页多少条
var pageNumber = $('#ArbetTable').bootstrapTable('getOptions').pageNumber;//通过表的#id 可以得到当前第几页
return pageSize * (pageNumber - 1) + index + 1;//返回每条的序号： 每页条数 * （当前页 - 1 ）+ 序号
}
},
{
field: 'User_No',
align: 'center',
title: '用户编号'
}, {
field: 'USER_NAME',
align: 'center',
title: '用户名称'
}, {
field: 'ADDRESS',
align: 'center',
title: '用户地址'
},
{
field: 'BUSINESS_PLACE_CODE',
align: 'center',
title: '行政区域',
//formatter: operateFormatter //自定义方法，添加操作按钮
},
{
field: 'PRICE_CODE',
align: 'center',
title: '用水类别',
//formatter: operateFormatter //自定义方法，添加操作按钮
},
{
field: 'USE_TYPE_CODE',
align: 'center',
title: '行业分类',
//formatter: operateFormatter //自定义方法，添加操作按钮
},
{
field: 'TOTAL_POWER',
align: 'center',
title: '污水量',
//formatter: operateFormatter //自定义方法，添加操作按钮
},
{
field: 'TOTAL_MONEY',
align: 'center',
title: '污水费',
//formatter: operateFormatter //自定义方法，添加操作按钮
},
{
field: 'OWE_MONEY',
align: 'center',
title: '未收污水费',
},
{
field: 'CHARGE_MODE',
align: 'center',
title: '缴费方式',
//formatter: operateFormatter //自定义方法，添加操作按钮
},
{
field: 'Remark',
align: 'center',
title: '备注',
//设置固定宽度防止单元格自适应
width: '60px',
//绑定样式
class: 'colStyle',
//超出长度就缩减
formatter: paramsMatter
},
{
title: '操作',
field: 'operate',
align: 'center',
valign: 'middle',
width: '9%',
formatter: operateFormatterManger //自定义方法，添加操作按钮
}
]
});
};