@RequestMapping("testDemo04.do")
public List<Emp> testDemo04(){
List<Emp> emps = new ArrayList<Emp>();
Emp emp1 = new Emp(1111, "老龚", 33, "1", 1000.00, new Date(), new Timestamp(System.currentTimeMillis()));
Emp emp2 = new Emp(1111, "老李", 30, "0", 1600.00, new Date(), new Timestamp(System.currentTimeMillis()));
emp1.setJobs(new String[]{"销售副经理","开发工程师","测试工程师"});
emp2.setJobs(new String[]{"开发工程师","测试工程师"});
emps.add(emp1);
emps.add(emp2);
return emps;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table width="50%" border="1">
<thead>
<tr>
<th>NO.</th>
<th>ID</th>
<th>NAME</th>
<th>AGE</th>
<th>GENDER</th>
<th>SALARY</th>
<th>BIRTHDAY</th>
<th>HIREDATE</th>
<th>JOBS</th>
</tr>
</thead>
<tbody id="demo">
</tbody>
</table>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/handlebars-4.0.10.min.js"></script>
<script type="text/x-handlebars-template" id="demo_ht">
{{#each this}}
<tr>
<td>{{myCount @index}}</td>
<td>{{id}}</td>
<td>{{name}}</td>
<td>{{gender}}</td>
<td>{{age}}</td>
<td>{{salary}}</td>
<td>{{birthday}}</td>
<td>{{hiredate}}</td>
<td>
{{#each jobs}}
{{this}}
{{/each}}
</td>
</tr>
{{/each}}
</script>
{{#with jobs}}{{#each this}}{{this}}{{/each}}{{/with}}
<script type="text/javascript">
$(function(){
$.ajax({
type:"post",
url:"test/testDemo04.do",
dataType:"json",
success:function(data){
var demo_ht = Handlebars.compile($("#demo_ht").html());
Handlebars.registerHelper("myCount" , function(index){
return index + 1 ;
});
var _html = demo_ht(data);
$("#demo").html(_html);
},
error:function(){
alert("请求发生异常!");
}
});
});
</script>
</body>
</html>