背景：
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 //自定義方法，添加操作按鈕
}
]
});
};