热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

layui动态加载多表头的实例

今天小编就为大家分享一篇layui动态加载多表头的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

效果

动态生成header

返回的header数据:格式为数组,因为是二级表头,所以是二元数组

后台动态拼接数组,返回数组后把两个数组push到一个空数组中就可以组成一个动态的多级表头

var header= [];
var header1= [{field: 'merchantName', title: '商户名称', width: 140, rowspan: 2},{field: 'merchantSubName', title: '子商户名称', width: 140, rowspan: 2}];
var header2= [];
$.ajax({
  type: "get",
  url: "",
  data: {id: 1,type:type},
  success: function (data) {
   if (data.code === 0){
    $.each(data.data[0], function (index, obj) {
     header1.push({align: 'center', title: obj, colspan:3});
    });
    $.each(data.data[1], function (index, obj) {
     //拼接成官网所需要的数组
     header2.push({field: obj.field1, title: obj.title1 });
     header2.push({field: obj.field2, title: obj.title2 });
     header2.push({field: obj.field3, title: obj.title3 });
    });
    header.push(header1);
    header.push(header2);
    table.reload('setList', {
     url: '' //数据接口
     , cols: header
    });
    header= [];
    header1= [{field: 'merchantName', title: '商户名称', width: 140, rowspan: 2},{field: 'merchantSubName', title: '子商户名称', width: 140, rowspan: 2}];
    header2= [];
   }
  }
 });
 table.render({
  id: 'setList',
  elem: '#setList'
  , url: '' //数据接口
  , cellMinWidth: 80
  , limit: 10//每页默认数
  , limits: [10, 20, 30, 40, 50, 100]
  , page: { //支持传入 laypage 组件的所有参数(某些参数除外,如:jump/elem) - 详见文档
   layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'] //自定义分页布局
   , curr: 1 //设定初始在第 1 页
  }
  ,where: {
   id:id,
   type:type
  }
  , cols: header
 });

后台动态生成多级表头

public AjaxResult header(@RequestParam Map map) {
  Long id = Long.valueOf((String )map.get("id"));
  String productName = map.get("productName")==null?"":(String)map.get("productName");
  String type = map.get("type")==null?"":(String)map.get("type");

  if("".equals(productName) ){
   if(("0").equals(type)){
    List list =statisticsFeign.getProduct();
    productName = list.get(0).getProductName();
   }else{
    Long[] ids =settlementFeign.getMerch(id);
    String mid= org.apache.commons.lang.StringUtils.join(ids, ",");
    List list =statisticsFeign.getProductByMID(mid);
    productName = list.get(0).getProductName();
   }
  }

  String[] str = productName.split(",");
  List list = new ArrayList();
  List list1 = new ArrayList();
  List list2 = new ArrayList();
  for (int i = 0; i 

表格数据是通过统计得出的数据,统计的数据也是通过循环拼接sql,统计命名要和表头的一致

public class Messge {
 /** 列名1 **/
 private String field1;
 /** 对应说明1(成功笔数) **/
 private String title1;
 /** 列名2 **/
 private String field2;
 /** 对应说明2(扣减金额) **/
 private String title2;
 /** 列名3 **/
 private String field3;
 /** 对应说明3(扣减条数)**/
 private String title3;

代码写的丑了点,还是整出来了。

以上这篇layui动态加载多表头的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。


推荐阅读
  • 在当前众多持久层框架中,MyBatis(前身为iBatis)凭借其轻量级、易用性和对SQL的直接支持,成为许多开发者的首选。本文将详细探讨MyBatis的核心概念、设计理念及其优势。 ... [详细]
  • 本文探讨了领域驱动设计(DDD)的核心概念、应用场景及其实现方式,详细介绍了其在企业级软件开发中的优势和挑战。通过对比事务脚本与领域模型,展示了DDD如何提升系统的可维护性和扩展性。 ... [详细]
  • 本文详细介绍如何使用Python进行配置文件的读写操作,涵盖常见的配置文件格式(如INI、JSON、TOML和YAML),并提供具体的代码示例。 ... [详细]
  • 1:有如下一段程序:packagea.b.c;publicclassTest{privatestaticinti0;publicintgetNext(){return ... [详细]
  • PHP 5.2.5 安装与配置指南
    本文详细介绍了 PHP 5.2.5 的安装和配置步骤,帮助开发者解决常见的环境配置问题,特别是上传图片时遇到的错误。通过本教程,您可以顺利搭建并优化 PHP 运行环境。 ... [详细]
  • 深入理解 SQL 视图、存储过程与事务
    本文详细介绍了SQL中的视图、存储过程和事务的概念及应用。视图为用户提供了一种灵活的数据查询方式,存储过程则封装了复杂的SQL逻辑,而事务确保了数据库操作的完整性和一致性。 ... [详细]
  • 构建基于BERT的中文NL2SQL模型:一个简明的基准
    本文探讨了将自然语言转换为SQL语句(NL2SQL)的任务,这是人工智能领域中一项非常实用的研究方向。文章介绍了笔者在公司举办的首届中文NL2SQL挑战赛中的实践,该比赛提供了金融和通用领域的表格数据,并标注了对应的自然语言与SQL语句对,旨在训练准确的NL2SQL模型。 ... [详细]
  • 本文详细介绍了HTML中标签的使用方法和作用。通过具体示例,解释了如何利用标签为网页中的缩写和简称提供完整解释,并探讨了其在提高可读性和搜索引擎优化方面的优势。 ... [详细]
  • 数据库内核开发入门 | 搭建研发环境的初步指南
    本课程将带你从零开始,逐步掌握数据库内核开发的基础知识和实践技能,重点介绍如何搭建OceanBase的开发环境。 ... [详细]
  • 本文深入探讨 MyBatis 中动态 SQL 的使用方法,包括 if/where、trim 自定义字符串截取规则、choose 分支选择、封装查询和修改条件的 where/set 标签、批量处理的 foreach 标签以及内置参数和 bind 的用法。 ... [详细]
  • 本文详细介绍了 Java 中 org.apache.qpid.server.model.VirtualHost 类的 closeAsync() 方法,提供了具体的代码示例和应用场景。通过这些示例,读者可以更好地理解和使用该方法。 ... [详细]
  • 本文详细介绍了 Flink 和 YARN 的交互机制。YARN 是 Hadoop 生态系统中的资源管理组件,类似于 Spark on YARN 的配置方式。我们将基于官方文档,深入探讨如何在 YARN 上部署和运行 Flink 任务。 ... [详细]
  • 本文详细介绍如何通过修改配置文件来隐藏Apache、Nginx和PHP的版本号,从而增强网站的安全性。我们将提供具体的配置步骤,并解释这些设置的重要性。 ... [详细]
  • 本文详细介绍了Java中org.apache.logging.log4j.spi.AbstractLogger类的logIfEnabled()方法,包括其功能、参数说明及实际代码示例。通过这些示例,读者可以更好地掌握如何在项目中使用该方法进行日志记录。 ... [详细]
  • PHP 过滤器详解
    本文深入探讨了 PHP 中的过滤器机制,包括常见的 $_SERVER 变量、filter_has_var() 函数、filter_id() 函数、filter_input() 函数及其数组形式、filter_list() 函数以及 filter_var() 和其数组形式。同时,详细介绍了各种过滤器的用途和用法。 ... [详细]
author-avatar
JasonXie
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有