1. 
       
       
       
       


        1. 
             
             
             
              
             
          狗万官网酒店 > 狗万官网下载 > layui动态加载多表头的病例_javascript艺术

          layui动态加载多表头的病例_javascript艺术

          来源: 2019-09-09 19:44 我来投稿 参与评论
          当天小编就为大家分享一篇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<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动态加载多表头的病例就是小编分享给大家的方方面面内容了,瞩望能送大家一个参考,也愿意大家多多支持脚本的师。

          义务编辑:狗万官网酒店
           
           
          0% (0)
           
           
          0% (0)
          机长评论( ) 请自觉遵守互联网相关的富民政策法规,不准发布色情、暴力、反动的议论。
          地名: 匿名?