layui动态表头的实现代码


Posted in Javascript onAugust 22, 2019

又get到一种思路,不光是layui。

layui动态表头的实现代码

外面这层table,就是用原生拼接的。

@Override
  public List<Map<String, Object>> distribution(String begin,String end,String name,String hospitalCode) {
    HashMap<String, Object> params = new HashMap<String, Object>();
    StringBuffer buf = new StringBuffer();
    
    List<HRateAllotDepartment> hRateAllotDepartment = rateAllotDepartmentDao.getRateDepartment(hospitalCode);
    String str1 = "";
    String str2 = "";
    for(int i=0;i<hRateAllotDepartment.size();i++) {
      str1 +=",sum(`"+hRateAllotDepartment.get(i).getDepartmentName()+"`)`"+hRateAllotDepartment.get(i).getDepartmentName()+"`";
      str2 +=",max(case when e.`name`='"+hRateAllotDepartment.get(i).getDepartmentName()+"' then f.price else 0 end) `"+hRateAllotDepartment.get(i).getDepartmentName()+"`";
    
    }
    
    buf.append("select d.`name`,d.productId_,count(*) renshu,sum(price) total"+str1+" ");
    buf.append(" from ( SELECT b.`name`,b.id productId_ ,d.id,max(b.price) price ");
    buf.append(" "+str2+" FROM ");
    buf.append(" dt_pay_health_order_product a "
        + "JOIN dt_pay_health_order d ON a.orderId = d.id "
        + "JOIN dt_pay_health_product b ON a.productId = b.id ");
    buf.append(" JOIN dt_hospital_health_item c ON b.bizId = c.id "
        + "JOIN dt_hospital_health_order_use g ON g.orderProductId = a.id "
        + "JOIN dt_hospital_rate_allot f ON b.id = f.productId ");
    buf.append(" JOIN dt_hospital_department e ON f.departmentId = e.id where g.createDate>=:begin and g.createDate<=:end and b.name like :name and a.state ='02' group by b.`id`,d.`id` ) d group by d.productId_ WITH ROLLUP ");
    if(begin == null || begin.length() == 0){
      begin = "1970-01-01";
    }
    if(end == null || end.length() == 0){
      end = "2099-01-01";
    }
    params.put("begin",begin);
    params.put("end",end);
    params.put("name","%"+name+"%");
    return this.getMapListByMap(buf.toString(), params); 
    
    
  }

可以看到,一开始是有一个list,这个list是医院医生可以配置的科室,这些科室就是动态的。这样一来后台即可得到动态数据。同理,如果在layui时用到page,在这里返回成page类型即可。接下来再看js

function toList(begin,end,name){
    
    console.log(begin);
    console.log(end);
    
    $.ajax({
      url: basePath + "/biz/hospital/rate/allot/list.do",
      data: {
        begin:begin,
        end:end,
        name:name
      },
      type : 'post',
      dataType : 'json',
      success : function(data) {
          
        var arrayPrice = new Array();

        for(var i=0;i<data.length;i++){
          var arrayPrice1 = new Array();
        for(var key in data[i]){
          
          if(key!="name"&&key!="productId_"&&key!="renshu"&&key!="total"){
            arrayPrice1[key]=data[i][key];
          }  
        }
        arrayPrice.push(arrayPrice1);
      }
        
        var title="";
        var sumCols="";
        var partCols=new Array();
        
        for(var i=0;i<arrayPrice.length;i++){
          
          var partColsStr = "";
          
          for(var key in arrayPrice[i]){
        
            if(i==0&&(arrayPrice[arrayPrice.length-1][key]!=0)){
               title+="<th class='firstTh'>"+key+"(元)</th>";
            }
            if(i==(arrayPrice.length-1)&&(arrayPrice[arrayPrice.length-1][key]!=0)){
              sumCols+="<td class='secondTd'>"+arrayPrice[i][key]+"</td>";
            }
            if(i!=(arrayPrice.length-1)&&(arrayPrice[arrayPrice.length-1][key]!=0)){
              partColsStr += "<td class='thirdTd'>"+arrayPrice[i][key]+"</td>";
              
            }
           
          }
          
          partCols.push(partColsStr);
          
        }

        var sRenshu = 0;
        var stotal = 0;
        
        var tablex = "";
        
        tablex += "<tr class='firstTr'><th class='firstTh'>项目名称</th><th class='firstTh'>检查人数</th><th class='firstTh'>金额(元)</th>"+title+"</tr>";
        
        if(data!=null && data.length>0){
          for(var i=0;i<data.length-1;i++){
            sRenshu+=data[i].renshu;
            stotal+=data[i].total;
          }
          
          tablex += "<tr class='secondTr'><td class='secondTd'>总计</td><td class='secondTd'>"+sRenshu+"</td><td class='secondTd'>"+stotal+"</td>"+sumCols+"</tr>";
          
          for(var i=0;i<data.length-1;i++){
             {
              tablex += "<tr class='thirdTr'><td class='thirdTd'>"+data[i].name+"</td>" +
                  "<td class='thirdTd'>" +
                    "<a style='color:#ff5722' href="+basePath +" rel="external nofollow" rel="external nofollow" /biz/hospital/rate/allot/toPageMx.do?startDate="+$("#startDate").val().toString()
                                              +"&endDate="+$("#endDate").val().toString()
                                              +"&productId_="+data[i].productId_+">"+
                                              data[i].renshu+"</a></td>" +
                  "<td class='thirdTd'>"+data[i].total+ partCols[i] +
                  "</tr>";
            }
          }
          
        }
        $("#table_status").empty();
        $("#table_status").append(tablex);
          
        },
      error : function() {
        layer.msg('系统异常,请联系管理员!',{icon:2,time:2000});
      }
    });
    
    
  }

