当前位置: 首页 > Web前端 > HTML

Polymer实现动态数据并具有表合并

时间:2023-04-02 21:58:41 HTML

最近接到一个请求,要做一个带表格的页面展示数据,数据项的个数是动态的,格式合并;先看效果图: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}