最近接到一个请求,要做一个带表格的页面展示数据,数据项的个数是动态的,格式合并;先看效果图:1、服务返回的数据结构:data:{type:Array,value:[{"designation":"001","rows":[{"manufacturerName":"Guangzhou",“manufacturerId”:100,“myProductOffers”:[{“a”:“供应商”,“b”:“期货/现货”,...}],“todayDealPrice”:[{“a”:“供应商”,"b":"期货/现货",...}],"otherProductOffers":[{"a":"供应商","b":"期货/现货",...}],}]2。页面代码如下所示:
[[data.指定]][[rows.manufacturerName]]报价 | [[myProductOffers.a]] | [[myProductOffers.b]] | [[myProductOffers.c]] | [[myProductOffers.d]] | [[myProductOffers.e]] | [[myProductOffers.f]] | [[myProductOffers.g]] | [[myProductOffers.h]] | [[myProductOffers.i]] | [[myProductOffers.j]] | [[myProductOffers.k]] | [[myProductOffers.l]] |
当天成交价格[[todayDealPrice.a]] | [[todayDealPrice.b]] | [[todayDealPrice.c]] | [[todayDealPrice.d]] | [[todayDealPrice.e]] | [[todayDealPrice.f]] | [[todayDealPrice.g]] | [[todayDealPrice.h]] | [[todayDealPrice.i]] | [[todayDealPrice.j]] | [[todayDealPrice.k]] | [[todayDealPrice.l]] |
当天其他报价[[otherProductOffers.a]] | [[otherProductOffers.b]] | [[otherProductOffers.c]] | [[otherProductOffers.d]] | [[otherProductOffers.e]] | [[otherProductOffers.f]] | [[otherProductOffers.g]] | [[otherProductOffers.h]] | [[otherProductOffers.i]] | [[otherProductOffers.j]] | [[otherProductOffers.k]] | [[otherProductOffers.l]] |
这里需要注意的是每一层循环的索引。利用这个索引来判断合并的item是第一个,并显示出来。3.对应的js代码:_getDataLength:function(data){letlength=0;data.rows.forEach(e=>{length+=e.myProductOffers.lengthlength+=e.todayDealPrice.lengthlength+=e.otherProductOffers.length})returnlength},_getRowsLength:function(rows){让长度=rows.myProductOffers.length+rows.todayDealPrice.length+rows.otherProductOffers.length;returnlength},_getArrayLength:function(rows){returnrows.length},_isFirstRow:function(index){返回索引===0}