您的位置:首页 > 其它

thymeleaf实现简单的条件搜索并分页搜索功能

2017-09-26 14:19 906 查看
首先看一下模板:

大致就是可以通过上面的某个或者多个条件实现按条件分页搜索的功能。因为前端界面用的是HTML并没有用jsp所以没办法使用c:标签,那么怎么通过thymeleaf实现jsp的功能呢?

好吧看一下代码:

<form th:action="@{/person/search}" class="form-inline" th:method="post" id="search-form">
<input type="hidden" name="page" th:value="${page.number}">
<div class="form-group form-group-sm">
<label>调查对象</label>
<input type="text" class="form-control width-80" name="fullName"
th:value="${search}?${search.fullName}">
</div>
<div class="form-group form-group-sm">
<label>身份证</label>
<input type="text" class="form-control" name="idCode" th:value="${search}?${search.idCode}">
</div>
<div class="form-group form-group-sm" th:switch="${search}?${search.gender}">
<label>性别</label>
<span th:case=null>
<label class="radio-inline">
<input type="radio" name="gender" value="男"> 男</label>
<label class="radio-inline">
<input type="radio" name="gender" value="女"> 女</label>
</span>
<span th:case="'男'">
<label class="radio-inline">
<input type="radio" name="gender" value="男" checked="checked"> 男</label>
<label class="radio-inline">
<input type="radio" name="gender" value="女"> 女</label>
</span>
<span th:case="'女'">
<label class="radio-inline">
<input type="radio" name="gender" value="男"> 男</label>
<label class="radio-inline">
<input type="radio" name="gender" value="女" checked="checked"> 女</label>
</span>
</div>
<div class="form-group form-group-sm">
<label>联系方式</label>
<input type="text" class="form-control width-120" name="telephone"
th:value="${search}?${search.telephone}">
</div>
<div class="form-group form-group-sm">
<label>调查时间</label>
<input type="text" class="form-control width-100 text-center date-picker" name="startDate"
th:value="${#calendars.format(search.startDate,'yyyy-MM-dd')}">
-
<input type="text" class="form-control width-100 text-center date-picker" name="endDate"
th:value="${#calendars.format(search.endDate,'yyyy-MM-dd')}">
</div>
<div class="form-group form-group-sm">
<input type="submit" value="查询" class="btn btn-primary btn-sm">
<!--<a  class="btn btn-primary btn-sm">查询</a>-->
<!-- <a th:href="javascript:document.getElementById('orderForm').submit()" class="btn btn-success btn-sm">查询</a>-->
</div>
</form>

ok,大致就是这样的,因为我们点击下一页的时候要保证之前选中的条件还存在使用每个标签的value值就是我们之前选中的值,search是我们自定义的一个查询类里面封装了一些查询的属性也就是上面图片里的查询条件。

我想讲的是th:switch 和th:case这两个我们可以通过判读switch中的值来确定我们那个单选框是选中的(找了半天突然想到了,网上都是用的下拉选项和CheckBox...)

还有一个就是thymeleaf中的日期转换了也很简单 其中的search.startDate 就是我们search类中的属性。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: