使用layui怎么实现一个动态表头

这期内容当中小编将会给大家带来有关使用layui怎么实现一个动态表头，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

layui是什么

layui是一款采用自身模块规范编写的前端UI框架，它遵循原生HTML/CSS/JS的书写与组织形式，门槛极低，适合新手，并且它还提供了丰富的内置模块，他们皆可通过模块化的方式按需加载，从核心代码到API的每一处细节都经过精心雕琢，非常适合界面的快速开发，能够作为PC网页端后台系统与前台界面的速成开发方案。

@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下就行。以上就是原生的思路。

这块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        ],

上述就是小编为大家分享的使用layui怎么实现一个动态表头了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注亿速云行业资讯频道。