前言:

当我们在使用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. ubuntu中desktop与alternate版本的区别(转载)

    转自:http://www.hyleong.com/ubuntu-desktop-alternate/ 今天ubuntu发布了11.04版本,但是下载的时候有desktop和alternate版本,他 ...

  2. Linux 系统管理命令 - free - 查看系统内存信息

    命令详解 重要星级: ★★★★★ 功能说明: free 命令用于显示系统内存状态,具体包括系统物理内存.虚拟内存.共享内存和系统缓存等. 语法格式: free [option] free [选项] 说 ...

  3. svn报错:privious operation has not finshed;run 'cleanup' if it was interrupted

    在更新svn的过程中,可能中途会取消,取消之后再次更新时可能提示,如下图: 下载sqlite3工具,进入此下载地址:https://www.sqlite.org/download.html 将sqli ...

  4. Educational Codeforces Round 52 (Rated for Div. 2) F. Up and Down the Tree 树型DP

    题面 题意:给你一棵树,你起点在1,1也是根节点,你每次可以选择去你子树的某个叶子节点,也可以选择,从叶子节点返回距离不超过k的一个根, 也就是说,你从1开始,向下跳,选择一个叶子(就是没有子树的节点 ...

  5. JS 数据类型入门与typeof操作符

    标准的数据类型划分: 基本类型: number(数字).string(字符串).undefined.boolean(布尔值).null(空对象) //空对象与非空对象,最大的区别就是不能进行属性操作 ...

  6. Python函数缓存

    函数缓存 (Function caching) 函数缓存允许我们将一个函数对于给定参数的返回值缓存起来.当一个I/O密集的函数被频繁使用相同的参数调用的时候,函数缓存可以节约时间.在Python 3. ...

  7. (转)C语言运算符优先级 详细列表

    C语言运算符优先级 详细列表 文章转自:Slyar Home 优先级 运算符 名称或含义 使用形式 结合方向 说明 1 [] 数组下标 数组名[常量表达式] 左到右   () 圆括号 (表达式)/函数 ...

  8. 水题 Codeforces Beta Round #70 (Div. 2) A. Haiku

    题目传送门 /* 水题:三个字符串判断每个是否有相应的元音字母,YES/NO 下午网速巨慢:( */ #include <cstdio> #include <cstring> ...

  9. 转】用Mahout构建职位推荐引擎

    原博文出自于: http://blog.fens.me/hadoop-mahout-recommend-job/ 感谢! 用Mahout构建职位推荐引擎 Hadoop家族系列文章,主要介绍Hadoop ...

  10. poj1715Hexadecimal Numbers(数位dp)

    链接 好久没写这种逐位计数的了. 先统计出总的数 ,s-n+1,倒着计算的 ,感觉倒着比较符合计算方式,总数为15*A(15,i) (1=<i<=8) 也就是1-8长度所有的排列总数 然后 ...