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表格分页实现代码
Sep 18 Javascript
Script的加载方法小结
Jan 12 Javascript
学习AngularJs:Directive指令用法(完整版)
Apr 26 Javascript
vue使用stompjs实现mqtt消息推送通知
Jun 22 Javascript
Vue DevTools调试工具的使用
Dec 05 Javascript
Vue实现动态创建和删除数据的方法
Mar 17 Javascript
js中位运算的运用实例分析
Dec 11 Javascript
js中arguments对象的深入理解
May 14 Javascript
深入理解 TypeScript Reflect Metadata
Dec 12 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
Mar 09 Javascript
Postman内建变量常用方法实例解析
Jul 28 Javascript
从表单校验看JavaScript策略模式的使用详解
Oct 17 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提示无法加载或mcrypt没有找到 PHP 扩展 mbstring解决办法
2012/03/27 PHP
phpExcel导出大量数据出现内存溢出错误的解决方法
2013/02/28 PHP
PHP图像裁剪缩略裁切类源码及使用方法
2016/01/07 PHP
jQuery在iframe中无法弹出对话框的解决方法
2014/01/12 Javascript
JavaScript输入邮箱自动提示实例代码
2014/01/13 Javascript
Javascript动态创建div的方法
2015/02/09 Javascript
javascript显式类型转换实例分析
2015/04/25 Javascript
jquery实现可点击伸缩与展开的菜单效果代码
2015/08/31 Javascript
Bootstrap框架实现广告轮播效果
2016/11/28 Javascript
快速解决vue-cli不能初始化webpack模板的问题
2018/03/20 Javascript
React如何解决fetch跨域请求时session失效问题
2018/11/02 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
2018/11/26 Javascript
JS将时间秒转换成天小时分钟秒的字符串
2019/07/10 Javascript
vue+element表格导出为Excel文件
2019/09/26 Javascript
[08:04]TI4西雅图DOTA2前线报道 海涛探访各路人马
2014/07/09 DOTA
[09:13]DOTA2-DPC中国联赛 正赛 Ehome vs Magma 选手采访 1月19日
2021/03/11 DOTA
Python写入数据到MP3文件中的方法
2015/07/10 Python
如何在python中使用selenium的示例
2017/12/26 Python
python自动重试第三方包retrying模块的方法
2018/04/24 Python
centos6.5安装python3.7.1之后无法使用pip的解决方案
2019/02/14 Python
Python中@property的理解和使用示例
2019/06/11 Python
Python实现一个数组除以一个数的例子
2019/07/20 Python
获取Pytorch中间某一层权重或者特征的例子
2019/08/17 Python
Flask之pipenv虚拟环境的实现
2019/11/26 Python
Django 拼接两个queryset 或是两个不可以相加的对象实例
2020/03/28 Python
俄罗斯化妆品和香水网上商店:Iledebeaute
2019/01/03 全球购物
Bravofly德国:预订廉价航班和酒店
2019/09/22 全球购物
Bed Bath & Beyond加拿大官网:购买床上用品、浴巾、厨房电器等
2019/10/04 全球购物
vue实现倒计时功能
2021/03/24 Vue.js
迟到检讨书1000字
2014/01/15 职场文书
户外亲子活动策划方案
2014/02/07 职场文书
优秀部门获奖感言
2014/02/14 职场文书
代理协议书范本
2014/04/22 职场文书
公安局班子个人对照检查材料思想汇报
2014/10/09 职场文书
安全主题班会教案
2015/08/12 职场文书
分享7个 Python 实战项目练习
2022/03/03 Python