Ajax 实现分页及表与表的级联

javawangli · 发表于 2013-1-29 09:28:18

Ajax 实现分页及表与表的级联
<div class="Section0" style="">

时间过的真快转眼间有快到周末了，真向往每周周末的时光。今天我们的项目经理是不是头脑发热，让我用ajax实现公司职工表的增，删，改，查，分页查询；着实让我头疼；经理之命不可违啊，写了一天终于完成了；今天想把实现分页的方法写在博客中和大家交流交流。
首先，我对数据中的表进行了分析：
如图

经过分析表中有个deptnoo 部门编号字段与数据库中的dept（如图）表相对应及将表中的编号换成部门名称，所以此处要实现表与表的级联

主要实现代码如下
这里我主要写ajax实现代码
首先将数据封装，（bean）让后写业务实现层(dao)，在些逻辑实现层(service)；及MCV框架开发，大家都熟悉吧这就不多说了。
再创建一个jsp页面
  <%@ 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%>"> <title>worker.jsp</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><script src="./js/util.js" type="text/javascript"></script><script src="./js/emp.js" type="text/javascript"></script><script type="text/javascript">window.onload = function() { //$("addemp").style.display = "none";$("upemp").style.display="none";}</script></head><body><h1> 用户查询的请求</h1><input type="button" value="查询所有用户"  /> <div id="content"><table border="1px" cellpadding="0" cellspacing="0"><caption>员工信息表</caption><thead><tr><th>编号</th><th>姓名</th><th>岗位</th><th>入职时间</th><th>领导</th><th>薪水</th><th>奖金</th><th>部门</th><th>  操作</th></tr></thead><tbody id="listemps"> </tbody></table></div> <div id="pageinfo">    <a href="javascript:getPageInfo(1)">首页</a>    <a href="javascript:getPageInfo(2)" >上一页</a>    <a href="javascript:getPageInfo(3)">下一页</a>    <a href="javascript:getPageInfo(4)">末页</a></div> </body></html>

Ajax代码

  var empdoc ;function getPageInfo(mark) {       var nowpage = empdoc.getAttribute("nowpage");var countpage = empdoc.getAttribute("countpage");  switch (mark) {case 1:nowpage=1;break;case 2:nowpage--;break;case 3:nowpage++;break;case 4:nowpage=countpage;break;} //获取xhr对象var xhr = getXhr();//封装请求信息xhr.open("get", "./listEmp.do?nowpage="+nowpage, true);//发送请求xhr.send();//根据服务器端传递xhr.readyState触发的事件进行处理xhr.onreadystatechange = function() {//根据readyState是否处理完毕,status服务是否返回成功if (xhr.readyState == 4 && xhr.status == 200) {//获得xml的document对象var doc = xhr.responseXML;//获取xml文件的跟标签    var root = doc.documentElement;    //获取跟标签的所有子节点    var emps = root.childNodes; //获取tbody对象var listemps = document.getElementById("listemps");listemps.innerHTML = "";for ( var i = 0; i < emps.length; i++) {//判断该节点是否是元素节点,目的兼容IE firefox opera 浏览器if (emps.nodeType == 1) {var emptr = document.createElement("tr");//获取该节点下面的所有子节点var empcs = emps.childNodes;for ( var j = 0; j < empcs.length; j++) {var emptd = document.createElement("td");//判断该节点是否是元素节点,目的兼容IE firefox opera 浏览器if (empcs[j].nodeType == 1) {emptd.appendChild(document.createTextNode(empcs[j].firstChild.nodeValue));emptr.appendChild(emptd);}}var dutd = document.createElement("td");emptr.appendChild(dutd);listemps.appendChild(emptr);} } }}  }

   Servlet中定义nowpage,countpage

     String npage = request.getParameter("nowpage");int nowpage = 1;if (npage == null) {} else {nowpage = Integer.valueOf(npage);} // 创建业务对象EmpServiceImpl esi = new EmpServiceImpl();int countrecord = esi.getCountRecord(); int countpage = countrecord % EmpServiceImpl.PAGESIZE == 0 ? countrecord/ EmpServiceImpl.PAGESIZE: countrecord / EmpServiceImpl.PAGESIZE + 1; if(nowpage<=1){nowpage=1;} if(nowpage>=countpage){nowpage=countpage;} List<Emp> emps = esi.findNowPageInfo(nowpage); // 如果以xml数据返回响应必须设置头位如下方式,并且放在响应的第一行response.setContentType("text/xml;charset=UTF-8");PrintWriter out = response.getWriter();out.println("<?xml version='1.0' encoding='UTF-8'?>");out.println("<emps nowpage='" + nowpage + "' countpage='" + countpage+ "'>");for (Emp emp : emps) {out.println("<emp>");out.println("<empno>" + emp.getEmpno() + "</empno>");out.print("<ename>" + emp.getEname() + "</ename>");out.println("<job>" + emp.getJob() + "</job>");out.print("<hiredate>" + emp.getHiredate() + "</hiredate>");out.println("<mgr>" + emp.getMgr() + "</mgr>");out.print("<sal>" + emp.getSal() + "</sal>");out.print("<comm>" + emp.getComm() + "</comm>");out.print("<deptno>" + emp.getDeptno() + "</deptno>");out.println(" </emp>");} out.println("</emps>");out.flush();out.close();

  在实现表与表的级联时就要将dept数据查询，然后利用ajax创建option添加到select中去
             <tr>    <td>部门:</td>       <td>       <select name ="deptno" id="deptno">    <option value="10">请选择部门</option> </select>       </td>    </tr>

Ajax代码

  function listDepts(doc, value) {//获取根节点var root = doc.documentElement;//获取根节点的子节点var depts = root.childNodes; //获取HTML dom 对象var deptnos = document.getElementById("deptno");//遍历for ( var i = 0; i < depts.length; i++) { //判读是否是元素节点,目的是兼容各个浏览器if (depts.nodeType == 1) {var dptoption = document.createElement("option");var eles = depts.childNodes;for ( var j = 0; j < eles.length; j++) {if (eles[j].nodeType == 1) {if (j == 0) {if (value == eles[j].firstChild.nodeValue) {dptoption.setAttribute("selected", true);}dptoption.setAttribute("value",eles[j].firstChild.nodeValue);} else if (j == 1) {dptoption.appendChild(document.createTextNode(eles[j].firstChild.nodeValue));}} }deptnos.appendChild(dptoption);}} }

		自动登录	找回密码
密码			立即注册