layui动态加载多表头的实例


Posted in Javascript onSeptember 05, 2019

效果

layui动态加载多表头的实例

layui动态加载多表头的实例

动态生成header

layui动态加载多表头的实例

返回的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<String, Object> 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<ProductInfo> list =statisticsFeign.getProduct();
    productName = list.get(0).getProductName();
   }else{
    Long[] ids =settlementFeign.getMerch(id);
    String mid= org.apache.commons.lang.StringUtils.join(ids, ",");
    List<MerchantProductRate> 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 < str.length; i++) {
   list1.add(str[i]);
   list2.add(new Messge("sumTotal"+(i+1),"成功笔数","sumCost"+(i+1),"扣减金额","sumBars"+(i+1),"扣减条数"));
  }
  list.add(list1);
  list.add(list2);
  return new AjaxResult(0,"获取数据成功",list);
 }

表格数据是通过统计得出的数据,统计的数据也是通过循环拼接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动态加载多表头的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
拖拉表格的JS函数
Nov 20 Javascript
javascript中字符串拼接需注意的问题
Jul 13 Javascript
Jquery中删除元素的实现代码
Dec 29 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
Dec 15 Javascript
jQuery动画效果图片轮播特效
Jan 12 Javascript
jquery ui dialog替代confirm实例分析
Jan 25 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
Apr 01 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
Jul 26 Javascript
vue 项目如何引入微信sdk接口的方法
Dec 18 Javascript
Vue页面骨架屏注入方法
May 13 Javascript
CSS3 动画卡顿性能优化的完美解决方案
Sep 20 Javascript
JavaScript获取URL参数的方法分享
Apr 07 Javascript
如何阻止小程序遮罩层下方图层滚动
Sep 05 #Javascript
layui多iframe页面控制定时器运行的方法
Sep 05 #Javascript
解决layer.msg 不居中 ifram中的问题
Sep 05 #Javascript
JS中比Switch...Case更优雅的多条件判断写法
Sep 05 #Javascript
layer实现弹出层自动调节位置
Sep 05 #Javascript
vue使用i18n实现国际化的方法详解
Sep 05 #Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
Sep 05 #Javascript
You might like
PHP新手上路(九)
2006/10/09 PHP
php Try Catch异常测试
2009/03/01 PHP
浅析application/x-www-form-urlencoded和multipart/form-data的区别
2014/06/22 PHP
浅析PHP中Session可能会引起并发问题
2015/07/23 PHP
PHP中strncmp()函数比较两个字符串前2个字符是否相等的方法
2016/01/07 PHP
功能强大的php分页函数
2016/07/20 PHP
神奇的7个jQuery 3D插件整理
2011/01/06 Javascript
javascript 弹出窗口中是否显示地址栏的实现代码
2011/04/14 Javascript
javascript开发随笔二 动态加载js和文件
2011/11/25 Javascript
表单元素的submit()方法和onsubmit事件应用概述
2013/02/01 Javascript
JavaScript回调(callback)函数概念自我理解及示例
2013/07/04 Javascript
jquery实现微博文字输入框 输入时显示输入字数 效果实现
2013/07/12 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
2014/07/17 Javascript
jQuery实用技巧必备(上)
2015/11/02 Javascript
一次$.getJSON不执行的简单记录
2016/07/19 Javascript
JavaScript实战之带收放动画效果的导航菜单
2016/08/16 Javascript
JavaScript原生数组Array常用方法
2017/04/06 Javascript
详解Vue 方法与事件处理器
2017/06/20 Javascript
vue中接口域名配置为全局变量的实现方法
2018/09/20 Javascript
移动端手指操控左右滑动的菜单
2019/09/08 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
2020/03/06 Javascript
Python自动化测试工具Splinter简介和使用实例
2014/05/13 Python
Python中使用MELIAE分析程序内存占用实例
2015/02/18 Python
Python 操作文件的基本方法总结
2017/08/10 Python
Python3中类、模块、错误与异常、文件的简易教程
2017/11/20 Python
Python实现基于KNN算法的笔迹识别功能详解
2018/07/09 Python
对Python中实现两个数的值交换的集中方法详解
2019/01/11 Python
DataFrame:通过SparkSql将scala类转为DataFrame的方法
2019/01/29 Python
django settings.py 配置文件及介绍
2019/07/15 Python
django中使用Celery 布式任务队列过程详解
2019/07/29 Python
python try...finally...的实现方法
2020/11/25 Python
建筑设计学生的自我评价
2014/01/16 职场文书
社团活动总结范文
2014/04/26 职场文书
婚前协议书标准版
2014/10/19 职场文书
2015年综治宣传月活动总结
2015/03/25 职场文书
Nginx使用Lua模块实现WAF的原理解析
2021/09/04 Servers