欢迎光临
我的个人博客网站

Thymeleaf 循环 List,Map复杂数据类型HashMap<String,List<String>>—-修复标签样式问题

  • 用到的标签有 th:each th:if key.current.key th:text
    需求是展示文章的标签名称,blog 对象的标签字段是tag(数据通常是java,xx,java-web等以逗号分割的),所以由后端传到前端的数据是HashMap<String,List> ——(key是blog的id,List是分割后标签名称),
    数据库的数据格式如下
    Thymeleaf 循环 List,Map复杂数据类型HashMap&lt;String,List&lt;String&gt;&gt;----修复标签样式问题

代码如下

public ModelAndView index(ModelAndView mv){         mv.setViewName("index");         //最新博客         //最新文章 2条         List<Blog> blogs = blogService.getLatestBlog(3,"");         //热门文章         mv.addObject("blogs",blogs);         HashMap<String,List<String>> mp = new HashMap<>();         for (Blog blog : blogs) {             mp.put(String.valueOf(blog.getId()), Arrays.asList(blog.getTags().split(",")));         }         mv.addObject("tags",mp);         return mv;     } 

那么我在前端循环获取标签名称的代码如下

<div th:each="blogs:${blogs}">                 <h2 class="indexBlogTitle" th:text="${blogs.title}">标题</h2>                 <div class="items">                     <!-- th:if 循环的时候判断 文章id是否相同-->                      <!-- tag.current.key 是取map的key-->                      <!--tag.current.value 取blogid 对应标签集合-->                      <!--th:text 取标签名称-->                     <a th:each="btag,tag:${tags}" th:if="${blogs.id} == ${tag.current.key}">                             <span th:each="mytag:${tag.current.value}" th:text="${mytag}">                     </span>                     </a>                 </div> </div> 

备注 Thymeleaf 取值key , value ;以及 循环中 th:if。
展示效果如下:
Thymeleaf 循环 List,Map复杂数据类型HashMap&lt;String,List&lt;String&gt;&gt;----修复标签样式问题

  • 由于样式如下,按照预期的结果 应该是每一个博客标签的颜色是不同的,样式代码如下
.items  a:nth-child(9n){background-color: #4A4A4A;} .items  a:nth-child(9n+1){background-color: #428BCA;} .items  a:nth-child(9n+2){background-color: #5CB85C;} .items  a:nth-child(9n+3){background-color: #D9534F;} .items  a:nth-child(9n+4){background-color: #567E95;} .items  a:nth-child(9n+5){background-color: #B433FF;} .items a{opacity: 0.80;filter:alpha(opacity=80);color: #fff;background-color: #428BCA;display: inline-block;margin: 0 5px 5px 0;padding: 0 6px;line-height: 30px;     border-radius: 6px 6px 6px 6px;} .items a:hover{opacity: 1;filter:alpha(opacity=100);} .items h3{font-size: 18px;color: #666;border-bottom: 1px solid #eaeaea;background-color: #fbfbfb;margin: 0;padding: 11px 15px 10px;margin-bottom:15px} 
  • 将thymeleaf代码进行修复,去掉了多余的span标签,只保留 a 标签
<div th:each="blogs:${blogs}">                 <h2 class="indexBlogTitle" th:text="${blogs.title}">标题</h2>                <!-- 标签优化后-->                 <div class="items" th:each="btag,tag:${tags}" th:if="${blogs.id} == ${tag.current.key}">                       <a th:each="mytag:${tag.current.value}" th:text="${mytag}"></a>                 </div> </div> 

正确的展示效果如下:
Thymeleaf 循环 List,Map复杂数据类型HashMap&lt;String,List&lt;String&gt;&gt;----修复标签样式问题

赞(0) 打赏
未经允许不得转载:张拓的天空 » Thymeleaf 循环 List,Map复杂数据类型HashMap<String,List<String>>—-修复标签样式问题
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