thyme leaf学习笔记2之 table便利数据跳转(一)
在开发中,作为初中级后台开发,便利数据这种工作是不可避免的,而在JSP中便利数据需要编辑大量的辅助js代码,甚至有些还需要在JS中拼接代码显示数据.
比如:
.........
for(var i = (pageNo - 4) ; i < pageNo; i ++) { if(arroundProjects[i].mainPicUrl != null) { pict = arroundProjects[i].mainPicUrl } if(arroundProjects[i].pricingUnit == 20) { priceUnit = "元/月"; } arroundHtml += "<li><a href='/search/building?projectId="+arroundProjects[i].projectId+"'>" arroundHtml += '<img src="'+pict+'" onerror="this.src='+"'/upload/1/collectionMid.png'"+'" width="195px" height="120px"/>' arroundHtml += "<h4>"+arroundProjects[i].projectName+"</h4>" arroundHtml += "<p>"+arroundProjects[i].unitPriceAvg+priceUnit+"<span>"+arroundProjects[i].districtName+"-"+arroundProjects[i].hotAreaName+"</span></p>" arroundHtml += "</a></li>";
}
这种便利方式在JS编写代码的过程中会浪费大量的时间,(特别是对于后台开发来讲,写前端的会特别头痛-.-).
而thyme leaf 框架给我们提供了非常便利的方式,因为他兼容了EL表达式和OGNL,所以在数据的获取上要方便很多.特别是thymeleaf框架与springboot框架的良好的兼容性.
后台代码的设计上:
很常规:controller中只需要对该类声明其访问路径---@RequestMapping("....")和@Controller.当然,这里对于springboot框架的声明方式还有其他的方法,就不在多介绍.
代码:
@RequestMapping("xxxx")//这是我们访问该controller的访问路径 @Controller public class BuildingController { private BuildingForm buildingForm;//这是页面中要访问的实体类,这里给做了下封装.
@RequestMapping
public String index(@RequestParam("projectId") String projectId) {
buildingForm.set(....)
return DEFAULT_VIEW;
}
//对页面要访问的实体类提供get/set方法
public BuildingForm getBuildingForm() { return buildingForm; }
@ModelAttribute//该注解声明是必不可少的.
public void setBuildingForm(BuildingForm buildingForm) { this.buildingForm = buildingForm; } }
特别是在页面加载的时候就需要便利出来的数据,我们可以放到controller的index(即默认方法)中,这样在加载页面的时候就会执行该方法,Form中的数据也就可以取到了.
前端页面代码:
<table border="0" width="800"> <tr> <th>照片</th> <th>面积</th> <th>单价</th> <th>楼层</th> <th>装修</th> <th>更新</th> </tr> <tr th:each="resource : ${buildingForm.resourceList}" th:if="${resource.area > 1000}" th:onclick="'javascript:officePage('+${resource.resourceId}+','+${buildingForm.projectDto.projectId}+')'"> <td><img src="" th:src="@{${#resource == null ? '/upload/1/collectionMin.png' : resource.mainPicUrl}}" alt=""/></td><!-->图片判断处理<--> <td><span th:text="${resource.area}">397</span><em>m²</em></td> <td><span th:text="${resource.unitPrice}">5.5</span><em>[[${@codeService.getCodeLabel('PRICING_UNIT', resource.pricingUnit)}]]</em></td> <td>[[${@codeService.getCodeLabel('FLOOR_CATEGORY', resource.floorCategory)}]]</td> <td>[[${@codeService.getCodeLabel('FITMENT_CATEGORY', resource.fitmentCategory)}]]</td> <td th:text="${resource.upDtString}">20分钟前</td> </tr> </table>
.....
function officePage(resourceId , projectId) {
window.location.href = "/search/office?resourceId="+resourceId+"&projectId="+projectId;
}
.....
前端HTML中,与EL表达式类似,直接就可以把我们需要的数据放到标签中,且不会对原本前端人员设计的页面产生太大冲突.
并且对于时间的格式化,字符串的拼接,图片错误的判断等等,都有非常简便的处理方法.这样,作为后台开发人员来讲,我们就只需要在前端人员设计的页面中,把需要的数据放到th:xxxx标签中,即可.
对于点击整行触发方法:
th:onclick="'javascript:officePage('+${resource.resourceId}+','+${buildingForm.projectDto.projectId}+')'"
这里的officePage是我们JS中写的function的name,${resource.resourceId}+','+${buildingForm.projectDto.projectId}则是function所需要的参数.这里是拼接出来的
注意:参数的顺序是不可改变的.而且这种方式的优势在于:可以动态的从后台获取跳转所需要的参数.
当然我感觉还有其他更加简便的跳转传参方式,正在思考,待优化.....
可以采用这种方式来触发,看其他笔记中也有对于thyme leaf框架JS的一些写法的,但是个人感觉比较麻烦,毕竟一个JS方法都要引入一些标签配置.而且对于初中级开发来讲,那种方式感觉也不熟悉.生硬.反正我是这么感觉的