thyme leaf table便利数据跳转

Posted 时间随风

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了thyme leaf 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中只需要对该类声明其访问路径[email protected]("....")和@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}}" /></td><!-->图片判断处理<-->
          <td><span th:text="${resource.area}">397</span><em>m2</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方法都要引入一些标签配置.而且对于初中级开发来讲,那种方式感觉也不熟悉.生硬.反正我是这么感觉的
  

    

以上是关于thyme leaf table便利数据跳转的主要内容,如果未能解决你的问题,请参考以下文章

thyme leaf中的Session username找不到,为null

Android 自定义View 多片叶子叶子旋转滑动

为啥使用了form表单之后页面会跳转,并且页面一片空白

SpringBoot_集成Thymeleaf模板

如何将一个页面的内容或者一个table html代码 写入数据库

CakePHP 数学计算领域?