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;
 }

原文地址:https://www.cnblogs.com/Kingram/p/10514987.html

时间: 2024-10-15 04:31:42

Layui表格之多条数据合并展示的相关文章

oracle将多条数据合并成一条

select  t.col1,t.col2  ,wmsys.wm_concat(t.col3||' ') AS col3 , wmsys.wm_concat(t.col4||'') as col4,wmsys.wm_concat(t.col5||'') as col5,wmsys.wm_concat(t.col6||'') as col6 from tablename t GROUP BY  t.col1,t.col2 ;

JavaScript如何一次性展示几万条数据

有一位同事跟大家说他在网上看到一道面试题:"如果后台传给前端几万条数据,前端怎么渲染到页面上?",如何回答? 于是办公室沸腾了, 同事们讨论开了, 你一言我一语说出自己的方案. 有的说直接循环遍历生成html插到页面上:有的说应该用分页来处理:还有的说这个面试官是个白痴, 哪有后台传几万条数据给前端这种情况的:我仔细思考了一下,先不论后端到底会不会白痴到传几万条数据给前端,假如真碰到这种情况,那么如果前端获取到数据以后, 直接将数据转换成html字符串,通过DOM操作插入到页面,势必导

表格和图在数据展示上面的思考

1.常见表格的数据展示仅仅是一个数据,比如么每个人的成绩信息 姓名|班级|科目|成绩 这是基础的表,但是他仅仅展示了一个数据,就是成绩,其余的仅仅是描述信息,没有什么具体的意义,查询仅是针对这些描述信息进行过滤 而已. 2.扩展的表格 交叉表: 3.折线图: 维度+维度+度量----三维数据展示 OLAP里面的表格基本都是数据,描述信息都在维度里面,也就是在表格的标题行或者行里面的首列或者扩展列里面 数据的多角度现实: 多维度的数据展现在表格里面基本都可以实现,以前仅仅认为可以现实三维的数据.

Yii多条数据展示挂件之CGridView

Yii多条数据展示挂件CGridView的简单使用 第一种: 在User的控制器中 public function actionIndex() { $criteria = new CDbCriteria(); //关联关系 $criteria -> with = array('city','user_info'); //创建查询数据的对象 $dataProvider = new CActiveDataProvider('User',array( 'criteria' => $criteria,

SQL 将一条记录中多个字段的值拼接为一个字段 &amp;&amp; 将多行数据合并成一行,并且拼接CONVERT() 、for xml path的使用

接着上篇文章的订单表(商品编号,价格设置时间id(类似于创建时间,创建时间约早,则act_id越小) ,价格的时间段,商品价格) 一.将一条记录中多个字段的值拼接为一个字段 现要求将两个时间段合并为一个字段,应该如何做呢? 先来看下理想的结果: 查询出的时间段合并到一起了: 代码如下,将查询的字段用+'你想要的符号' + 拼接即可 select item,act_id,loc_id,convert(varchar(100),start_date,20)+ '-' +convert(varchar

layui表格模板重复数据为undefined的问题

layui表格中使用模板时需要注意 {field:'user',title: '出卷人', sort: true, templet:function(d){return '<div>'+d.user.username+'</div>'}} 在后台设置表格的json数据时,需要先把数据对象转为Object类型,否则出现重复对象时会出现 $ref 导致数据为空 1 JSONObject jsonObject = new JSONObject(); 2 Object objData =

layui表格和弹出框的简单示例

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>demo</title> <link rel="stylesheet" href="../Js/Con

layui表格参数

layui表格对数据进行用table样式展现 举个例子: 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>layui表格div容器</title> 6 </head> 7 <body> 8 <div id="container"></div> 9 </

快速数据列表展示(编辑中)

在页面数据和控件的自动交换机制中,我们通过PageX实现了一种快速的控件和数据交换机制,能够方便快捷地完成数据库中的数据记录的管理.一般情况下,在进入这个编辑页面之前,还应该有另外一个页面,可以一次展示多条数据记录的信息.在这个数据的列表界面中,可以进行各种操作,如删除.跳转.编辑等.这个数据列表页面不仅可以按照数据库的分类展示数据,也可以根据需要进行展示,如按指定字段排序.根据查询结果展示.分页展示等. 用什么来展示数据列表? 由于数据列表页面在数据管理中十分常用,因此,在微软的开发工具的发展