部门员工级联也就是,通过选择部门,员工也将会随着部门的改变而改变

通常我们查到有哪些部门,然后在Java中用集合来表示,但是如何用JavaScript来获取这些值变成了我们的一个短板,解决方法就是采用中间格式,例如json,XML文件等

显示部门

这里我们采用了Hibernate来获取部门,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
@WebServlet("/dep.do")
public class DepServlet extends HttpServlet {
private static final long serialVersionUID = 1L;

private DepDAO depDao = new DepDAO();

protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
String method = request.getParameter("method");
if("findAll".equals(method)) {
doFindAll(request, response);
}


}

private void doFindAll(HttpServletRequest request, HttpServletResponse response) throws IOException {
List<Dep> deps = depDao.findAll();
StringBuffer sb = new StringBuffer();
sb.append("[");
for (Dep dep : deps) {
sb.append("{ 'depId': '" + dep.getDepId() + "', 'depName': '" + dep.getDepName() + "'},");
}
sb.deleteCharAt(sb.length() - 1);
sb.append("]");
System.out.println(sb);

response.getWriter().print(sb.toString());
}

}

对应 index.jsp 代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var dep = document.getElementById("dep");
var emp = document.getElementById("emp");

/*---------------- 部门 -----------*/
var request = new XMLHttpRequest();
request.open("get", "dep.do?method=findAll");
request.send();
request.onreadystatechange = function() {
if( request.readyState == 4 && request.status == 200) {
var json = eval(request.responseText);
for ( var i = 0; i < json.length; i++ ) {
var option = new Option(json[i].depName, json[i].depId);
dep.add(option);
}
doEmp();
}

}

dep.onchange = function() {
doEmp();
}


根据选择的部门得到该部门的员工

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
@WebServlet("/emp.do")
public class EmpServlet extends HttpServlet {
private static final long serialVersionUID = 1L;

private EmpDAO empDao = new EmpDAO();

protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

response.setContentType("text/html;charset=utf-8");
String method = request.getParameter("method");
if("findByDepId".equals(method)) {
doFindByDepId(request, response);
}


}

private void doFindByDepId(HttpServletRequest request, HttpServletResponse response) throws IOException {

String depId = request.getParameter("depId");
System.out.println(depId);
List<Emp> emps = empDao.findByProperty("dep.depId", Integer.parseInt(depId));
StringBuffer sb = new StringBuffer("[");
for (Emp emp : emps) {
sb.append("{ 'empId': '" + emp.getEmpId() + "', 'empName': '" + emp.getEmpName() + "'}," );
}
sb.deleteCharAt(sb.length() - 1);
sb.append("]");
response.getWriter().print(sb.toString());

}

}

对应index.jsp代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function doEmp() {
/*首先移除原来有的子节点*/
while(emp.hasChildNodes()) {
emp.removeChild(emp.firstChild);
}


/*添加原来的子节点*/
var request2 = new XMLHttpRequest();
request2.open("get", "emp.do?method=findByDepId&depId=" + dep.value);
request2.send();
request2.onreadystatechange = function() {
if( request2.readyState == 4 && request2.status == 200 ) {
/*这里将获得的文本按照严格意义转换为js中的数组*/
var empJson = eval(request2.responseText);
for ( var i = 0; i < empJson.length; i++ ){
var option = new Option(empJson[i].empName, empJson[i].empId);
emp.add(option);
}
}
}
}


注意事项

  1. 对于每次选择,都需要员工清空,否则,将会累加,员工只会越来越多
  2. 每次必须将获得的请求的响应文本格式化(eval)为js对象,否则将不可以调用js对象的属性

    var empJson = eval(request2.responseText);


总代码如下:

  1. index.jsp
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    %>

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <base href="<%=basePath%>">

    </head>

    <body>
    部门:<select id="dep"></select>
    员工:<select id="emp"></select>
    </body>
    <script>
    var dep = document.getElementById("dep");
    var emp = document.getElementById("emp");

    /*---------------- 部门 -----------*/
    var request = new XMLHttpRequest();
    request.open("get", "dep.do?method=findAll");
    request.send();
    request.onreadystatechange = function() {
    if( request.readyState == 4 && request.status == 200) {
    var json = eval(request.responseText);
    for ( var i = 0; i < json.length; i++ ) {
    var option = new Option(json[i].depName, json[i].depId);
    dep.add(option);
    }
    doEmp();
    }

    }

    dep.onchange = function() {
    doEmp();
    }

    /*----------------- 员工 -----------*/
    function doEmp() {
    /*首先移除原来有的子节点*/
    while(emp.hasChildNodes()) {
    emp.removeChild(emp.firstChild);
    }


    /*添加原来的子节点*/
    var request2 = new XMLHttpRequest();
    request2.open("get", "emp.do?method=findByDepId&depId=" + dep.value);
    request2.send();
    request2.onreadystatechange = function() {
    if( request2.readyState == 4 && request2.status == 200 ) {
    var empJson = eval(request2.responseText);
    for ( var i = 0; i < empJson.length; i++ ){
    var option = new Option(empJson[i].empName, empJson[i].empId);
    emp.add(option);
    }
    }
    }
    }

    </script>
    </html>

总结:

对于部门与员工级联,我们首先需要获得部门,然后根据我们当前所选择的部门获得员工,这里需要注意的是,我们采用了ajax进行通信,所以当我们获得员工的时候,需要将获得的员工转换为一个中间格式的文本进行传输,这里我们使用了json!