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 Global对象
Aug 13 Javascript
JavaScript 原型与继承说明
Jun 09 Javascript
jQuery之选择组件的深入解析
Jun 19 Javascript
JavaScript清空数组元素的两种方法简单比较
Jul 10 Javascript
Vue.js每天必学之Class与样式绑定
Sep 05 Javascript
利用Vue.js指令实现全选功能
Sep 08 Javascript
Bootstrap常用组件学习(整理)
Mar 24 Javascript
js自定义Tab选项卡效果
Jun 05 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
Mar 06 Javascript
vue中引入mxGraph的步骤详解
May 17 Javascript
vue自定义表单生成器form-create使用详解
Jul 19 Javascript
JS实现4位随机验证码
Oct 19 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
WinXP + Apache +PHP5 + MySQL + phpMyAdmin安装全功略
2006/07/09 PHP
一个分页的论坛
2006/10/09 PHP
PHP伪造referer实例代码
2008/09/20 PHP
php加密算法之实现可逆加密算法和解密分享
2014/01/21 PHP
ThinkPHP开发框架函数详解:C方法
2015/08/14 PHP
ECshop 迁移到 PHP7版本时遇到的兼容性问题
2016/02/15 PHP
Laravel5权限管理方法详解
2016/07/26 PHP
document.open() 与 document.write()的区别
2007/08/13 Javascript
jquery重复提交请求的原因浅析
2014/05/23 Javascript
JavaScript简介
2015/02/15 Javascript
jquery实现弹出层效果实例
2015/05/19 Javascript
JQuery鼠标移到小图显示大图效果的方法
2015/06/10 Javascript
json格式数据的添加,删除及排序方法
2016/01/21 Javascript
React Native实现简单的登录功能(推荐)
2016/09/19 Javascript
JS封装的选项卡TAB切换效果示例
2016/09/20 Javascript
JavaScript仿支付宝6位数字密码输入框
2016/12/29 Javascript
Angular2 PrimeNG分页模块学习
2017/01/14 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
2017/03/15 Javascript
Vue中的无限加载vue-infinite-loading的方法
2018/04/08 Javascript
Element ui 下拉多选时新增一个选择所有的选项
2019/08/21 Javascript
微信小程序sessionid不一致问题解决
2019/08/30 Javascript
React中获取数据的3种方法及优缺点
2020/02/18 Javascript
javascript+Canvas实现画板功能
2020/06/23 Javascript
Vue数组响应式操作及高阶函数使用代码详解
2020/08/01 Javascript
Vue页面渲染中key的应用实例教程
2021/01/12 Vue.js
如何基于python操作excel并获取内容
2019/12/24 Python
python 实现在无序数组中找到中位数方法
2020/03/03 Python
python中的yield from语法快速学习
2020/11/06 Python
Tory Burch德国官网:美国时尚生活品牌
2018/01/03 全球购物
《忆江南》教学反思
2014/04/07 职场文书
希特勒的演讲稿
2014/05/23 职场文书
学校教师读书活动总结
2014/07/08 职场文书
2016高考寄语或鼓励的话语
2015/12/04 职场文书
python 批量压缩图片的脚本
2021/06/02 Python
Redis调用Lua脚本及使用场景快速掌握
2022/03/16 Redis
Android在Sqlite3中的应用及多线程使用数据库的建议
2022/04/24 Java/Android