Layui表格之多列合并展示
前言:
当我们在使用Layui的时候,有时表格中的列比较多,展示出来肯定是有问题的,这样就不得不舍弃一些列不展示,不展示是一种解决方案,但是更好的解决方案应该是合并展示。
这里的展示不是合并单元格,合并单元格方法请参考:https://www.cnblogs.com/Kingram/p/9781682.html
实现效果:

实现代码参考:
{
title : '业务信息',
width : '15%',
templet : function(d) {
return '业务名称:<span style="color:blue;">'+d.businessName+'</span></br>业务编号:<span style="color:blue;">'+d.businessNumber + '</span></br>业务类型:<span style="color:blue;">'+d.typeName+'</span>';
}
}
{
title : '创建/派发/竣工时间',
width : '15%',
templet : function(d) {
return '创建时间:<span style="color:blue;">'+d.createTime+'</span></br>派发时间:<span style="color:blue;">'+d.sendTime+'</span></br>竣工时间:<span style="color:blue;">'+d.finishTime+'</span>';
}
}
注意:
另外需要加上CSS代码改变表格行高,否则还是不显示,代码如下:
.layui-table-cell{
height: 100%;
max-width: 100%;
line-height:1.2;
}
Layui表格之多列合并展示的更多相关文章
- ASP.NET中重复表格列合并的实现方法(转自脚本之家)
这几天做一个项目有用到表格显示数据的地方,客户要求重复的数据列需要合并,就总结了一下.NET控件GridView 和 Repeater 关于重复数据合并的方法. 这是合并之前的效果: 合并之后的效果图 ...
- layui表格参数
layui表格对数据进行用table样式展现 举个例子: <!doctype html> <html> <head> <meta charset=" ...
- 基于WebForm+EasyUI的业务管理系统形成之旅 -- ParamQueryGrid行、列合并(Ⅸ)
上篇<基于WebForm+EasyUI的业务管理系统形成之旅 -- 施工计划查询(Ⅷ)>,主要介绍通过报表工具数据钻取,获取施工计划详细信息. 这篇我们看看ParamQueryGrid[行 ...
- layui 表格在排序之后没有重新渲染问题
问题描述: 在layui表格中,最后一列增加了操作按钮,并且在某些行设置了样式,但是在排序之后,按钮的点击事件失效了,样式也没有了,可能是没有执行done回调 原因: done回调只有在render和 ...
- jQuery实现HTML表格单元格的合并功能
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery实现表格冻结行和列
前几天,遇到一个需求是要将表格的前几行和前几列冻结即固定,就是在有滚动条的情况下,保持那几行和那几列固定,这个需求其实是一个非常常见的需求,因为在涉及好多行和列时,在拖动滚动条时,我们需要知道每行每列 ...
- 关于JS、JQ首行首列固定展示
当时遇见这个问题 是医院手麻系统大批量数据展示,由于是旧项目系统没有使用到前端的架构 只能使用JQ,JS, css完成 也谢谢给予我支持的同行们 固定首行数据: 采用函数的方式进行 JQ /** * ...
- Java 操作Word表格——创建嵌套表格、添加/复制表格行或列、设置表格是否禁止跨页断行
本文将对如何在Java程序中操作Word表格作进一步介绍.操作要点包括 如何在Word中创建嵌套表格. 对已有表格添加行或者列 复制已有表格中的指定行或者列 对跨页的表格可设置是否禁止跨页断行 创建表 ...
- FineUI第十七天---- 表格之扩展列
{ sb.AppendFormat(]); 1.通过表格的SelectedRowIndexArray获得选中行的索引号列表: 2.通过表格的DataKeys(二维数组)获取本行的数据 ...
随机推荐
- bzoj 1797: [Ahoi2009]Mincut 最小割【tarjan+最小割】
先跑一遍最大流,然后对残量网络(即所有没有满流的边)进行tarjan缩点. 能成为最小割的边一定满流:因为最小割不可能割一半的边: 连接s.t所在联通块的满流边一定在最小割里:如果不割掉这条边的话,就 ...
- zoj 2760 How Many Shortest Path【最大流】
不重叠最短路计数. 先弗洛伊德求一遍两两距离(其实spfa或者迪杰斯特拉会更快但是没必要懒得写),然后设dis为st最短距离,把满足a[s][u]+b[u][v]+a[v][t]==dis的边(u,v ...
- 原生js一行代码实现简易轮播图
这是一个简易的js无限循环轮播图,只用了一行js代码就实现了无限循环,记录一下三目运算符的伟大! <!DOCTYPE html><html lang="en"&g ...
- ES高级查询
Query Content 在查询过程中,除了判断文档是否满足查询条件外,ES还会计算一个_score来标识匹配的程度,旨在判断目标文档和查询条件的匹配有多好 # POST 192.168.100.1 ...
- Manven下载
1.下载地址:http://maven.apache.org/download.cgi 2.点击下载链接 3.解压zip到安装路径 我的:C:\Progr ...
- flask-socketio 实现
Flask-SocketIO使Flask应用程序可以访问客户端和服务器之间的低延迟双向通信. 客户端应用程序可以使用Javascript,C ++,Java和Swift中的任何SocketIO官方客户 ...
- VS2010下安装Opencv 分类: Opencv 2014-11-02 13:51 778人阅读 评论(0) 收藏
Opencv作为一种跨平台计算机视觉库,在图像处理领域得到广泛的应用,下面介绍如何在VS2010中安装配置Opencv 一.下载Opencv 下载网址:http://sourceforge.net/p ...
- 在Eclipse+ADT中开发Android系统的内置应用
转自: http://www.iteye.com/topic/1050439 在Eclipse+ADT中开发Android系统的内置应用 Android系统内置有:Browser(浏览器).Mms( ...
- tomcat 修改端口
修改tomcat端口号: a) 去tomcat安装目录(或者解压目录)下的“conf”文件夹中找到文件“server.xml”(本例:“D:\Program Files\Apache Software ...
- Oracle中默认创建的表
安装Oracle数据库后,会自动创建几个表.分别是emp.dept.bonus(也有可能不一样),这些表都在scott账户中.