bootstrapTable单元格内容过长处理

背景:

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 //自定义方法,添加操作按钮
}
]
});
};
posted @   壹-ZL  阅读(8067)  评论(0编辑  收藏  举报
编辑推荐:
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
点击右上角即可分享
微信分享提示