前言:

当我们在使用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表格之多列合并展示的更多相关文章

  1. ASP.NET中重复表格列合并的实现方法(转自脚本之家)

    这几天做一个项目有用到表格显示数据的地方,客户要求重复的数据列需要合并,就总结了一下.NET控件GridView 和 Repeater 关于重复数据合并的方法. 这是合并之前的效果: 合并之后的效果图 ...

  2. layui表格参数

    layui表格对数据进行用table样式展现 举个例子: <!doctype html> <html> <head> <meta charset=" ...

  3. 基于WebForm+EasyUI的业务管理系统形成之旅 -- ParamQueryGrid行、列合并(Ⅸ)

    上篇<基于WebForm+EasyUI的业务管理系统形成之旅 -- 施工计划查询(Ⅷ)>,主要介绍通过报表工具数据钻取,获取施工计划详细信息. 这篇我们看看ParamQueryGrid[行 ...

  4. layui 表格在排序之后没有重新渲染问题

    问题描述: 在layui表格中,最后一列增加了操作按钮,并且在某些行设置了样式,但是在排序之后,按钮的点击事件失效了,样式也没有了,可能是没有执行done回调 原因: done回调只有在render和 ...

  5. jQuery实现HTML表格单元格的合并功能

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. jQuery实现表格冻结行和列

    前几天,遇到一个需求是要将表格的前几行和前几列冻结即固定,就是在有滚动条的情况下,保持那几行和那几列固定,这个需求其实是一个非常常见的需求,因为在涉及好多行和列时,在拖动滚动条时,我们需要知道每行每列 ...

  7. 关于JS、JQ首行首列固定展示

    当时遇见这个问题 是医院手麻系统大批量数据展示,由于是旧项目系统没有使用到前端的架构 只能使用JQ,JS, css完成 也谢谢给予我支持的同行们 固定首行数据: 采用函数的方式进行  JQ /** * ...

  8. Java 操作Word表格——创建嵌套表格、添加/复制表格行或列、设置表格是否禁止跨页断行

    本文将对如何在Java程序中操作Word表格作进一步介绍.操作要点包括 如何在Word中创建嵌套表格. 对已有表格添加行或者列 复制已有表格中的指定行或者列 对跨页的表格可设置是否禁止跨页断行 创建表 ...

  9. FineUI第十七天---- 表格之扩展列

    {          sb.AppendFormat(]); 1.通过表格的SelectedRowIndexArray获得选中行的索引号列表: 2.通过表格的DataKeys(二维数组)获取本行的数据 ...

随机推荐

  1. 解决axios IE11 Promise对象未定义

    在你的项目中安装polyfill Babel Polyfill 按照官网方法安装并引入即可 http://blog.csdn.net/panyox/article/details/76377248

  2. ExtJS4 带清除功能的文本框 triggerfield

    Ext.onReady(function () { Ext.create('Ext.form.FormPanel', { title: 'Form with TriggerField', bodyPa ...

  3. Android SDK更新以及ADT更新出现问题的解决办法(转载)

    转自:http://zyueqi.iteye.com/blog/1474323 问题描述 使用SDK Manager更新时出现问题Failed to fetch URL https://dl-ssl. ...

  4. Swift4 基础

    创建: 2018/02/17 完成: 2018/02/19 更新: 2018/02/25 补充参照型只有类的实例和闭包 更新: 2018/03/03 加红加粗for-in注意事项, 常量不用也不能声明 ...

  5. bzoj 3875: [Ahoi2014&Jsoi2014]骑士游戏【dp+spfa】

    设f[i]为杀死i的最小代价,显然\( f[i]=min(k[i],s[i]+\sum f[to]) \) 但是这个东西有后效性,所以我们使用spfa来做,具体就是每更新一个f[i],就把能被它更新的 ...

  6. web项目tomcat启动url自定义(去掉项目名)

    通常,使用maven构建web项目,启动时默认的访问路径: http://ip:port/项目名 很多时候我们不喜欢这样 访问,我们希望下面的访问方式: http://ip:port 如果是本地的to ...

  7. Unix\Linux | 总结笔记 | man帮助

    0.目录 手册页分类说明 man手册中的段落说明     1.  man手册页分类 man1  普通用户可以执行的命令帮助 man2  系统调用.内核函数的说明帮助 man3   库函数说明帮助 ma ...

  8. [POI2001]Gra绿色游戏

    Description 绿色游戏是一种两人游戏,双方分别称Ann和Billy.游戏的内容主要是轮流在棋盘上移动一颗棋子.棋盘上的点一部分是绿色的,其余是白色的:全部从1至a+b编号.编号1至a的点属于 ...

  9. bzoj 1858: [Scoi2010]序列操作 || 洛谷 P2572

    记一下:线段树占空间是$2^{ceil(log2(n))+1}$ 这个就是一个线段树区间操作题,各种标记的设置.转移都很明确,只要熟悉这类题应该说是没有什么难度的. 由于对某区间set之后该区间原先待 ...

  10. 2018年全国多校算法寒假训练营练习比赛(第五场):A题:逆序数(树状数组or归并排序)

    题目描述 在一个排列中,如果一对数的前后位置与大小顺序相反,即前面的数大于后面的数,那么它们就称为一个逆序.一个排列中逆序的总数就称为这个排列的逆序数.比如一个序列为4 5 1 3 2, 那么这个序列 ...