使用ajax+artTemplate完成表格的渲染(HelloApp)
对应的css,js文件在这里,https://download.csdn.net/download/kjcxmx/11033189 点击下载(包含源码压缩包哦)即可,或者自己百度找一下,都是官方通用的
pom.xml(依赖的jar包)
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.nmd</groupId>
<artifactId>HelloApp</artifactId>
<version>0.0.1-SNAPSHOT</version>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.1.3.RELEASE</version>
</parent>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-freemarker</artifactId>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.56</version>
</dependency>
<dependency>
<groupId>org.freemarker</groupId>
<artifactId>freemarker</artifactId>
</dependency>
</dependencies>
</project>
IndexController(核心控制器)
package com.nmd.controller;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
@Controller
public class IndexController {
public static JSONArray getJsonArray() {
JSONArray array = new JSONArray();
for(int i=1;i<10;i++){
JSONObject object = new JSONObject();
object.fluentPut("id", 100+i);
object.fluentPut("sex", "男"+i);
object.fluentPut("name", "你好");
object.fluentPut("age", (int)18+i);
array.add(object);
}
return array;
}
@RequestMapping("/")
public String index(HttpServletRequest request,HttpServletResponse response,Model model){
model.addAttribute("array", getJsonArray());
return "index";
}
@RequestMapping("/ajax")
@ResponseBody
public JSONArray ajax(){
return getJsonArray();
}
@RequestMapping("/ajax1")
public String ajax1(){
return "ajax";
}
//测试
@RequestMapping("/template")
public String template(){
return "template";
}
}
NmdApp(SpringBoot启动类)
package com.nmd.controller;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
/**
* @author lemon
*/
@SpringBootApplication
public class NmdApp {
public static void main(String[] args) {
SpringApplication.run(NmdApp.class, args);
}
}
application.properties(配置属性文件)
server.port=8080
spring.freemarker.cache=false
spring.freemarker.suffix=.ftl
spring.freemarker.charset=UTF-8
spring.freemarker.template-loader-path=classpath:/templates/
index.ftl
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="/css/layoutit.css" />
<link rel="stylesheet" type="text/css" href="/css/bootstrap-combined.min.css" />
<title>Welcome!</title>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<h3>
<a href="/ajax">点击跳转REST Ajax传值页面</a>
<a href="/ajax1">点击跳转Ajax传值页面</a>
</h3>
<table class="table">
<thead>
<tr>
<th>
学号
</th>
<th>
名字
</th>
<th>
性别
</th>
<th>
年龄
</th>
<th>
操作
</th>
</tr>
</thead>
<tbody>
<#list array as content>
<#if content_index%2 == 0>
<tr class="warning">
<td>${content.id}</td>
<td>${content.name}</td>
<td>${content.sex}</td>
<td>${content.age}</td>
<td><button class="btn">删除</button></td>
</tr>
</#if>
<#if content_index%2 != 0>
<tr class="errors">
<td>${content.id}</td>
<td>${content.name}</td>
<td>${content.sex}</td>
<td>${content.age}</td>
<td><button class="btn">删除</button></td>
</tr>
</#if>
</#list>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
ajax.ftl
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="/css/layoutit.css" />
<link rel="stylesheet" type="text/css" href="/css/bootstrap-combined.min.css" />
<script type="text/javascript" src="/js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="/js/template.js"></script>
<script type="text/javascript" src="/js/template-web.js"></script>
<title>Welcome!</title>
<script type="text/javascript">
function getData(){
$.ajax({
url:'ajax',
type:'post',
success:function (data) {
console.log(data);
var datas={
items: data
};
var html = template('data', datas);
document.getElementById('content').innerHTML = html;
}
});
}
getData();
</script>
</head>
<body>
<script id="data" type="text/html">
<%for(var i in items){%>
<tr>
<td><%=items[i].id%></td>
<td><%=items[i].name%></td>
<td><%=items[i].sex%></td>
<td><%=items[i].age%></td>
<td><button class="btn">删除</button></td>
</tr>
<%}
%>
</script>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<h3>
这里是Ajax传值页面.<a href="javascript:history.back(-1)" class="primary">返回上一页</a>
</h3>
<table class="table">
<thead>
<tr>
<th>
学号
</th>
<th>
名字
</th>
<th>
性别
</th>
<th>
年龄
</th>
<th>
操作
</th>
</tr>
</thead>
<tbody id="content">
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
template.ftl(测试模板,可以不使用)
<html>
<head>
<script type="text/javascript" src="/js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="/js/template.js"></script>
<script type="text/javascript" src="/js/template-web.js"></script>
<title>Welcome!</title>
</head>
<body>
<script type="text/javascript">
function getData(){
$.ajax({
url:'ajax',
type:'post',
success:function (data) {
console.log(data);
var datas={
items: data
};
var dataq ={
items:[{'name':'名字一','val':'数据一'},
{'name':'名字二','val':'数据二'},
{'name':'名字三','val':'数据三'},
{'name':'名字四','val':'数据四'}
]
};
var html = template('data', datas);
document.getElementById('content').innerHTML = html;
}
});
}
getData();
</script>
<a href="javascript:history.back(-1)" class="primary">返回上一页</a>
<table id="content">
</table>
<script id="data" type="text/html">
{{$data}}
<ul>
<%for(var i in items){%>
<li>
name:<%=items[i].name%> id:<%=items[i].id%> sex:<%=items[i].sex%> age:<%=items[i].age%>
</li>
<%}%>
</ul>
<%for(var i in items){%>
<tr>
<td><%=items[i].id%></td>
<td><%=items[i].name%></td>
<td><%=items[i].sex%></td>
<td><%=items[i].age%></td>
</tr>
<%}%>
</script>
<div id="content1"></div>
<script id="test" type="text/html">
{{$data}}
<h1>{{title}}</h1>
{{include 'list'}}
</script>
<script id="list" type="text/html">
<ul>
{{each list value i}}
<li>索引 {{i + 1}} :{{value}}</li>
{{/each}}
</ul>
</script>
<script>
var data = {
title: '嵌入子模板',
list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content1').innerHTML = html;
</script>
</body>
</html>