解决Thymeleaf 中 th:if、th:each、th:href、th:onclick、th:src等问题亲测

258 阅读1分钟

最近使用若依,对前端的thymeleaf语法不是很熟悉,下面是自己的笔记,大神请忽略。 

一、th:if 

gt:     great than(大于)>
ge:    great equal(大于等于)>=
eq:    equal(等于)==
lt:    less than(小于)<
le:    less equal(小于等于)<=
ne:    not equal(不等于)!=

写法如下,其它写法类似。 

<div th:if="${substringName} ne null"></div>

th:if多条件判断 :

<div th:if="(${t.pid}==${s.id}) and ${t.recycle!=1}"></div>

二、th:each 

(1)页面:

<tr th:each="userStat : ${list}">
                <td th:text="${userStat.substringName}"></td>
                <td id="ids" th:value="${userStat.id}" ></td>
</tr>

 后台:

List list = new ArrayList();
HashMap<Object, Object> objectObjectHashMap = new HashMap<>();
objectObjectHashMap.put("id", value.getId());
objectObjectHashMap.put("substringName", substringName);
objectObjectHashMap.put("returnContractPath", returnContractPath());
list.add(objectObjectHashMap);
map.put("list",list);

 (2)下拉框传值问题:

<!-- th:text 为显示的值,th:value 为实际传值 -->
<select name="contactsId" class="form-control" id="contactsId" required>
             <option value="">请选择联系人</option>
             <option th:each="list:${sysContacts}" th:value="${list.id}"
                   th:text="${list.contactName}"></option>
</select>

 三、js中引用thymeleaf

<!-- 注意标签 -->
<script th:inline="javascript"> 
    var editFlag = [[${@permission.hasPermi('system:quotation:edit')}]];
    var checkFlag = [[${@permission.hasPermi('system:quotation:check')}]];
</script>

 四、th:href多参数

<a th:href="@{'/system/business/downloadFail?failName='+${userStat.substringName}+'&returnContractPath='+${userStat.returnContractPath}}">
<input type="button" class="btn-xs btn-info" style="width: 40px" value="下载"/>
</a>

五、th:onclick多参数

<a href="#" th:onclick="removeFile([[${userStat.id}]],[[${userStat.returnContractPath}]]);">
<input type="button" class="btn btn-danger btn-xs" style="width: 40px" value="删除"/>
</a>

 js代码:

 function removeFile(userStatId,returnContractPath) {
        var formData = new FormData();
        formData.append("id",userStatId);
        formData.append("returnContractPath",returnContractPath);
        $.ajax({
            url: prefix + "/removeFail",
            type: 'post',
            async: false,
            data: formData,
            processData: false,
            contentType: false,
            success: function(result) {
                $.operate.successCallback(result);
            },
        })
    }

六、 th:src 图片引用

<!-- 如果引用的图片来自线上,直接赋值即可: -->
<img src="https://baidu.com/xxx.jpg">

<!-- 如果是静态赋值,写法上略有不同: -->
<img  th:src="@{../img/001.jpg}">

<!-- 如果是动态赋值,前端代码  -->
<img src="" id="weather-icon">

<!-- js 代码: -->
$("#weather-icon").attr("src","/weatherforecast/assets/weatherIcon/100.png");

先写这么多, 后续待补充。。。