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 //自定义方法,添加操作按钮 } ] }); };
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战