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