可以在最上方图看到,有些字段是固定的,但是有些字段是动态的。思路是通过将调用接口返回出来的数据,动态的部分放到一个键值对数组下。这样一来,固定的部分,依然可以用返回的data得到,而动态的部分,用处理的数组循环赋值即可。动态表头就是动态数组的键。数据就是值。

function toList(begin,end,name){
    
    console.log(begin);
    console.log(end);
    
    $.ajax({
      url: basePath + "/biz/hospital/rate/allot/list.do",
      data: {
        begin:begin,
        end:end,
        name:name
      },
      type : 'post',
      dataType : 'json',
      success : function(data) {
          
        var arrayPrice = new Array();

        for(var i=0;i<data.length;i++){
          var arrayPrice1 = new Array();
        for(var key in data[i]){
          
          if(key!="name"&&key!="productId_"&&key!="renshu"&&key!="total"){
            arrayPrice1[key]=data[i][key];
          }  
        }
        arrayPrice.push(arrayPrice1);
      }
        
        var title="";
        var sumCols="";
        var partCols=new Array();
        
        for(var i=0;i<arrayPrice.length;i++){
          
          var partColsStr = "";
          
          for(var key in arrayPrice[i]){
        
            if(i==0&&(arrayPrice[arrayPrice.length-1][key]!=0)){
               title+="<th class='firstTh'>"+key+"(元)</th>";
            }
            if(i==(arrayPrice.length-1)&&(arrayPrice[arrayPrice.length-1][key]!=0)){
              sumCols+="<td class='secondTd'>"+arrayPrice[i][key]+"</td>";
            }
            if(i!=(arrayPrice.length-1)&&(arrayPrice[arrayPrice.length-1][key]!=0)){
              partColsStr += "<td class='thirdTd'>"+arrayPrice[i][key]+"</td>";
              
            }
           
          }
          
          partCols.push(partColsStr);
          
        }

        var sRenshu = 0;
        var stotal = 0;
        
        var tablex = "";
        
        tablex += "<tr class='firstTr'><th class='firstTh'>项目名称</th><th class='firstTh'>检查人数</th><th class='firstTh'>金额(元)</th>"+title+"</tr>";
        
        if(data!=null && data.length>0){
          for(var i=0;i<data.length-1;i++){
            sRenshu+=data[i].renshu;
            stotal+=data[i].total;
          }
          
          tablex += "<tr class='secondTr'><td class='secondTd'>总计</td><td class='secondTd'>"+sRenshu+"</td><td class='secondTd'>"+stotal+"</td>"+sumCols+"</tr>";
          
          for(var i=0;i<data.length-1;i++){
             {
              tablex += "<tr class='thirdTr'><td class='thirdTd'>"+data[i].name+"</td>" +
                  "<td class='thirdTd'>" +
                    "<a style='color:#ff5722' href="+basePath +" rel="external nofollow" rel="external nofollow" /biz/hospital/rate/allot/toPageMx.do?startDate="+$("#startDate").val().toString()
                                              +"&endDate="+$("#endDate").val().toString()
                                              +"&productId_="+data[i].productId_+">"+
                                              data[i].renshu+"</a></td>" +
                  "<td class='thirdTd'>"+data[i].total+ partCols[i] +
                  "</tr>";
            }
          }
          
        }
        $("#table_status").empty();
        $("#table_status").append(tablex);
          
        },
      error : function() {
        layer.msg('系统异常,请联系管理员!',{icon:2,time:2000});
      }
    });
    
    
  }

