25.THYMELEAF 如何用TH:EACH 做条件遍历

可以看到如图所示的集中常见遍历需求
1. 单纯表格
2. 取status值的表格
3. 下拉框
4. 单选框

 步骤 3 : 

模仿和排错

在确保可运行项目能够正确无误地运行之后，再严格照着教程的步骤，对代码模仿一遍。 
模仿过程难免代码有出入，导致无法得到期望的运行结果，此时此刻通过比较 正确答案 ( 可运行项目 ) 和自己的代码，来定位问题所在。 
采用这种方式，学习有效果，排错有效率，可以较为明显地提升学习速度，跨过学习路上的各个槛。 

推荐使用diffmerge软件，进行文件夹比较。把你自己做的项目文件夹，和我的可运行项目文件夹进行比较。 
这个软件很牛逼的，可以知道文件夹里哪两个文件不对，并且很明显地标记出来 
这里提供了绿色安装和使用教程：diffmerge 下载和使用教程

 步骤 4 : 

TestController

准备集合 List<Product> 用于视图上显示。 
需要注意的是 第5个产品用的是 currentProduct

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

package  com.how2java.springboot.web; import  java.util.ArrayList; import  java.util.List;   import  org.springframework.stereotype.Controller; import  org.springframework.ui.Model; import  org.springframework.web.bind.annotation.RequestMapping;   import  com.how2java.springboot.pojo.Product;    @Controller public  class  TestController {         @RequestMapping ( "/test" )      public  String test(Model m) {          String htmlContent =  "<p style='color:red'> 红色文字</p>" ;          Product currentProduct = new  Product( 5 , "product e" ,  200 );          boolean  testBoolean =  true ;                    List<Product> ps =  new  ArrayList<>();          ps.add( new  Product( 1 , "product a" ,  50 ));          ps.add( new  Product( 2 , "product b" ,  100 ));          ps.add( new  Product( 3 , "product c" ,  150 ));          ps.add( new  Product( 4 , "product d" ,  200 ));          ps.add(currentProduct);          ps.add( new  Product( 6 , "product f" ,  200 ));          ps.add( new  Product( 7 , "product g" ,  200 ));                           m.addAttribute( "ps" , ps);          m.addAttribute( "htmlContent" , htmlContent);          m.addAttribute( "currentProduct" , currentProduct);          m.addAttribute( "testBoolean" , testBoolean);                    return  "test" ;      } }

 步骤 5 : 

普通遍历

使用 th:each 遍历

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

< div  class = "showing" >      < h2 >遍历</ h2 >        < table >          < thead >              < tr >                  < th >id</ th >                  < th >产品名称</ th >                  < th >价格</ th >              </ tr >          </ thead >          < tbody >              < tr  th:each = "p: ${ps}" >                  < td  th:text = "${p.id}" ></ td >                  < td  th:text = "${p.name}" ></ td >                  < td  th:text = "${p.price}" ></ td >              </ tr >          </ tbody >      </ table > </ div >

 步骤 6 : 

带状态的遍历

使用 th:each="p,status: ${ps} 方式遍历就把状态放在 status里面了， 同时还用3元表达式判断奇偶 

 

th:class="${status.even}?'even':'odd'"

 

status里还包含了如下信息：
index 属性, 0 开始的索引值
count 属性, 1 开始的索引值
size 属性, 集合内元素的总量
current 属性, 当前的迭代对象
even/odd 属性, boolean 类型的, 用来判断是否是偶数个还是奇数个
first 属性, boolean 类型, 是否是第一个
last 属性, boolean 类型, 是否是最后一个

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

< div  class = "showing" >      < h2 >带状态遍历</ h2 >      < table >          < thead >              < tr >                  < th >index</ th >                  < th >id</ th >                  < th >产品名称</ th >                  < th >价格</ th >              </ tr >          </ thead >          < tbody >              < tr  th:class = "${status.even}?'even':'odd'"  th:each = "p,status: ${ps}" >                  < td   th:text = "${status.index}" ></ td >                  < td  th:text = "${p.id}" ></ td >                  < td  th:text = "${p.name}" ></ td >                  < td  th:text = "${p.price}" ></ td >              </ tr >          </ tbody >      </ table > </ div >

 步骤 7 : 

结合 select

还是用 th:each,但是放在option元素上，就可以遍历出多个下拉框出来了。
其中 th:selected 表示被选中的项。

1 2 3 4 5 6 7 8

< div  class = "showing" >      < h2 >遍历 select </ h2 >        < select  size = "3" >          < option  th:each = "p:${ps}"  th:value = "${p.id}"      th:selected = "${p.id==currentProduct.id}"     th:text = "${p.name}"  ></ option >      </ select >   </ div >

 步骤 8 : 

