如何使用thymeleaf动态更新表?

uz75evzq  于 2021-07-06  发布在  Java
关注(0)|答案(1)|浏览(368)

我有一个 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");
    }
});

如你所见,一个 spring 调用控制器方法,该方法执行一些搜索并最终设置以下模型对象:

@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;
}

现在,我要做的是更新 table 我用上面的控制器得到的信息 thymeleaf . 例如,我想 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 对象(即,来自地名、日期、第一个点、第一个点、…、第七个点元素)。

xpszyzbs

xpszyzbs1#

您可以创建 html ajax内部的结构 success 首先需要循环json数组,然后使用 value.keyname 并附加这些 htmls 使用 += 最后,使用 .append jquery方法在 ui-table 部门。
演示代码:

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>

相关问题