layui模板语言,渲染表格分组合并行

接到需要渲染表格全部内容的同时,根据相同分类合并行达到下面的效果

难点在于layui模板语言代码阅读性不高,html 的table合并仅第一行rowspan后续不需要添加该列,需要进行数量判断,有多行或者仅一行的判断.

1首先对数据进行分组

js:

let groupList =groupBy(res.data.AIKuQuoteList, function (item) {return [item.报价分类];//按照name进行分组});function  groupBy(array, f) {debugger;const groups = {};        array.forEach(function (o) { //注意这里必须是forEach 大写const group = JSON.stringify(f(o));groups[group] = groups[group] || [];groups[group].push(o);});return Object.keys(groups).map(function (group) {return groups[group];}); }

2.分组之后会以分组字段的值为键,组成一个层级结构,进行渲染
关键在于集中查看代码是否缺漏,其次是三个判断,分组里数量大于1,是第一个则渲染rowspan,大于1不是0下标则不渲染合并列,其他情况正常渲染

<tbody class="thead">{{# layui.each(d, function(index, item){ }}{{# var slength=item.length; }}{{# layui.each(item,function (i,it){ }}{{#  if(index!=d.length-1&&it.lineType=="明细"){ }}{{#    if(slength>1&&i==0){ }}<tr><td>{{ it.空间名称 }}</td><td>{{ it.产品名称 }}</td><td rowspan='{{slength}}'>{{ it.报价分类 }}</td><td>{{ it.明细序号 }}</td><td>{{ it.部件名称 }}</td><td>{{ it.宽 }}</td><td>{{ it.深 }}</td><td>{{ it.高 }}</td><td>{{ it.数量 }}</td><td>{{ it.材料 }}</td><td>{{ it.颜色 }}</td><td>{{ it.单位 }}</td><td>{{ it.单位数 }}</td><td>{{ it.工艺费 }}</td><td>{{ it.单价 }}</td><td>{{ it.金额 }}</td><td>{{ it.折扣 }}</td><td>{{ it.折后金额 }}</td></tr>{{#    }else if (slength>1){ }}<tr><td>{{ it.空间名称 }}</td><td>{{ it.产品名称 }}</td><td>{{ it.明细序号 }}</td><td>{{ it.部件名称 }}</td><td>{{ it.宽 }}</td><td>{{ it.深 }}</td><td>{{ it.高 }}</td><td>{{ it.数量 }}</td><td>{{ it.材料 }}</td><td>{{ it.颜色 }}</td><td>{{ it.单位 }}</td><td>{{ it.单位数 }}</td><td>{{ it.工艺费 }}</td><td>{{ it.单价 }}</td><td>{{ it.金额 }}</td><td>{{ it.折扣 }}</td><td>{{ it.折后金额 }}</td></tr>{{#    }else{ }}<tr><td>{{ it.空间名称 }}</td><td>{{ it.产品名称 }}</td><td>{{ it.报价分类 }}</td><td>{{ it.明细序号 }}</td><td>{{ it.部件名称 }}</td><td>{{ it.宽 }}</td><td>{{ it.深 }}</td><td>{{ it.高 }}</td><td>{{ it.数量 }}</td><td>{{ it.材料 }}</td><td>{{ it.颜色 }}</td><td>{{ it.单位 }}</td><td>{{ it.单位数 }}</td><td>{{ it.工艺费 }}</td><td>{{ it.单价 }}</td><td>{{ it.金额 }}</td><td>{{ it.折扣 }}</td><td>{{ it.折后金额 }}</td></tr>{{#    } }}{{# } }}{{#  }); }}{{#   });    }}<tr><td colspan="16"></td><td>合计</td><td>{{ d[d.length-2][0].总计 }}</td></tr></tbody>

layui模板语言,渲染表格分组合并行相关推荐

LayUI模板引擎渲染数据
前端模板引擎介绍接上节Spring boot项目开发实战--(LayUI实现前后端数据交换与定义方法渲染数据) 模板引擎能简化开发,极大提高效率,小编之前使用过JSP和Thymeleaf,以及pyt ...
用layui 模板，数据表格展示图片,
1.1 layui数据表格展示图片的基础使用 js <script> layui.use(['tree', 'util','upload','table'], function(){var ...
第三百一十节，Django框架，模板语言
第三百一十节,Django框架,模板语言模板语言就是可以将动态数据在html模板渲染的语言一.接收值渲染 locals()函数,写在请求响应render()函数里,可以将逻辑处理函数里的变量传到h ...
第二百五十八节，Tornado框架-逻辑处理get()方法和post()方法，初识模板语言
Tornado框架-逻辑处理get()方法和post()方法,初识模板语言 Tornado框架,逻辑处理里的get()方法,和post()方法 get()方法,处理get方式的请求 post()方法, ...
Layui --- [Mar]给渲染后的表格加CSS样式
为什么要控制样式使用layui生成后的表格的样式有时候,并不能满足我们的需求.因此在渲染完成后,需要自定义类对其操作 Layui表格渲染后一般会出现以下结构分结构如下我把使用layui的tabl ...
Layui中的数据表格渲染
学习前端代码的朋友们应该都有所闻layui这个框架,这是一款遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用的前端 UI 框架.如果有需要可以通过官网下载得到,使用起来也极其方便 ...
iview的表格自定义_Vue中使用iview-UI表格样式修改和使用自定义模板数据渲染相关...
项目前台页面用的iview-UI,下面对表格相关的样式修改和数据渲染进行一下总结数据渲染相关正常渲染直接从教程中拿出来的组件代码: columns中填写的数据必须是一个数组,代表的是表头相关,常 ...
R语言ggplot2可视化：使用patchwork包（直接使用加号+）将一个ggplot2可视化结果和数据表格横向组合起来形成最终结果图
R语言ggplot2可视化:使用patchwork包(直接使用加号+)将一个ggplot2可视化结果和数据表格横向组合起来形成最终结果图目录
layui中的数据表格-自定义模板
layui中的数据表格-自定义模板<script>layui.use('table', function () {var table = layui.table;//第一个实例table. ...
html 开发中遇到的问题，ajax异步传输，layui模板引擎并重新渲染
1.实际中自己遇到的,比较杂乱绑定点击事件绑定enter事件 html A页面跳转到B页面,并传参.取值 layui模板引擎,渲染样式 Ajax 异步传输数据,动态更新内容绑定点击事件 < ...

layui模板语言,渲染表格分组合并行

难点在于layui模板语言代码阅读性不高,html 的table合并仅第一行rowspan后续不需要添加该列,需要进行数量判断,有多行或者仅一行的判断.

1首先对数据进行分组

layui模板语言,渲染表格分组合并行相关推荐

最新文章

热门文章