thymeleaf实现简单的条件搜索并分页搜索功能
2017-09-26 14:19
906 查看
首先看一下模板:
大致就是可以通过上面的某个或者多个条件实现按条件分页搜索的功能。因为前端界面用的是HTML并没有用jsp所以没办法使用c:标签,那么怎么通过thymeleaf实现jsp的功能呢?
好吧看一下代码:
ok,大致就是这样的,因为我们点击下一页的时候要保证之前选中的条件还存在使用每个标签的value值就是我们之前选中的值,search是我们自定义的一个查询类里面封装了一些查询的属性也就是上面图片里的查询条件。
我想讲的是th:switch 和th:case这两个我们可以通过判读switch中的值来确定我们那个单选框是选中的(找了半天突然想到了,网上都是用的下拉选项和CheckBox...)
还有一个就是thymeleaf中的日期转换了也很简单 其中的search.startDate 就是我们search类中的属性。
大致就是可以通过上面的某个或者多个条件实现按条件分页搜索的功能。因为前端界面用的是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类中的属性。
相关文章推荐
- TP搜索,分页(保留搜索条件)简单实现
- Vue.js实现多条件筛选、搜索、排序及分页的表格功能
- Vue.js实践:实现多条件筛选、搜索、排序及分页的表格功能
- 【转】实现多条件筛选、搜索、排序及分页的表格功能
- Vue.js实现多条件筛选、搜索、排序及分页的表格功能
- Vue.js实现多条件筛选、搜索、排序及分页的表格功能
- Android 框架设计Demo,一个简单的MVP示例搜索功能,网络请求用Retrofit+RxJava实现
- GridView高效分页和搜索功能的实现代码
- redis实现简单的条件查询功能
- Yii框架结合sphinx,Ajax实现搜索分页功能示例
- Hibernate实现不带条件的简单分页查询
- MVC3使用MvcPager实现简单分页功能
- PHP简单实现数字分页功能示例
- 与具体ORM实现无关的属性过滤条件封装类, 主要记录页面中简单的搜索过滤条件.
- 利用PHP访问数据库_实现分页功能与多条件查询功能的示例
- 使用Lucene实现一个简单的布尔搜索功能
- Java实现简单的分页功能
- Ajax实现搜索功能的分页
- jQuery实现的简单前端搜索功能示例
- 使用 JavaScript 实现简单候选项推荐功能(模糊搜索)【收藏】【转】