最近使用若依,对前端的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");
先写这么多, 后续待补充。。。