使用thymeleaf的一些个人经验总结

jstl语法对比:

 <select name="gid">

                            <c:forEach items="${grades}" var="g">

                        	<option value="${g.gradeid}" ${g.gradeid==student.gid?'selected':""}>${g.gradeName}</option>

                            /c:forEach

</select>

<input type="radio" name="sex" ${student.sex==1?'checked':""} value="1" />男

thymeleaf:
在themeleaf页面不能直接跳转到指定html页面,会报404,解决方法,走控制器跳转
冒号和text中间不能有空格
隔行换色方法

 <tr th:each="bill,status:${infos.list}" th:object="${bill}" th:style="${status.even}?'background-color:lightblue':'background-color:pink'">
 或使用------------------------------------------------------------------
th:bgcolor="${status.even}?'lightblue':'pink'"

查询框回显,与name属性相同

th:value="${param.endTime}" 

th:selected="{t.id}=={#strings.trim(param.typeId)}

<tr th:each="user,status:${pageinfo.list}" th:object="${user}" th:bgcolor="${status.even}?'lightblue':'pink'">
                        <td><input type="checkbox" name="check"></td>
                        <td th:text="*{uid}">jjjjjj</td>
                        <td th:text="*{name}">kkkkkk</td>
                        <td th:text="*{sex}">lllllll</td>
                        <td th:text="${#dates.format(user.birthday,'yyyy-MM-dd')}">uuuuuuu</td>
                        <td th:text="*{telephone}">ooooooo</td>
                        <td th:text="${user.email}">nnnnnnn</td>
                        <td><a th:href="|/user/toupdate/${user.uid}|">更改</a></td>
                    </tr>

使用js时,如何直接获取分页数据,(使用thymeleaf内联js,示例如下,双中括号)

<script type="text/javascript" th:inline="javascript">
        $(function () {
            var pageNum = [[${pageinfo.pageNum}]];
            var pages = [[${pageinfo.pages}]];
            var isFirstPage = [[${pageinfo.isFirstPage}]];
            var isLastPage = [[${pageinfo.isLastPage}]];

非表单标签进行分页时如何设置如果是首页不能点击当前页和上一页,以及当前页不能点击(添加样式,点击事件判断有没有这个样式)

 <li th:each="p:${pageinfo.navigatepageNums}">
       <span  name="pn" th:text="${p}" th:class="${p==pageinfo.pageNum}?'disabled'"></span>
 </li>
   //---------------------------------------------------------------------------------------------------------------------------------------------
                            
 <script type="text/javascript" th:inline="javascript">
        $(function () {
            var pageNum = [[${pageinfo.pageNum}]];
            var pages = [[${pageinfo.pages}]];
            var isFirstPage = [[${pageinfo.isFirstPage}]];
            var isLastPage = [[${pageinfo.isLastPage}]];
            if (isFirstPage) {
                $("#first").addClass("disabled");
                $("#prev").addClass("disabled");
            }
            if (isLastPage) {
                $("#next").addClass("disabled");
                $("#last").addClass("disabled");
            }
            $("#first").click(function () {
                if (!$("#first").hasClass("disabled")){
                    $("#pageNum").val(1);
                    $("#qf").submit();
                }
           })
            $("#prev").click(function () {
                if (!$("#prev").hasClass("disabled")){
                    $("#pageNum").val(pageNum-1);
                    $("#qf").submit();
                }
            })
            $("#next").click(function () {
                if (!$("#next").hasClass("disabled")){
                    $("#pageNum").val(pageNum+1);
                    $("#qf").submit();
                }
            })
            $("#last").click(function () {
                if (!$("#last").hasClass("disabled")){
                    $("#pageNum").val(pages);
                    $("#qf").submit();
                }
            })

            $("span[name='pn']").click(function () {
                if (!$(this).hasClass("disabled")){
                    $("#pageNum").val($(this).html());
                    $("#qf").submit();
                }
            })
     })
 </script>

如何在表单标签元素点击实现这种效果(添加disabled属性或添加样式)

<script type="text/javascript" th:inline="javascript">
    $(function () {
        var pageNum = [[${infos.pageNum}]]; //当前页
        var pageCount = [[${infos.pages}]];//最后页
        var hasNextPage = [[${infos.hasNextPage}]];//还有下一页
        var hasPreviousPage = [[${infos.hasPreviousPage}]];//还有上一页
        if (!hasNextPage){
            $("#next").prop("disabled",true);
            $("#last").prop("disabled",true);
        }
        if (!hasPreviousPage){
            $("#prev").prop("disabled",true);
            $("#first").prop("disabled",true);
        }

        $("#first").click(function () {
            $("#pageNum").val(1)
            $("#qf").submit();
        })
        $("#next").click(function () {
            $("#pageNum").val(pageNum+1)
            $("#qf").submit();
        })
        $("#prev").click(function () {
            $("#pageNum").val(pageNum-1)
            $("#qf").submit();
        })
        $("#last").click(function () {
            $("#pageNum").val(pageCount)
            $("#qf").submit();
        })
        $("button[name='pn']").click(function () {
            $("#pageNum").val($(this).html())
            $("#qf").submit();
        })

    })
</script>
----------------------------------------------------------------------------------------
 <button class="btn btn-default" name="pn" th:text="${p}" th:disabled="(${p} ==${infos.pageNum})"></button>

如何既展示文字又展示返回数据(使用内联文本或使用文本替换,示例如下)

内联文本

<span style="font-size: 20px;margin-left: 5px;"
      id="total" th:inline="text">共[[${pageinfo.total}]]条记录
 </span>
 <span style="font-size: 20px;margin-left: 5px;"
        id="pages" th:inline="text">共[[${pageinfo.pages}]]页
  </span>
 <span style="font-size: 20px;margin-left: 5px;"
            th:inline="text">每页显示[[${pageinfo.pageSize}]]条数据
</span>

文本替换

  th:text="|共 ${page.total} 条记录,共${page.pages}页,每页行数|">

记得在开发模式下关闭thymeleaf缓存,方便及时看到编译结果

获取和设置Boolean类型的属性都用prop

 $("#checkAll").change(function () {
                $("input[name='check']").prop("checked", $(this).prop("checked"))
            })

查询条件回显

 <input type="text" name="rname" class="form-control" id="rname" th:value="${param.rname}">
 

 <option th:each="c:${cs}" th:value="${c.cid}" th:selected="${#strings.trim(param.cid)}==${c.cid}+''" th:text="${c.cname}">全部</option>