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 相关文章推荐
JavaScript闭包 懂不懂由你反正我是懂了
Oct 21 Javascript
简述jQuery ajax的执行顺序
Jan 05 Javascript
莱鸟介绍javascript onclick事件
Jan 06 Javascript
微信小程序 wxapp视图容器 view详解
Oct 31 Javascript
jQuery中ajax错误调试分析
Dec 01 Javascript
jQuery内存泄露解决办法
Dec 13 Javascript
EsLint入门学习教程
Feb 17 Javascript
浅谈angular.js跨域post解决方案
Aug 30 Javascript
Angular4绑定html内容出现警告的处理方法
Nov 03 Javascript
详解小程序如何改变onLoad的执行时机
Nov 01 Javascript
JS实现简单移动端鼠标拖拽
Jul 23 Javascript
Canvas三种动态画圆实现方法说明(小结)
Apr 16 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脚本的10个技巧(5)
2006/10/09 PHP
PHP模拟http请求的方法详解
2016/11/09 PHP
php简单生成一组与多组随机字符串的方法
2017/05/09 PHP
PHP Cli 模式设置进程名称的方法
2019/06/12 PHP
PHP创建XML接口示例
2019/07/04 PHP
如何使用Jquery获取Form表单中被选中的radio值
2013/08/09 Javascript
js有序数组的连接问题
2013/10/01 Javascript
如何将网页表格内容导入excel
2014/02/18 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
2014/04/10 Javascript
jquery form 隐藏的input 选择
2014/04/29 Javascript
浅析Javascript中“==”与“===”的区别
2014/12/23 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
2015/12/03 Javascript
JavaScript知识点总结之如何提高性能
2016/01/15 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
2017/01/04 Javascript
详解webpack打包后如何调试的方法步骤
2018/11/07 Javascript
小程序分享模块超级详解(推荐)
2019/04/10 Javascript
解决layui表格内文本超出隐藏的问题
2019/09/12 Javascript
python使用calendar输出指定年份全年日历的方法
2015/04/04 Python
Python中的rfind()方法使用详解
2015/05/19 Python
Selenium定时刷新网页的实现代码
2018/10/31 Python
Python版名片管理系统
2018/11/30 Python
Python OpenCV对本地视频文件进行分帧保存的实例
2019/01/08 Python
不归路系列:Python入门之旅-一定要注意缩进!!!(推荐)
2019/04/16 Python
python实现视频分帧效果
2019/05/31 Python
Python算法中的时间复杂度问题
2019/11/19 Python
Python的赋值、深拷贝与浅拷贝的区别详解
2020/02/12 Python
amazeui模态框弹出后立马消失并刷新页面
2020/08/19 HTML / CSS
美国钻石商店:Zales
2016/11/20 全球购物
英国电动工具购买网站:Anglia Tool Centre
2017/04/25 全球购物
加拿大户外探险购物网站:SAIL
2020/06/27 全球购物
电子商务专业个人的自我评价
2013/12/19 职场文书
记者岗位职责
2014/01/06 职场文书
上课睡觉检讨书
2014/01/28 职场文书
捐款感谢信
2015/01/20 职场文书
Python 实现定积分与二重定积分的操作
2021/05/26 Python
前端框架ECharts dataset对数据可视化的高级管理
2022/12/24 Javascript