如何将 JS 函数中的 HTML 输入到 Thymeleaf th:text 中？

Question

我想根据对象方法的返回值显示评级。 JS 函数 - returns 一个 html 包含基于参数的星星数量。参数 - 最多 5 个数字。我通过调用 employee.getUser().getAvgGrade().

获得它

这是一个table我有

            <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>

这里是一个JS函数returnsHTML

    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 星星

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

我想用 getAvgGrade() 中的整数调用此函数（第二个 th:text ）并将 html 其 returns 放置为 th:text （因此单元格持有星星）。

Answer 1

您可以通过使用 Thymeleaf 管理星星的生成来简化此过程，而不是使用 JavaScript。

方法如下：

首先，一些 Java 测试数据（您的数据的简化版本，仅用于此演示）：

List<UserRating> userRatings = new ArrayList<>();
userRatings.add(new UserRating("Abel", 2));
userRatings.add(new UserRating("Baker", 3));
userRatings.add(new UserRating("Charlie", 4));

所以，我们有 3 个用户，等级分别为 2、3 和 4。

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>

将测试数据应用到模板的结果是这样的：

备注

此方法不需要任何 Java脚本。

我假设平均成绩是整数，但这也适用于小数值。

为了构建 5 颗星，我使用了从 1 到 5 的预定义序列：

${#numbers.sequence(1,5)}

我使用一个名为 iterStat 的 iteration status 变量来跟踪这个 5 个整数序列的进度。

我将此 iterStat.count 值（迭代中的当前位置）与平均成绩值进行比较。我用它来确定星星应该是橙色还是灰色。

th:block 元素是一种特殊的 Thymeleaf 元素。在某些迭代情况下使用起来会很方便。更多详情 here.

您当然可以通过其他方式实现这一点 - 例如，在绘制 table 之后调用 JavaScript 函数 - 但这将涉及更多 JavaScript 代码- 你的函数，加上额外的代码来迭代 JavaScript.

中的 table 值

我建议改用上述方法。但我理解，如果这可能不是您想要的，或者由于某种原因它可能不适合您的整体方法。

如何将 JS 函数中的 HTML 输入到 Thymeleaf th:text 中？

How can I input HTML from JS function into Thymeleaf th:text?

java

spring

thymeleaf