zoukankan      html  css  js  c++  java
  • 后端传输多组数据,前端c标签解析

    如上图所示,有多个过滤类别数据,此数据通过配置项从后端传输到前端遍历展示,由于是多组同结构类型数据,用list存储势必会是最后一条数据覆盖前面所有的数据,所以这里后端需要用

    map进行多组数据存值

     此刻得到的数据是为实际获取的多组数据

    {"品类":[{"id":8,"sid":5,"value":"黑色","sort":0},{"id":9,"sid":5,"value":"灰色","sort":0},{"id":10,"sid":5,"value":"藏青色","sort":0},{"id":11,"sid":5,"value":"紫色","sort":0},{"id":12,"sid":5,"value":"粉色","sort":0},{"id":13,"sid":5,"value":"宝蓝色","sort":0},{"id":14,"sid":5,"value":"白色","sort":0},{"id":15,"sid":5,"value":"其他","sort":0}],"品牌":[{"id":2,"sid":3,"value":"STB","sort":0},{"id":3,"sid":3,"value":"VBC","sort":0},{"id":4,"sid":3,"value":"SCABAL","sort":0},{"id":5,"sid":3,"value":"ethomas","sort":0}],"年份":[{"id":28,"sid":2,"value":"17/18","sort":0},{"id":29,"sid":2,"value":"16/17","sort":0}],"季节":[{"id":6,"sid":4,"value":"春夏","sort":0},{"id":7,"sid":4,"value":"秋冬","sort":0}],"成分":[{"id":16,"sid":6,"value":"羊毛","sort":0},{"id":17,"sid":6,"value":"羊绒","sort":0},{"id":18,"sid":6,"value":"丝毛麻","sort":0},{"id":19,"sid":6,"value":"棉","sort":0},{"id":20,"sid":6,"value":"亚麻","sort":0},{"id":21,"sid":6,"value":"其他","sort":0}],"场景":[{"id":22,"sid":7,"value":"职业装","sort":0},{"id":23,"sid":7,"value":"高档商务","sort":0},{"id":24,"sid":7,"value":"宴会","sort":0},{"id":25,"sid":7,"value":"婚礼","sort":0},{"id":26,"sid":7,"value":"休闲","sort":0},{"id":27,"sid":7,"value":"其他","sort":0}]}
    

      接着就是调整到了goodList界面进行数据遍历展示,这里用的是c标签进行的遍历

    <div class="ylw-spLbSxConTop">
    			<c:forEach items="${map }" var="ecSer">
    				<div class="ylw-spLbSxConTopMk">
    				<h3>${ecSer.key }</h3>
    				<ul class="checkBox">
    					<c:forEach items="${ecSer.value }" var="map">
    						<li>${map.value }</li>
    					</c:forEach>
    				</ul>
    				</div>
    			</c:forEach>
    		</div>
    

      

  • 相关阅读:
    Django(69)最好用的过滤器插件Django-filter
    Django(68)drf分页器的使用
    Django(67)drf搜索过滤和排序过滤
    SweetAlert使用
    虚拟环境之间批量pip安装包迁移
    ubuntu 18.04 安装uwsgi 和nginx
    ubuntu 18.04安装mysql及常见问题处理
    ubuntu 18.04安装virtualenv和virtualenvwrapper安装及使用
    滚动视差stellar.js
    JMeter之使用技巧
  • 原文地址:https://www.cnblogs.com/G-yong/p/8991929.html
Copyright © 2011-2022 走看看