我有一个 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
对象(即,来自地名、日期、第一个点、第一个点、…、第七个点元素)。
1条答案
按热度按时间xpszyzbs1#
您可以创建
html
ajax内部的结构success
首先需要循环json数组,然后使用value.keyname
并附加这些htmls
使用+=
最后,使用.append
jquery方法在ui-table
部门。演示代码: