常规的表格是这样的 …
![](https://i-blog.csdnimg.cn/blog_migrate/fd70a532e861e7ab11544d401812198d.jpeg)
客户的需求是这样的 …
一些固定项目自动带出,可修改;想在哪项下面加一行就在哪里加一行,想删除哪行就删除哪行。就要竖着的表格,不要横着的。如下图: 例如:在身高那一行下方想加一个 胸围 100cm ,就点击“在下方添加行” 于是在下方出现一行空行
实现过程
一、纵向表格部分
java后端——备好数据的过程
注意事项 : 以上前端代码
主体是谁?假设是 form (springMVC中的modelAttribute) : table里所展示主体是谁?假设是 data : form 和 data 什么关系? 一个form 对应 多个data (所以把多个data对象放进集合再把一个集合放进form对象中)
1. data对象
@Data//用了Lombok
public class Data {
private String name;
private String content;
//有参构造
public PrintData(String name, String content) {
super();
this.name = name;
this.content = content;
}
//无参构造方法
public PrintData() {
super();
}
}
2. form主体对象
@Data//用了Lombok
public class Form {
private ....;
//data集合是主体的一个属性
private List<Data> list;
.....
}
3. Controller层与页面交互的部分
@RequestMapping(value = "xxxx")
public String xxxx(Form form,Model model,...){
...
//生成默认的数据(因为比较多,我做的比较麻烦所以单独放一个方法里)
List<Data> list = generateDefaultData();
//把集合让form主体带着去页面
form.setList(list);
model.addAttribute(&