这块是name这些的是固定的,就排除掉,然后将数据放到arrayPrice1下再push到数组下。tablex就是表格的html。当时拼接的是分两步,先是表头,然后是数据。有个总计,后来在sql下加了WITH ROLLUP就得到了。

for(var key in arrayPrice[i]){

    
        if(i==0&&(arrayPrice[arrayPrice.length-1][key]!=0)){
           title+="<th class='firstTh'>"+key+"(元)</th>";
        }
        if(i==(arrayPrice.length-1)&&(arrayPrice[arrayPrice.length-1][key]!=0)){
          sumCols+="<td class='secondTd'>"+arrayPrice[i][key]+"</td>";
        }
        if(i!=(arrayPrice.length-1)&&(arrayPrice[arrayPrice.length-1][key]!=0)){
          partColsStr += "<td class='thirdTd'>"+arrayPrice[i][key]+"</td>";
          
        }
       
      }

这块就是动态的数据,title表头,sumCols总计,partColsStr具体数据,加到tablex下就行。以上就是原生的思路。

layui动态表头的实现代码

这块table用到了layui,当时也是看着这个layui动态设置的思路去写的原生。主要思路是:cols是一个数组,通过ajax得到数据后放到数组下,再放到cols下即可。

$.ajax({
  url: basePath + "/biz/hospital/rate/allot/department/getDepartment.do",
  data: {
  
  },
  type : 'post',
  dataType : 'json',
  success : function(data) {
    mycols[0] = {field : 'nameTrue', title:"姓名", align:'center',width:'120'};
    mycols[1] = {field : 'telephoneTrue', title:'支付手机号', align:'center',width:'120'};
    mycols[2] = {field : 'orderNO', title:'订单号', align:'center',width:'120'};
    mycols[3] = {field : 'createDate', title:'订单创建时间', align:'center',width:'120'};
    mycols[4] = {field : 'modifyDate', title:'订单使用时间', align:'center',width:'120'};
    mycols[5] = {field : 'price', title:'支付金额(元)', align:'center',width:'120'};
    
    for (var i = 0;i < data.length; i++){ 
      var obj = data[i].departmentName;
      if(obj!=0){
        mycols[i+6] = {field : obj, title:obj+"(元)", align:'center',width:'120'};
      }
      
      }
    
  console.log(mycols);
  
  reload();
  
  },
  error : function() {
    layer.msg('系统异常,请联系管理员!',{icon:2,time:2000});
  }
});

以上是ajax调用后处理的数组。下面这些就是table。reload();就是重新渲染。

var options = {
      url: basePath + "/biz/hospital/rate/allot/list_mx.do",
      method: 'post',
      where:{
        begin:$("#startDate").val().toString(),
        end:end,
        productId_:$("#productId_").val().toString(),
        orderNO:$("#qorderNO").val().toString(),
        name:$("#qname").val().toString()
      },
      //分页请求参数
      request:{
        pageName: 'pageIndex', //页码
        limitName: 'limit' //每页多少数据
      },
      //返回的数据格式
      response:{
         statusName: 'status', //数据状态的字段名称,默认:code
         statusCode: 200, //成功的状态码,默认:0
         msgName: 'message', //状态信息的字段名称,默认:msg
         countName: 'total', //数据总数的字段名称,默认:count
         dataName: 'data' //数据列表的字段名称,默认:data
      },
      //每页10条数据
      limit: 10,
      
      //加载时出现加载条
      loading: true,
      elem: '#data_table',
      cols: [
        mycols
       ],
       

       
      id: 'dataTable',
      page: true,
      };
  
  //方法级渲染
  table.render(options);

