[英]How can I input HTML from JS function into Thymeleaf th:text?
I want to show rating based on the returned value of an object method.我想根据对象方法的返回值显示评级。 JS function - returns an html that contains amount of stars based on a parameter. JS 函数 - 返回一个包含基于参数的星星数量的 html。 Parameter - digit up to 5. I get it from calling employee.getUser().getAvgGrade().参数 - 最多 5 位的数字。我通过调用 employee.getUser().getAvgGrade() 得到它。
Here is a table I have这是我的一张桌子
<table>
<thead>
<tr>
<th>Name</th>
<th>Rating</th>
<th>Schedule</th>
</tr>
</thead>
<tbody>
<tr th:each="employee:${employees}">
<td th:text="${employee.getUser().getFullName()}"></td>
<td th:text="${employee.getUser().getAvgGrade()}"></td>
<td th:text="${employee.getTimeBegin() + ' - ' + employee.getTimeEnd()}"></td>
</tr>
</tbody>
</table>
Here is a JS function that returns HTML这是一个返回 HTML 的 JS 函数
function star(rate) {
var starHTML = '';
var rate = parseInt(rate);
var increment = 0;
var max = 5;
while(increment < rate) {
starHTML += '<i class="material-icons orange">grade</i>';
increment++;
}
while(max > rate) {
starHTML += '<i class="material-icons gray">grade</i>';
max--;
}
return starHTML;
};
CSS for stars星星的 CSS
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
I want to call this function with the integer from getAvgGrade() ( second th:text ) and place the html it returns as th:text ( so the cell holds the stars ).我想用 getAvgGrade() (第二个 th:text )中的整数调用这个函数,并将它返回的 html 放置为 th:text (因此单元格包含星星)。
You can simplify this by using Thymeleaf to manage generating the stars, instead of using JavaScript.您可以使用 Thymeleaf 来管理星星的生成,而不是使用 JavaScript,从而简化这一过程。
Here is that approach:这是这种方法:
First, some Java test data (a simplified version of your data, just for this demo):首先,一些 Java 测试数据(您的数据的简化版本,仅用于此演示):
List<UserRating> userRatings = new ArrayList<>();
userRatings.add(new UserRating("Abel", 2));
userRatings.add(new UserRating("Baker", 3));
userRatings.add(new UserRating("Charlie", 4));
So, we have 3 users with grades of 2, 3, and 4.因此,我们有 3 个用户,等级分别为 2、3 和 4。
The Thymeleaf template is as follows: Thymeleaf 模板如下:
<table>
<thead>
<tr>
<th>Name</th>
<th>Avg Grade</th>
<th>Stars</th>
</tr>
</thead>
<tbody>
<tr th:each="user : ${users}">
<td th:text="${user.name}"></td>
<td th:text="${user.grade}"></td>
<td>
<th:block th:each="star,iterStat : ${#numbers.sequence(1,5)}">
<span th:if="${user.grade} >= ${iterStat.count}"
class="material-icons"
style="color: orange;">grade</span>
<span th:if="${user.grade} < ${iterStat.count}"
class="material-icons"
style="color: grey;">grade</span>
</th:block>
</td>
</tr>
</tbody>
</table>
The result of applying the test data to the template is this:将测试数据应用到模板的结果是这样的:
Notes笔记
This approach does not require any JavaScript.这种方法不需要任何 JavaScript。
I assumed the average grades are integers, but this also works for decimal values.我假设平均成绩是整数,但这也适用于十进制值。
To build 5 stars I use a predefined sequence counting from 1 to 5:为了建立 5 颗星,我使用了从 1 到 5 的预定义序列:
${#numbers.sequence(1,5)}
I use an iteration status variable called iterStat
to track progress through this sequence of 5 integers.我使用一个名为iterStat
的迭代状态变量来跟踪这个由 5 个整数组成的序列的进度。
I compare this iterStat.count
value (the current position in the iteration) with the average grade value.我将这个iterStat.count
值(迭代中的当前位置)与平均成绩值进行比较。 I use this to determine if the star should be orange or grey.我用它来确定星星应该是橙色还是灰色。
The th:block
element is a special Thymeleaf element. th:block
元素是一种特殊的 Thymeleaf 元素。 It can be convenient to use in certain iteration situations.在某些迭代情况下可以方便地使用。 More details here .更多细节在这里。
You can certainly implement this in other ways - for example, by calling a JavaScript function after the table has been drawn - but that would involve more JavaScript code - your function, plus extra code to iterate the table values in JavaScript.您当然可以通过其他方式实现这一点 - 例如,通过在绘制表格后调用 JavaScript 函数 - 但这将涉及更多 JavaScript 代码 - 您的函数,以及在 JavaScript 中迭代表值的额外代码。
I would recommend the above approach instead.我会推荐上述方法。 But I understand, if that may not be what you want, or if it may not fit into your overall approach for some reason.但我理解,如果这可能不是您想要的,或者由于某种原因它可能不适合您的整体方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.