如何使用 thymeleaf 动态更新表格？

Posted 2023-02-26

技术标签:

【中文标题】如何使用 thymeleaf 动态更新表格？【英文标题】：How to use thymeleaf to update a table dynamically? 【发布时间】：2021-03-03 03:59:34 【问题描述】：

我有一个html 代码，其中包括以下部分：

<div class="ui-table">
                <div class="items">
                    <div class="justify-content-end d-flex">
                        <span class="text-color-3 mr-4 edit">edit</span>
                        <span class="text-color-3 remove">remove</span>
                    </div>
                    <div class="item">
                        <div class="top d-flex">
                            <div class="col-6 pl-0">
                                <img th:src="@images/location.png">
                                IBIS RESTAURANT
                            </div>
                            <div class="col-6">
                                <img th:src="@images/event.png">
                                14/01/1991
                            </div>
                        </div>
                        <div class="bottom pl-3">
                            <div>
                                <img th:src="@images/plus.png">
                                <span>Nice</span>
                            </div>
                            <div>
                                <img th:src="@images/plus.png">
                                <span>Family Friendly</span>
                            </div>
                            <div>
                                <img th:src="@images/plus.png">
                                <span>Good</span>
                            </div>                      
                        </div>
                    </div>
                </div>
                <div class="items">
                    <div class="justify-content-end d-flex">
                        <span class="text-color-3 mr-4 edit">edit</span>
                        <span class="text-color-3 remove">remove</span>
                    </div>
                    <div class="item">
                        <div class="top d-flex">
                            <div class="col-6 pl-0">
                                <img th:src="@images/location.png">
                                IBIS RESTAURANT2
                            </div>
                            <div class="col-6">
                                <img th:src="@images/event.png">
                                14/01/1992
                            </div>
                        </div>
                        <div class="bottom pl-3">
                            <div>
                                <img th:src="@images/plus.png">
                                <span>Nice2</span>
                            </div>
                            <div>
                                <img th:src="@images/plus.png">
                                <span>Family Friendly2</span>
                            </div>
                            <div>
                                <img th:src="@images/plus.png">
                                <span>Good2</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

创建一个类似页面的表格。默认情况下，我在表格中有一些信息（如您所见）。在此页面上，还有一个 button 应该更新表格。这个按钮触发一个 ajax 函数，如下所示：

$.ajax(
    type : "POST",
    url : "/findUserReviews", 
    dataType : "JSON",
    success : function(data) 

        console.log("hiasdfdf");
    
);

如您所见，调用了springcontroller 方法，该方法进行了一些搜索并最终设置了以下模型对象：

@RequestMapping(value = "/findUserReviews")
public @ResponseBody List<Review> findUserReviews(Model model) 

    ModelAndView modelAndView = new ModelAndView();
    
    List<Review> resultReviews = reviewRepository.findByUser(user);
    List<Review> allUserReviews = new ArrayList<Review>(resultReviews);

    modelAndView.addObject("myReviewList", allUserReviews);

    return allUserReviews;

现在，我要做的是使用使用thymeleaf 使用上述控制器获得的信息来更新我拥有的table。例如，当我点击更新按钮时，我想要myReviewList[0].date 而不是14/01/1991，但我不知道该怎么做。

任何帮助将不胜感激。

PS 1：我对spring boot、thymeleaf 和ajax 的整个话题不熟悉。如果我完全错了并且有更好或更简单的方法，我愿意接受新的方法:)。

PS 2：我想让我的表格采用现有格式，但出于某种原因不想使用table 标签。

更新 1：这是示例data：

    [
  
    "id": "5fb69a6bc8a2bf2620fb6d29",
    "first_point": "first_point",
    "second_point": "",
    "third_point": "",
    "fourth_point": "",
    "fifth_point": "",
    "sixth_point": "",
    "seventh_point": "",
    "place": 
      "place_name": "Ibis Budget Essen Nord, Am Lichtbogen 1, 45141 Essen, Germany",
      "id": "5fb69a6bc8a2bf2620fb6d28",
      "longitude": 6.98807,
      "latitude": 51.47436,
      "municipalitySubdivision": "Altenessen-Süd",
      "municipality": "Essen",
      "countrySecondarySubdivision": "Essen",
      "countryTertiarySubdivision": "undefined",
      "countrySubdivision": "North Rhine-Westphalia",
      "country": "Germany",
      "place_category": "HOTEL_MOTEL"
    ,
    "user": 
      "id": "5fad89730923613ac83edb27",
      "email": "test2@test.com",
      "password": "$2a$10$7g.DHMvBaC2dsafaerwerweefscweVB2k5R6jaQkTpx/gPHy",
      "fullname": null,
      "enabled": true,
      "roles": [
        
          "id": "5e5aa2db383ba54434092e8b",
          "role": "ADMIN"
        
      ],
      "firstname": "test2-new",
      "lastname": "test2"
    ,
    "date": "Thu Nov 19 17:16:43 CET 2020",
    "textScore": 0
  
]

更新 2：我需要来自上述data 对象的信息是：

也就是说，您现在看到的html 代码是一个填充了一些示例值的示例。实际上，表格的内容将来自 data 对象（即来自 place_name、date、first_point、first_point、...、seven_point 元素）。

【问题讨论】：

data 里面有什么？你也可以发一下吗？感谢您的评论。我用一些示例数据更新了我的问题。嗨，还有人怀疑你发布的 html 结构，即：item div 你需要像这样附加这个新的 json 吗？另外，您需要在 html 中添加的 json 数据中的所有字段您能指出它们吗？我不确定我是否理解正确，我更新了我的问题。如果它回答了您的问题，请告诉我。我不需要数据对象中的所有信息，只需要我在第二次更新中提到的信息。 【参考方案1】：

您可以在您的 ajax success 函数中创建 html 结构。首先您需要遍历 JSON 数组，然后使用 value.keyname 获取值并使用 += 附加这些 htmls到某个变量。最后，使用 jquery 的.append 方法将 div 附加到您的ui-table div 中。

演示代码：

var data = [
  "id": "5fb69a6bc8a2bf2620fb6d29",
  "first_point": "first_point",
  "second_point": "Okay",
  "third_point": "Goods",
  "fourth_point": "",
  "fifth_point": "",
  "sixth_point": "",
  "seventh_point": "",
  "place": 
    "place_name": "Ibis Budget Essen Nord, Am Lichtbogen 1, 45141 Essen, Germany",
    "id": "5fb69a6bc8a2bf2620fb6d28",
    "longitude": 6.98807,
    "latitude": 51.47436,
    "municipalitySubdivision": "Altenessen-Süd",
    "municipality": "Essen",
    "countrySecondarySubdivision": "Essen",
    "countryTertiarySubdivision": "undefined",
    "countrySubdivision": "North Rhine-Westphalia",
    "country": "Germany",
    "place_category": "HOTEL_MOTEL"
  ,
  "date": "Thu Nov 19 17:16:43 CET 2020",
  "textScore": 0
, 
  "id": "5fb69a6bc8a2bf2620fb6d29",
  "first_point": "first_point",
  "second_point": "Okay",
  "third_point": "Goods",
  "fourth_point": "",
  "fifth_point": "",
  "sixth_point": "",
  "seventh_point": "",
  "place": 
    "place_name": "Soemthingsss",
    "id": "5fb69a6bc8a2bf2620fb6d28",
    "longitude": 6.98807,
    "latitude": 51.47436,
    "municipalitySubdivision": "Altenessen-Süd",
    "municipality": "Essen",
    "countrySecondarySubdivision": "Essen",
    "countryTertiarySubdivision": "undefined",
    "countrySubdivision": "North Rhine-Westphalia",
    "country": "Germany",
    "place_category": "HOTEL_MOTEL"
  ,
  "date": "Thu Nov 29 17:16:43 CET 2020",
  "textScore": 0
];
/*$.ajax(
    type : "POST",
    url : "/findUserReviews", 
    dataType : "JSON",
    success : function(data) */

var html = "";
//loop through json datas
$(data).each(function(index, value) 
  //generate htmls and append same to variable `html`
  html += '<div class="items"> <div class = "justify-content-end d-flex"><span class = "text-color-3 mr-4 edit">edit</span><span class ="text-color-3 remove"> remove</span> </div>'

  html += '<div class="item"><div class="top d-flex"><div class="col-6 pl-0"> <img th:src="@images/location.png"><h5>Place</h5>' + value.place.place_name + '</div>'

  html += '<div class="col-6"><img th:src="@images/event.png">' + value.date + '</div></div><div class="bottom pl-3"> <div> <img th:src="@images/plus.png"><span>' + value.first_point + '</span> </div><div> <img th:src="@images/plus.png"> <span>' + value.second_point + '</span></div><div><img th:src="@images/plus.png"><span>' + value.third_point + '</span></div></div></div>'

  //same for all point i.e : value.fourth_poin..etc
)
$(".ui-table").append(html) //append datas inside your div
/*  
);*/

.remove 
  background-color: red;


.edit 
  background-color: blue;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ui-table"></div>

【讨论】：

以上是关于如何使用 thymeleaf 动态更新表格？的主要内容，如果未能解决你的问题，请参考以下文章

如何在 Thymeleaf 中创建动态表..？

Spring Boot + Thymeleaf 动态表，行中带有复选框与控制器通信

如何使用 Thymeleaf 获取动态输入框数据？

动态更新后保留 HTML 表格位置

使用 thymeleaf、spring boot 的动态下拉菜单

Java基础总结之Thymeleaf详解