在开发的过程当中会出现表格显示的内容太多的问题,这样就会导致有些行的间距被内容撑大,正好今天遇到这个问题,简单写下处理的办法。
设置bootstraptable的时候,设置columns的时候,有个formatter属性,在这定义方法。
var bootstrapTableOption = function () {
var option = {
url: ' ',
method: 'Get',//请求后台的URL(*)
columns: [
{
title: ' ',
field: '',
align: 'left',
valign: 'middle',
formatter: formatterStatus
},],
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
pagination: true, //是否显示分页(*)
paginationPreText: "«",
paginationNextText: "»",
queryParams: queryParams,//传递参数(*)
sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*)
pageSize: 20, //每页的记录行数(*)
pageList: [20, 50, 100], //可供选择的每页的行数(*)
//showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
uniqueId: "ID", //每一行的唯一标识,一般为主键列
onLoadSuccess: function () {
modify();
}
//showToggle: true, //是否显示详细视图和列表视图的切换按钮
//showExport: true,
//exportDataType: 'all'
//formatter: formattertemp
};
return option;
};
{
title: 'Option',
field: 'TempValue',
align: 'center',
valign: 'middle',
formatter: formattertemp
},
然后在formattertemp 中处理对内容得操作
//先定义一个全局变量count
var count=-1;
var formatterStatus = function (value) {
//没有内容的时候显示“-”
var temp = "";
if (value == '') {
var temp = "-";
}
else {
temp = value;
}
//有内容时,内容大于50字符则大于的部分隐藏,点击Show More 显示内容
var text = value;
var flag = text.length > 50 ? true : false;
if (flag) {
count = count + 1;
temp = "<p>" + text.substring(0, 50)
+ "<span id='hide" + count + "' style='display:none'>" + text.substring(50) + "</span>"
+ "<a href='javascript:;' id='open" + count + "' onclick='showhide(" + count + ")'>...Show more</a></p>"
}
return temp;
}
function showhide(count) {
if ($("#open" + count).text() == "...Show more") {
$("#open" + count).text("Pick up");
$("#hide" + count).show();
} else {
$("#open" + count).text("...Show more");
$("#hide" + count).hide();
}
}