layui动态表头的实现代码

又得到到一种思路，不光是拉威。

外面这层桌子，就是用原生拼接的。

@覆盖公共列表映射字符串，对象分布(字符串开头，字符串结尾，字符串名称，字符串医院代码){ HashMapString，Object params=new HashMapString，Object()；StringBuffer buf=new StringBuffer()；listhratellotdpartment hratellotdpartment=rateallatedpartment Dao。getrate部门(医院代码);字符串str1=字符串str 2=for(int I=0；ihrateallotdepartment。size()；i ) { str1='，sum(` ' hratellotdpartment。得到(我).get department name()' `()` ' hratellotdpartment。得到(我).getdepartment name()“`”；str2='，max(e . name `=' hratellotdpartment。得到(我)时的情况)。getDepartmentName()“”然后f . price else 0 end)` ' hratelotdpartment。得到(我).getdepartment name()“`”；} buf.append('选择d.`name `,d.productId_，count(*)庶人，sum(price)total ' str 1 ' ')；buf . append(' from(SELECT b . name `，b.id productId_，d.id，max(b . price)price ')；buf。追加('字符串2 ' FROM ')；buf。追加(' dt _ pay _ health _ order _ product a ' ' JOIN dt _ pay _ health _ order d ON a . order id=d . id ' ' JOIN dt _ pay _ health _ product b ON a . ProductID=b . id ')；buf。追加(' JOIN dt _ hospital _ health _ item c ON b . bizid=c . id ' ' JOIN dt _ hospital _ health _ order _ use g ON g . order ProductiD=a . id ' ' JOIN dt _ hospital _ rate _ allot f ON b . id=f . ProductiD ')；buf。追加(' JOIN dt _ hospital _ department e ON f . department id=e . id其中g.createDate=:begin和g.createDate=:end和b .名称像：name和a . state=' 02 '按b . id `，d . id `)分组d按d . ProductiD _ WITH ROLLOW)分组；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 ' % ')；返回这个。getmaplistbymap(buf。tostring()，params)；}可以看到，一开始是有一个列表，这个目录是医院医生可以配置的科室，这些科室就是动态的。这样一来后台即可得到动态数据。同理，如果在获得时用到页面，在这里返回成页类型即可。接下来再看射流研究…

函数toList(开始、结束、名称){ console.log(开始);控制台。日志(结束)；$.Ajax({ URL :基本路径'/biz/医院/费率/分配/列表。do '，data: { begin:begin，end:end，name:name }，type : 'post '，dataType : 'json '，success 3360 function(data){ var arrayPrice=new Array()；for(var I=0；idata . lengthi){ var Array price 1=new Array()；用于(数据[i]中的定义变量键){ if(key！='name '键！='productId_ '键！='庶人'钥匙！=' total '){ Arrayprice 1[key]=data[I][key]；} } arrayprice。push(array price 1)；} var title=var sumCols=var partCols=new Array()；for(var I=0；iarayprice . lengthi){ var partColsStr=' '；用于(Arrayprice[I]中的定义变量键){ if(I==0(Arrayprice[Arrayprice]。length-1][key]！=0)){ title=' th class=' first th ' ' key '(元)/th '；} if(I==(Arrayprice。length-1)(array price[array price]。length-1][key]！=0)){ sumCols=' TD class=' second TD ' ' Arrayprice[I][key]'/TD '；}如果（我！=(Arrayprice。length-1)(array price[array price]。length-1][key]！=0)){ partColsStr=' TD class=' thirdTd ' ' Arrayprice[I][key]'/TD '；} } partcols。push(partColsStr)；} var sren Shu=0；var stotal=0；var tablex=tablex=' tr class=' first tr ' th class=' first th '项目名称th class=' firstTh '检查人数th class=' firstTh '金额（元)/th ' title '/tr '；如果(数据！=空数据。长度0){ for(var I=0；伊达塔。长度-1；i ){ sRenshu=data[i].庶人；stotal=数据[i].总计；} tablex=' tr class=' SeCOnd tr ' TD class=' SeCOnd TD '总计/tdtd class=' SeCOnd TD ' ' SrEnshu '/tdtd class=' SeCOnd TD ' ' stotal '/TD ' SumCols '/tr '；for(var I=0；伊达塔。长度-1；I){ { tablex=' tr class=' Thirdtr ' TD class=' Thirdtd ' '数据[i].name/' TD ' ' TD class=' thirdTd ' ' ' a style=' color : # ff 5722 ' href=' base path ' rel=' external no follow ' rel=' external no follow '/biz/hospital/rate/allot/topa gemx。做什么？开始日期=' $(' #开始日期')。val().toString()“结束日期=”$(“#结束日期”).val().toString()"ProductID _="数据[i].productId_ ' '数据[i].庶人/a/td' 'td class='thirdTd ' '数据[i].总零件号[I]'/tr '；} } } $('#table_status ').empty()；$('#table_status ').追加(表x)；},错误： function() { layer.msg('系统异常，请联系管理员！{icon:2，time :2000 })；} });}可以在最上方图看到，有些字段是固定的，但是有些字段是动态的。思路是通过将调用接口返回出来的数据，动态的部分放到一个键值对数组下。这样一来，固定的部分，依然可以用返回的数据得到，而动态的部分，用处理的数组循环赋值即可。动态表头就是动态数组的键。数据就是值。

函数toList(开始、结束、名称){ console.log(开始);控制台。日志(结束)；$.Ajax({ URL :基本路径'/biz/医院/费率/分配/列表。do '，data: { begin:begin，end:end，name:name }，type : 'post '，dataType : 'json '，success 3360 function(data){ var arrayPrice=new Array()；for(var I=0；idata . lengthi){ var Array price 1=new Array()；用于(数据[i]中的定义变量键){ if(key！='name '键！='productId_ '键！='庶人'钥匙！=' total '){ Arrayprice 1[key]=data[I][key]；} } arrayprice。push(array price 1)；} var title=var sumCols=var partCols=new Array()；for(var I=0；iarayprice . lengthi){ var partColsStr=' '；用于(Arrayprice[I]中的定义变量键){ if(I==0(Arrayprice[Arrayprice]。length-1][key]！=0)){ title=' th class=' first th ' ' key '(元)/th '；} if(I==(Arrayprice。length-1)(array price[array price]。length-1][key]！=0)){ sumCols=' TD class=' second TD ' ' Arrayprice[I][key]'/TD '；}如果（我！=(Arrayprice。length-1)(array price[array price]。length-1][key]！=0)){ partColsStr=' TD class=' thirdTd ' ' Arrayprice[I][key]'/TD '；} } partcols。push(partColsStr)；} var sren Shu=0；var stotal=0；var tablex=tablex=' tr class=' first tr ' th class=' first th '项目名称th class=' firstTh '检查人数th class=' firstTh '金额（元)/th ' title '/tr '；如果(数据！=空数据。长度0){ for(var I=0；伊达塔。长度-1；i ){ sRenshu=data[i].庶人；stotal=数据[i].总计；} tablex=' tr class=' SeCOnd tr ' TD class=' SeCOnd TD '总计/tdtd class=' SeCOnd TD ' ' SrEnshu '/tdtd class=' SeCOnd TD ' ' stotal '/TD ' SumCols '/tr '；for(var I=0；伊达塔。长度-1；I){ { tablex=' tr class=' Thirdtr ' TD class=' Thirdtd ' '数据[i].name/' TD ' ' TD class=' thirdTd ' ' ' a style=' color : # ff 5722 ' href=' base path ' rel=' external no follow ' rel=' external no follow '/biz/hospital/rate/allot/topa gemx。做什么？开始日期=' $(' #开始日期')。val().toString()“结束日期=”$(“#结束日期”).val().toString()"ProductID _="数据[i].productId_ ' '数据[i].庶人/a/td' 'td class='thirdTd ' '数据[i].总零件号[I]'/tr '；} } } $('#table_status ').empty()；$('#table_status ').追加(表x)；},错误： function() { layer.msg('系统异常，请联系管理员！{icon:2，time :2000 })；} });}这块是名字这些的是固定的，就排除掉，然后将数据放到arrayPrice1下再推到数组下表格。就是表格的html。当时拼接的是分两步，先是表头，然后是数据。有个总计，后来在结构化查询语言下加了带汇总就得到了。

用于(Arrayprice[I]中的定义变量键){ if(I==0(Arrayprice[Arrayprice]。length-1][key]！=0)){ title=' th class=' first th ' ' key '(元)/th '；} if(I==(Arrayprice。length-1)(array price[array price]。length-1][key]！=0)){ sumCols=' TD class=' second TD ' ' Arrayprice[I][key]'/TD '；}如果（我！=(Arrayprice。length-1)(array price[array price]。length-1][key]！=0)){ partColsStr=' TD class=' thirdTd ' ' Arrayprice[I][key]'/TD '；} }这块就是动态的数据，标题表头sumCols总计partColsStr具体数据，加到tablex下就行。以上就是原生的思路。

这块桌子用到了拉威，当时也是看着这个获得动态设置的思路去写的原生。主要思路是：cols是一个数组，通过创建交互式、快速动态网页应用的网页开发技术得到数据后放到数组下，再放到关口下即可。

$.Ajax({ URL :基本路径'/商业/医院/费率/分配/部门。do '，data: { }，type : 'post '，dataType : 'json '，success :函数(数据){ mycols[0]={ field : ' name true '，title: '姓名，对齐： '中心，宽度： ' 120 ' };mycols[1]={ field : '电话真'，title: '支付手机号，对齐： '中心，宽度： ' 120 ' };mycols[2]={ 0字段： '订单号，标题： '订单号，对齐： '中心，宽度： ' 120 ' };mycols[3]={ 0字段： '创建日期'，标题： '订单创建时间，对齐： '中心，宽度： ' 120 ' };mycols[4]={字段： '修改日期'，标题： '订单使用时间，对齐： '中心，宽度： ' 120 ' };mycols[5]={field : 'price '，title: '支付金额（元)',对齐： '中心，宽度： ' 120 ' };for(var I=0；一。数据。长度；i ){ var obj=data[i].部门名称；如果(obj！=0){ mycols[i 6]={field : obj，title:obj '(元)',对齐： '中心，宽度： ' 120 ' };} }控制台。原木(真菌)；重载();},错误： function() { layer.msg('系统异常，请联系管理员！{icon:2，time :2000 })；}});以上是创建交互式、快速动态网页应用的网页开发技术调用后处理的数组。下面这些就是桌子。重载();就是重新渲染。

var选项={ URL :基本路径'/biz/医院/费率/分配/列表_ MX。do '，method: 'post '，其中：{ begin:$('#startDate ').val().toString()，end:end，ProductID _ : $("# ProductID _ ").val().toString()，orderNO:$('#qorderNO ').val().toString()，名称：$('#qname ').val().toString() }，//分页请求参数请求： {页面名称： '页面索引'，//页码limitName: 'limit' //每页多少数据}, //返回的数据格式响应： {状态名称： '状态'，//数据状态的字段名称，默认：代码statusCode: 200，//成功的状态码，默认：0 msgName: "消息",//状态信息的字段名称，默认：msg countName: 'total '，//数据总数的字段名称，默认：计数数据名称："数据"//数据列表的字段名称，默认：数据},//每页10条数据limit: 10，//加载时出现加载条loading: true，elem: '#data_table '，cols: [ mycols ]，id: 'dataTable '，page: true，}；//方法级渲染table.render(选项);函数reload(){ Date=new Date($(' # end Date ')).val())；日期=日期。setdate(日期。get date)(1)；日期=新日期(日期)；日期月份=日期。get month()1；//获取当前月份(0-11,0代表一月)end=date。get full year()'-' date month '-' date。getdate()；//选项。哪里？部门id=$(' #部门id ').val()；选项。哪里？begin=$(' # startDate ').val()；选项。哪里？end=end选项。哪里？订单号=$(' # qorder no ').val()；options.where.name=$('#qname ').val()；table.reload('dataTable '，选项);} 可以看到

cols: [ mycols ]，这个就是动态数据。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。