1、我们在使用table展示数据时,有时有些字段内容比较长,如果全部展示,td将会换行,页面将会很难看,此时可以采用截断过长字符串的方法来解决,但是用户在查看时可能还要查看所有详细的信息,此时的解决方案有:
比如现在有一个比较长的字段要展示在table中:
content = “我的内容比较长我的内容比较长我的内容比较长我的内容比较长”
截断后:
content1 = “我的内容比较长但被截断....”
①、最简单的解决方案:采用table的td自己的属性来解决:如下
<table>
<tr>
<td title="<%=content%>"><%=content1%></td>
</tr>
</table>
此时页面table中展示的将是截断后的字符串,但当鼠标指向对应的td区域时将会在鼠标的边上弹出一个类似层的窗口显示所有详细的内容(也就是存放在title属性中的内容)
②、页面提供一个记录信息详细查看的功能。与上一个解决方案相比,该功能的实现需要从后台从新加载对应记录的详细信息,比较麻烦。
③、使用js控制实现。
④、使用css来控制实现,相对第一种解决方案,该方案更好。
注:方案③和④的具体实现,有时间我会详细的写出来。
分享到:
相关推荐
table 绑定数据 jquery 分页 table 绑定数据 jquery 分页 table 绑定数据 jquery 分页
table数据相同时合并单元格,原理:逐行进行比较,相同时隐藏第二行,对第一行添加rowspan 【table数据相同时合并单元格,原理:逐行进行比较,相同时隐藏第二行,对第一行添加rowspan】
方法一: 根据table的id属性和table中的某一个元素定位其在table中的位置 table包括表头,位置坐标都是从1开始算 ... # 按行查询表格的数据,取出的数据是一整行,按空格分隔每一列的数据 table_tr_list = d
js实时修改table数据,简单易用,ajax,json
bootstrap-table动态加载json数据并且支持分页。摘要必须大于50个字节!
html2canvas 与 jspdf 相结合生成 pdf 内容被截断的终极解决方案,设置背景色为白色,然后转成图片后,获取截断处图片像素点,从截断处往上一行行扫描像素点颜色,碰到这一行颜色都是全白的,代表是从这里开始截断,...
layui的表格table选中数据后可打印本行数据,未打印时不显示,只在打印页面显示打印内容。只是做了一个简单的demo,页面需要自己去画,方法已实现。有具体的指导步骤
在jsp、html页面中实现table表格按列合并相同数据行单元格代码,可实现功能为:在一个table表格中,合并指定列中所有相同数据相邻行单元格内容。
1.table支持动态加载列头和数据; 2.table支持翻页标签隐藏;修改查询请求2次后台; 3.table支持页面数据遍历与更新;
特点 在上个table标签的基础上修改了部分代码,支持firefox. 新增数据展现控件以便定制更加复杂的table. 1、JSP2.0标准自定义标签 2、支持数据库后台翻页 3、支持排序 4、支持firfox 4、使用...
今天小编就为大家分享一篇layui异步加载table表中某一列数据的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
最简单的方法就是: //当前页的刷新 $(".layui-laypage-btn")[0].click();...以上这篇layui前端框架之table表数据的刷新方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。
该小程序主要使用了ucharts和wyb-table两插件实现的数据报表功能 特点 使用的是uni-app中最受欢迎的图表uCharts插件完成图表展示,该插件文档详细,且调用简单方便、性能及体验极佳。 ucharts图表插件。 使用wyb...
Echarts高级进阶教程(2):appendData异步加载大数据量分片加载数据和增量渲染的解决方案
今天小编就为大家分享一篇Layui组件Table绑定行点击事件和获取行数据的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
SQL Server 2000 新增了Table型数据:Table型数据不能用来定义列的类型,只能用作T-SQL变量或者作为自定义函数的返回值。SQL Server 2000支持两种类型的函数:内置函数和用户定义函数。内置函数只允许T-SQL 语句调用...
在layui的表格table中,选中某行数据之后更改本行颜色,取消选中后恢复原样式。在layui的表格table中,选中某行数据之后更改本行颜色,取消选中后恢复原样式。
页面数据导出工具,通过tableExport 导出指定dable数据,可根据需求修改相关样式。
BootStrap Table两个Table数据之间行数据拖拽。
使用jQuery实现动态可编辑表格,代码更少,兼容性更好