结合 单选框

单选框也是同样的做法，其中 th:checked用于判断是否选中

1 2 3 4 5 6

< div  class = "showing" >      < h2 >遍历 radio </ h2 >        < input  name = "product"  type = "radio"  th:each = "p:${ps}"  th:value = "${p.id}"   th:checked = "${p.id==currentProduct.id}"      th:text = "${p.name}"   />   </ div >

 步骤 9 : 

完整的 test.html

完整的 test.html

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116

<!DOCTYPE HTML> < html  xmlns:th = "http://www.thymeleaf.org" > < head >      < title >hello</ title >      < meta  http-equiv = "Content-Type"  content = "text/html; charset=UTF-8"  />      < link  rel = "stylesheet"  type = "text/css"  media = "all"  href = "../../webapp/static/css/style.css" th:href = "@{/static/css/style.css}" />      < script  type = "text/javascript"  src = "../../webapp/static/js/thymeleaf.js"  th:src = "@{/static/js/thymeleaf.js}" ></ script >            < style >          h2{              text-decoration: underline;              font-size:0.9em;              color:gray;          }      </ style >        </ head > < body >   < div  class = "showing" >      < h2 >遍历</ h2 >        < table >          < thead >              < tr >                  < th >id</ th >                  < th >产品名称</ th >                  < th >价格</ th >              </ tr >          </ thead >          < tbody >              < tr  th:each = "p: ${ps}" >                  < td  th:text = "${p.id}" ></ td >                  < td  th:text = "${p.name}" ></ td >                  < td  th:text = "${p.price}" ></ td >              </ tr >          </ tbody >      </ table > </ div >   < div  class = "showing" >      < h2 >带状态遍历</ h2 >      < table >          < thead >              < tr >                  < th >index</ th >                  < th >id</ th >                  < th >产品名称</ th >                  < th >价格</ th >              </ tr >          </ thead >          < tbody >              < tr  th:class = "${status.even}?'even':'odd'"  th:each = "p,status: ${ps}" >                  < td   th:text = "${status.index}" ></ td >                  < td  th:text = "${p.id}" ></ td >                  < td  th:text = "${p.name}" ></ td >                  < td  th:text = "${p.price}" ></ td >              </ tr >          </ tbody >      </ table > </ div >   < div  class = "showing" >      < h2 >遍历 select </ h2 >        < select  size = "3" >          < option  th:each = "p:${ps}"  th:value = "${p.id}"      th:selected = "${p.id==currentProduct.id}"     th:text = "${p.name}"  ></ option >      </ select >   </ div >   < div  class = "showing" >      < h2 >遍历 radio </ h2 >        < input  name = "product"  type = "radio"  th:each = "p:${ps}"  th:value = "${p.id}"   th:checked = "${p.id==currentProduct.id}"      th:text = "${p.name}"   />   </ div >   < div  class = "showing" >      < h2 >条件判断</ h2 >      < p  th:if = "${testBoolean}"  >如果testBoolean 是 true ，本句话就会显示</ p >      < p  th:if = "${not testBoolean}"  >取反 ，所以如果testBoolean 是 true ，本句话就不会显示</ p >      < p  th:unless = "${testBoolean}"  >unless 等同于上一句，所以如果testBoolean 是 true ，本句话就不会显示</ p >      < p  th:text = "${testBoolean}?'当testBoolean为真的时候，显示本句话，这是用三相表达式做的':''"  ></ p > </ div >   < div  class = "showing" >      < h2 >显示 转义和非转义的 html 文本</ h2 >      < p  th:text = "${htmlContent}"  ></ p >      < p  th:utext = "${htmlContent}"  ></ p > </ div >   < div  class = "showing" >      < h2 >显示对象以及对象属性</ h2 >      < p  th:text = "${currentProduct}"  ></ p >      < p  th:text = "${currentProduct.name}"  ></ p >      < p  th:text = "${currentProduct.getName()}"  ></ p > </ div >   < div  class = "showing"  th:object = "${currentProduct}" >      < h2 >*{}方式显示属性</ h2 >      < p  th:text = "*{name}"  ></ p > </ div >   < div  class = "showing" >      < h2 >算数运算</ h2 >      < p  th:text = "${currentProduct.price+999}"  ></ p > </ div >   < div  class = "showing" >      < div  th:replace = "include::footer1"  ></ div >      < div  th:replace = "include::footer2(2015,2018)"  ></ div > </ div >   </ body >   </ html >

 步骤 10 : 

重启测试

重新运行 Application.java, 然后测试

 

http://127.0.0.1:8080/thymeleaf/test