本文章 为转载

经过一段时间的工作，我的第一个项目已经快要上线了。本篇文章介绍些thymeleaf在工作中的实际应用，但是更多的还是一些前端处理后台数据的一些思路，如果有什么不正确的地方，希望大家指点。

1.th:each

<dd th:each="grade: ${application.sysDictMap.learnPeriod}">//application.sysDictMap  是从数据字典取出的方式。<label class=""><input type="checkbox" th:value="${grade.AA}" th:attr="val=${grade.BB}"> //这里面的AA 和 BB就是你需要的数据的名称比如说AA可以是name，BB可以是id。。。</label><span th:text="${grade.CC}" th:attr="val=${grade.DD}"></span></dd>

 

　1’ .上述的${application.sysDictMap.learnPeriod}是可以直接从model里面取出来的，但如果，从model里面取不出来，必须要走接口才能取得到，那样就需要用如下的方法（与Thymeleaf没什么联系，是一种前端方法）：

　　 a.以下是写在子页面上的js:

<div th:include="jsLead::jsLead"><!-- jsLead 全局js引入 -->
</div>
<script th:inline="javascript">App2.orgtid = [[${session.XXXXX.id}]]; //这里是从页面model取出并作为公共变量。//列表获取需要显示的信息App2.screenSchoolList(App2.orgtid);//此处为调用名为screenSchoolList的一个方法，括号里面为传递的一个参数，但是这个参数同时也调用了名为orgtid的值。</script>

　b.以下是写在app2.js文件里面的js代码：

　　//当前切换区域下的校区列表

var erpApp2 = {orgtid : '',aa: '',//XX筛选条件收集parambb: '',//XX筛选条件收集paramcc: '',//XX筛选条件收集paramdd: 20,//页数ee:'',//学生ff:'',//职位gg:'',//校区screenSchoolList: function (id){$.ajax({url: '/XX/XX/'+id,//接口地址type: 'GET',//请求类型dataType: "JSON",//数据类型success: function(data){$.each(data.data.XX,function (index, el){var dd = '<dd>'+'<label class=""><input type="checkbox" value="'+this.Name+'" val="'+this.id+'"></label>'+'<span val="'+this.id+'">'+this.Name+'</span>'+'</dd>';$('.XX').after(dd);});}});}}attention:如果参数传的方式是如下的a,切记加上traditional,如果是方式b,要使用contentType.a.data: {'ids':ids},//参数traditional: true,b.data: JSON.stringify(parameter),//参数contentType : 'application/json;charset=utf-8',

 2.th:if

　　这条补充呢就是说th:if里面可以放各种各样的表达式~~~高大上啦，下面是两个例子：

<li class="XX" th:if="${User.Status == 0 || AA != 0 || BB != 0}" >
<p class="XX" th:if="${!(User.userCode == null || User.userCode == '')}"></p>

  第二个 th:if 呢有一个需要注意的point。

　　判断不能写成 （User.userCode ！= null && User.userCode ！= ' '；）如果要写就要写成上述例子2的形式。

3.th:class

<span th:class="${User.Sex == 1 ? 'new-radio pull-left on':'new-radio pull-left'}" is-male="1"></span>

　如果 user.sex是 1 的话，执行问号后面的，也就是说class会变成 new-radiio pull-left on,否则就会变成 new-radiio pull-left 。这种方法在angular里面也同样适用。

4.th:selected

<select class="" name="account"><option th:each="subject :${application.subjectList}" th:selected="${student.Subject} == ${teacher.teachSubject} ? 'selected':'false'" th:text="${subject.name}" th:value="${subject.id}"></option>
</select>

 5.th:href

<a th:href="@{'/AA/BB/CCpage/'+${userTid}}">基本信息</a>

6.th表达式工具对象

 

• #dates 与java.util.Date对象的方法对应，格式化、日期组件抽取等等
• #calendars 类似#dates，与java.util.Calendar对象对应
• #numbers 格式化数字对象的工具方法
• #strings 与java.lang.String对应的工具方法：contains、startsWith、prepending/appending等等
• #objects 用于对象的工具方法
• #bools 用于布尔运算的工具方法
• #arrays 用于数组的工具方法
• #lists 用于列表的工具方法
• #sets 用于set的工具方法
• #maps 用于map的工具方法
• #aggregates 用于创建数组或集合的聚合的工具方法
• #messages 用于在变量表达式内部获取外化消息的工具方法，与#{…}语法获取的方式相同
• #ids 用于处理可能重复出现（例如，作为遍历的结果）的id属性的工具方法

 

eg1:判断集合的长度  #lists

<span>共<i class="XX" th:text="${#lists.size(people)}"></i>个人</span>

7*.前端从数据字典取出数据的方法。

　　这次项目接触了数据字典，下面是从数据字典取出数据的一些方式。其实上面的第一个例子里面就有从数据字典取出数据放入HTML的例子，但是那是类似angular，以model形式直接将数据放入标签内。

 

1.<dd th:each="grade: ${application.sysDictMap.learnPeriod}"</dd>
2.<span class="" th:text="${application.subjectMap[teacherInfo.teachSubject].name}"></span>        

除上述两个例子之外，还可能存在这种情况，

　　1.Java后台返回来的是‘1,2,3’字符串的形式，但是实际上比如1代表小学，2代表初中，3代表高中。这样就无法向上述那样直接放在HTML标签里去取，而是需要在js中做处理，然后用prepend或者before或者after等jQuery方法再拼接到HTML中：

 

var AAAA= [[${teacherInfo.teachLearnPeriod}]];//xueduan
//学段 Periodvar arr= AAAA.split(',');var teaPeriodHtml = '';for(var i=0;i<arr.length;i++){//var num = parseInt(arr[i]);var n= i+1;nuM = parseInt(teaPeriodArr[i]);teaPeriodHtml +='<span class="" val="'+nuM+'">'+App2.learnPeriod[nuM-1].dataLabel+'</span>';}$(".prepend").before(teaPeriodHtml);

　2. 让返回来的数据被选中。

　　　　a.$('.AA .BB[value='+val+']').addClass('sklx-hover');

　　　　b.让下拉框选中：

 

$('.AA').find('option').each(function (index,el){if($(this).attr('value')-1 == CC){$(this).attr('selected','selected');}
})

当然，后台还会返回很多各种各样稀奇古怪的东西，还需要前端的各位程序员机智应对。

 8.刷新当前页

　　往往在ajax走到success的函数后，如果成功了，一般会选择刷新当前页或者选择跳新页面。刷新当前页比如说是编辑页面有弹出框，在弹出框编辑好后，点击确定，弹出框消失，刷新当前页，更新当前页编辑的内容，这种方法为：

$.ajax({url: '',//接口地址type: '',//请求类型：get postdata: ,//参数contentType : 'application/json;charset=utf-8',dataType: "JSON",//数据类型success: function(data){ if(data.result.code == 0){//成功//刷新当前页window.location.reload(true);}else{layer.msg('未编辑成功,请重新编辑');}}});

9.跳转其他页

$.ajax({url: '',//接口地址type: '',//请求类型：get postdata: ,//参数contentType : 'application/json;charset=utf-8',dataType: "JSON",//数据类型success: function(data){ if(data.result.code == 0){//成功//跳转其他页window.location.href='此处是接口';}else{layer.msg('未编辑成功,请重新编辑');}}});