function reload(){
    
    date = new Date($("#endDate").val());
    
    date=date.setDate(date.getDate()+1);
    date=new Date(date);
  
    datemonth=date.getMonth()+1;   //获取当前月份(0-11,0代表1月)

    end=date.getFullYear()+"-"+datemonth+"-"+date.getDate();
    
    //options.where.departmentId = $("#departmentId").val();
    options.where.begin = $("#startDate").val();
    options.where.end = end;
    options.where.orderNO = $("#qorderNO").val();;
    options.where.name = $("#qname").val();;
     
    table.reload("dataTable",options);
    
  }

可以看到

cols: [
        mycols
       ],

这个就是动态数据。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE和Firefox下javascript的兼容写法小结
Dec 10 Javascript
JavaScript 直接操作本地文件的实现代码
Dec 01 Javascript
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
Oct 11 Javascript
JQGrid的用法解析(列编辑,添加行,删除行)
Nov 08 Javascript
jQuery实现多级联动下拉列表查询框
Jan 18 Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
Apr 18 Javascript
angular分页指令操作
Jan 09 Javascript
canvas绘制多边形
Feb 24 Javascript
使用重写url机制实现验证码换一张功能
Aug 01 Javascript
详解vue静态资源打包中的坑与解决方案
Feb 05 Javascript
Vue数据驱动表单渲染,轻松搞定form表单
Jul 19 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
Sep 11 Javascript
深入理解令牌认证机制(token)
Aug 22 #Javascript
聊聊鉴权那些事(推荐)
Aug 22 #Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
Aug 22 #Javascript
vue使用高德地图根据坐标定位点的实现代码
Aug 22 #Javascript
ES6基础之字符串和函数的拓展详解
Aug 22 #Javascript
node实现爬虫的几种简易方式
Aug 22 #Javascript
vue router动态路由设置参数可选问题
Aug 21 #Javascript
You might like
smarty模板引擎从php中获取数据的方法
2015/01/22 PHP
[原创]CI(CodeIgniter)简单统计访问人数实现方法
2016/01/19 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
2007/06/29 Javascript
jquery调用wcf并展示出数据的方法
2011/07/07 Javascript
JavaScript中“基本类型”之争小结
2013/01/03 Javascript
jQuery使用之处理页面元素用法实例
2015/01/19 Javascript
jquery简单实现幻灯片的方法
2015/08/03 Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
2015/09/04 Javascript
jQuery防止重复绑定事件的解决方法
2016/05/14 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
2016/12/26 Javascript
写给vue新手们的vue渲染页面教程
2017/09/01 Javascript
jquery 一键复制到剪切板的实例
2017/09/20 jQuery
nodejs 如何手动实现服务器
2018/08/20 NodeJs
微信小程序实现拍照画布指定区域生成图片
2019/07/18 Javascript
原生javascript自定义input[type=radio]效果示例
2019/08/27 Javascript
解决layer弹出层中表单不起作用的问题
2019/09/09 Javascript
前端如何实现动画过渡效果
2021/02/05 Javascript
在Python的web框架中中编写日志列表的教程
2015/04/30 Python
Python3的urllib.parse常用函数小结(urlencode,quote,quote_plus,unquote,unquote_plus等)
2016/09/18 Python
5个很好的Python面试题问题答案及分析
2018/01/19 Python
Python安装pycurl失败的解决方法
2018/10/15 Python
python实现多进程通信实例分析
2019/09/01 Python
JOSEPH官网:英国奢侈时尚品牌
2018/01/31 全球购物
西班牙灯具网上商店:Lampara.es
2018/06/05 全球购物
LN-CC英国:伦敦时尚生活的缩影
2019/09/01 全球购物
Farfetch中文官网:奢侈品牌时尚购物平台
2020/03/15 全球购物
经典c++面试题四
2015/05/14 面试题
环保倡议书500字
2014/05/15 职场文书
环境日宣传活动总结
2014/07/09 职场文书
土木工程专业本科生求职信
2014/10/01 职场文书
酒店办公室主任岗位职责
2015/04/01 职场文书
2015年学生管理工作总结
2015/05/26 职场文书
英语版自我评价,35句话轻松搞定
2019/10/08 职场文书
Android开发手册自定义Switch开关按钮控件
2022/06/10 Java/Android