写一个业务查询页面,含有以下信息:部门id、部门编号、部门名称、部门负责人、部门编制(人数)、部门职责等信息,查询页面需要服务器提供JSON格式的数据。有4个要求,(1)设计Department类(2)设计Department类(3)设计可以利用Department类的对象,向请求者返回查询的结果(4)利用Bootstrap-Table组件,设计一个视图
时间: 2024-03-05 16:50:59 浏览: 205
02_查询中使用JSON数据格式
好的,以下是对应的Java和HTML代码:
Department类:
```java
public class Department {
private int id;
private String number;
private String name;
private String leader;
private int personnel;
private String duty;
public Department(int id, String number, String name, String leader, int personnel, String duty) {
this.id = id;
this.number = number;
this.name = name;
this.leader = leader;
this.personnel = personnel;
this.duty = duty;
}
// getter and setter methods
}
```
ServletDepartment类:
```java
public class ServletDepartment extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 查询Department信息并封装为List<Department>
List<Department> departmentList = queryDepartmentInfo();
// 将List<Department>转为JSON格式数据
JSONArray jsonArray = new JSONArray();
for (Department department : departmentList) {
JSONObject json = new JSONObject();
json.put("id", department.getId());
json.put("number", department.getNumber());
json.put("name", department.getName());
json.put("leader", department.getLeader());
json.put("personnel", department.getPersonnel());
json.put("duty", department.getDuty());
jsonArray.add(json);
}
String json = jsonArray.toJSONString();
// 设置响应头
response.setContentType("application/json;charset=UTF-8");
// 返回JSON格式数据
PrintWriter out = response.getWriter();
out.write(json);
out.flush();
out.close();
}
private List<Department> queryDepartmentInfo() {
// 查询Department信息并封装为List<Department>
List<Department> departmentList = new ArrayList<>();
// ... 查询逻辑 ...
return departmentList;
}
}
```
HTML代码:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Department List</title>
<!-- 引入Bootstrap CSS文件 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<!-- 引入Bootstrap-Table CSS文件 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.css">
<style>
.container {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<table id="department-table"
data-url="servlet/department"
data-pagination="true"
data-page-list="[10, 25, 50, 100]"
data-page-size="10"
data-toolbar="#toolbar"
data-search="true"
data-locale="zh-CN">
<thead>
<tr>
<th data-field="id" data-sortable="true">部门id</th>
<th data-field="number" data-sortable="true">部门编号</th>
<th data-field="name" data-sortable="true">部门名称</th>
<th data-field="leader" data-sortable="true">部门负责人</th>
<th data-field="personnel" data-sortable="true">部门编制</th>
<th data-field="duty" data-sortable="true">部门职责</th>
</tr>
</thead>
</table>
</div>
<!-- 引入Bootstrap JS文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<!-- 引入Bootstrap-Table JS文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.18.3/locale/bootstrap-table-zh-CN.min.js"></script>
<script>
$(function () {
$('#department-table').bootstrapTable({
columns: [{
field: 'id',
title: '部门id'
}, {
field: 'number',
title: '部门编号'
}, {
field: 'name',
title: '部门名称'
}, {
field: 'leader',
title: '部门负责人'
}, {
field: 'personnel',
title: '部门编制'
}, {
field: 'duty',
title: '部门职责'
}],
responseHandler: function (res) {
return {
rows: res,
total: res.length
};
}
});
});
</script>
</body>
</html>
```
您可以根据实际需求修改以上代码。希望对您有所帮助。
阅读全文