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(二维数组)获取本行的数据 ...
随机推荐
- linuxmint17.3提示flash不是最新版本解决方法(copy)
[资料来自于:http://blog.csdn.net/kh896424665/article/details/54879608] 问题:播放视频提示:Adobe Flash Player 不是最新版 ...
- 洛谷 P2766 最长不下降子序列问【dp+最大流】
死于开小数组的WA?! 第一问n方dp瞎搞一下就成,f[i]记录以i结尾的最长不下降子序列.记答案为mx 第二问网络流,拆点限制流量,s向所有f[i]为1的点建(s,i,1),所有f[i]为mx(i+ ...
- bzoj 3930: [CQOI2015]选数【递推】
妙啊 这个题一上来就想的是莫比乌斯反演: \[ f(d)=\sum_{k=1}^{\left \lceil \frac{r}{d} \right \rceil}\mu(k)(\left \lceil ...
- jQuery笔记之Easing Plugin
jQuery easing 使用方法首先,项目中如果需要使用特殊的动画效果,则需要在引入jQuery之后引入jquery.easing.1.3.js<script type="text ...
- 使用pabot并行执行robotframework用例
主要观点:使用pabot并行运行robotframework,可以解决:robotframework执行案例时间长的问题 解决执行案例时间长的方案: 目的: 缩短案例的运行时间 两种方法: 将大的项目 ...
- 水题 Codeforces Round #285 (Div. 2) C. Misha and Forest
题目传送门 /* 题意:给出无向无环图,每一个点的度数和相邻点的异或和(a^b^c^....) 图论/位运算:其实这题很简单.类似拓扑排序,先把度数为1的先入对,每一次少一个度数 关键在于更新异或和, ...
- C# 基础知识和VS2010的小技巧总汇(2)[转]
1.使用关键字readonly ,表示这个字段只能在执行构造函数的过程中赋值,或者由初始化语句赋值 2..net4.0新增一个 Tuple 类,代表一个有序的N元组.可以调用Tuple.Create ...
- .net简单的fileupload控件上传
前台代码: <asp:FileUpload ID="FileUpload1" runat="server" /> <asp:Button ID ...
- 12.1Java-构造方法
一.构造方法 作用:在new的同时对成员变量赋值,给对象的属性初始化赋值格式:权限 方法名(参数列表){}方法的名字,必须和类的名字完全一致,大小写一致构造方法不许写返回值类型,如void,int 构 ...
- mysql之修改字符编码
目录 统一修改字段编码 修改单个字段编码 修改表字符编码 统一修改字段编码: alter table `tablename` convert to character set utf8; 修改表字符编 ...