前端是一个合并单元格页面,求一个前后端代码,后端要求java
时间: 2024-04-30 14:20:14 浏览: 51
前端代码:
```html
<table id="myTable">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">张三</td>
<td>22</td>
<td>男</td>
</tr>
<tr>
<td>23</td>
<td>女</td>
</tr>
<tr>
<td>李四</td>
<td>20</td>
<td>男</td>
</tr>
<tr>
<td>王五</td>
<td>25</td>
<td>女</td>
</tr>
</tbody>
</table>
```
后端代码:
```java
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
import java.util.TreeMap;
public class MergeCellTable {
public static void main(String[] args) {
String[] names = {"张三", "李四", "王五"};
Integer[] ages = {22, 23, 20, 25};
String[] genders = {"男", "女", "男", "女"};
List<Map<String, Object>> dataList = new ArrayList<>();
for (int i = 0; i < names.length; i++) {
Map<String, Object> data = new TreeMap<>();
data.put("name", names[i]);
data.put("age", ages[i]);
data.put("gender", genders[i]);
dataList.add(data);
}
mergeCell(dataList, "name");
for (Map<String, Object> data : dataList) {
System.out.println(data.get("name") + " " + data.get("age") + " " + data.get("gender"));
}
}
public static void mergeCell(List<Map<String, Object>> dataList, String field) {
int start = 0;
int end = 0;
Object prevValue = null;
for (int i = 0; i < dataList.size(); i++) {
Object value = dataList.get(i).get(field);
if (i == 0) {
prevValue = value;
continue;
}
if (!value.equals(prevValue)) {
if (end > start) {
merge(dataList, field, start, end);
i -= (end - start);
}
prevValue = value;
start = i;
}
end = i;
}
if (end > start) {
merge(dataList, field, start, end);
}
}
public static void merge(List<Map<String, Object>> dataList, String field, int start, int end) {
Map<String, Object> data = dataList.get(start);
data.put("rowspan", end - start + 1);
for (int i = start + 1; i <= end; i++) {
dataList.get(i).remove(field);
}
}
}
```
以上代码实现了根据指定字段合并单元格的功能。代码中使用了 Map 存储表格数据,其中 key 是列名,value 是单元格的值。mergeCell 方法根据指定字段依次遍历表格数据,如果当前单元格值和上一个单元格值不相等,则说明需要合并前面的单元格,调用 merge 方法进行合并。merge 方法将前面单元格的 rowspan 属性设置为需要合并的单元格数量,然后将前面单元格对应的 Map 中的指定字段删除,以达到合并单元格的效果。最后,遍历 Map 输出表格数据即可。
阅读全文