敏捷实践总结(二)——技术实现-联动菜单并保持数据的Demo

前端之家收集整理的这篇文章主要介绍了敏捷实践总结(二)——技术实现-联动菜单并保持数据的Demo前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

页面上的级联菜单的实现,在网上有很多资料,实现起来也相对简单。这里呢,由于我也花了一些时间研究,所以在此跟大家分享一下开发经验。


目前,我认为能够实现菜单联动主要有这么两个思路:

1、页面加载时,每个选择框都要加载数据。当用户对选择框开始选择时,再进行精确定位。这种方式直接使用JavaScript实现很轻松;

2、页面加载时,只显示第一个选择框的所有数据。当用户进行选择后,再去加载第二个选择框的数据。


技术实现有这么几个参考:

1、直接写ajax代码,在页面中直接采用ajax提交的方式;

2、由于项目中使用dwz框架,可以模拟dwz框架中联动菜单的例子进行实现;

3、采用dwr框架,用户选择下拉框后调用后台java类,加载数据。


我这里的实现,采用了第二种实现思路以及dwr框架。

本例开发环境:struts2+Spring+dwr。dwr的环境配置以及与Spring的集成就不说了,大家可以自己搜,也可以在八期童鞋博客里边儿找,这里主要说实现思路。

Demo介绍:根据学院和专业信息查询班级信息。任何一个学院都有多个专业,学院与专业都以下拉框的形式作为查询条件。

实现思路:

1、页面初次加载时,加载学院信息;

2、用户选择查询条件,选择学院时,使用js添加专业信息;

3、用户提交时查询条件时,由于会刷新界面,选择添加会消失,这时需要将学院id,专业id以及页面信息都发送到后台action,在后台重新查询一次,前台重新绑定。


1、html中的主要代码

这里关于专业的绑定信息,页面初次加载时,不会进行绑定。这里进行绑定的作用是进行定位,点击查询后,将专业的id传到后台,将数据重新查一次,保持数据。

  1. <form name="searchForm" rel="pagerForm" onsubmit="return navTabSearch(this);" action="${contextPath }/classes/queryClassesAction.action" method="post">
  2. <div class="searchBar" >
  3. <table class="searchContent">
  4. <tr>
  5. <td>
  6. <label>学院</label>
  7. <select id="collegeName" name="collegeName" onchange="getDepartmentByCollegeId()">
  8. <option value="">--请选择学院--</option>
  9. <c:forEach items="${college }" var="college" >
  10. <option id="${college.id }" value="${college.id }" ${college.id eq collegeId ? "selected":"" }>${college.name }</option>
  11. </c:forEach>
  12. </select>
  13. </td>
  14. <td>
  15. <label>专业</label>
  16. <select id="departmentName" name="departmentName" onchange="getDepartment(this)">
  17. <option value="">--请选择专业--</option>
  18. <c:forEach items="${department }" var="department" >
  19. <option id="${department.id}" value="${department.id }" ${department.id eq departmentId ? "selected":"" }>${department.name }</option>
  20. </c:forEach>
  21. </select>
  22. </td>
  23. </tr>
  24. </table>
  25. </div>
  26. </form>


2、js代码

getDepartmentByCollegeId()方法即为根据学院Id,查询专业信息。选择学院下拉框选择条件时触发。该方法调用后台dwrManager,获取专业信息。

  1. <script type="text/javascript" src="dwr/engine.js"></script>
  2. <script type="text/javascript" src="dwr/util.js"></script>
  3. <script type="text/javascript" src="dwr/interface/departmentService.js"></script>
  4. <script type="text/javascript">
  5. /*
  6. * 根据学院Id得到专业信息
  7. */
  8. function getDepartmentByCollegeId(){
  9. var college = document.getElementById("collegeName");
  10. collegeId = college.options[college.selectedIndex].value;
  11. var department = document.searchForm.departmentName;
  12. department.options.length=1;
  13. department.options[0] = new Option("--请选择专业--"," ");
  14. //dwr调用后台方法,根据学院Id查询专业信息
  15. departmentService.getDepartmentByCollegeId(
  16. collegeId,function(datas){
  17. var dataArray = eval(datas);
  18. //依次遍历传回的json每条数据
  19. for (var i = 0; i < dataArray.length; i++) {
  20. //传递参数
  21. department.options[i] = new Option(dataArray[i].name,dataArray[i].id);
  22. }
  23. department.options[0].selected=true;
  24. }
  25. );
  26. }
  27. </script>


3、通过dwr返回json串

下面代码返回类似于这样的串:"[{"id":"123","name":"456"}]"

  1. /**
  2. * @author : lzq
  3. * @group : tgb8
  4. * @Date : 2014-2-18 下午8:31:41
  5. * @Comments : dwr
  6. * @Version : 1.0.0
  7. */
  8. public class DwrManager {
  9. private IClassesBean classesService;
  10. /**
  11. * @MethodName : getDepartmentByCollegeId
  12. * @Description : 根据学院Id获取专业
  13. * @param collegeId
  14. * @return
  15. */
  16. public String getDepartmentByCollegeId(String collegeId){
  17. String out = "";
  18. List<Department> departments = classesService.findDepartmentByCollegeId(collegeId);
  19. if(!"".equals(departments) && departments!=null){
  20. // out+="[[\" \",\""
  21. // +"--请选择--"+"\"],";
  22. out= "[{\"id\":\""+" "+"\",\"name\":\""+"--请选择专业--"+"\"},";
  23. // out+= "[";
  24. for(int i=0;i<departments.size();i++){
  25. out+="{\"id\":\""
  26. +departments.get(i).getId()+"\",\"name\":\""
  27. +departments.get(i).getName()+"\"},";
  28. }
  29. out=out.substring(0,out.length()-1)+"]";
  30. }
  31. // outMsg(out);
  32. // String a= "[{\"id\":\"123\",\"name\":\"456\",}]";
  33. return out;
  34. }
  35. public IClassesBean getClassesService ( ) {
  36. return classesService;
  37. }
  38. public void setClassesService ( IClassesBean classesService ) {
  39. this.classesService = classesService;
  40. }
  41. }


4、action中的实现

这里包含privateinitQueryClasses()、privatequeryEqualName()和 publicqueryClasses()三个方法。前两个方法供queryClasses方法调用

私有方法initQueryClasses(),加载所有学院信息,如果学院Id不为空,则根据学院Id查询对应的专业信息。并将学员信息、专业信息设到request中;

私有方法queryEqualName(),判断如果查询条件不空,则将其穿到后台进行查询

公有方法queryClasses(),action的查询方法,初始信息,设置查询条件,调用Manager方法并返回查询界面。

  1. /**
  2. * @author : lzq
  3. * @group : tgb8
  4. * @Date : 2014-1-4 下午12:51:33
  5. * @Comments : 班级管理的action
  6. * @Version : 1.0.0
  7. */
  8. public class ClassesAction extends ActionSupport {
  9. //注入实体
  10. private College college;
  11. private Department department;
  12. private Classes classes;
  13. protected HttpServletRequest request = ServletActionContext.getRequest();
  14. //注入两个选择框的name属性
  15. private String departmentName;
  16. private String collegeName;
  17. //班级服务
  18. private IClassesBean classesService;
  19.  
  20. /**
  21. * @MethodName : queryClasses
  22. * @Description : 查询班级
  23. * @return
  24. */
  25. public String queryClasses()
  26. {
  27. //初始化查询信息
  28. HttpServletRequest requests= initQueryClasses(request);
  29. //等值查询条件
  30. LinkedHashMap<Object,Object> equalFields = queryEqualName();
  31. //查询班级,调用后台方法
  32. PageModel<Classes> pageModel=classesService.queryAllClasses(equalFields);
  33. requests.setAttribute("pageModel",pageModel);
  34. //返回
  35. return "class_list";
  36. }
  37. /**
  38. * @MethodName : queryEqualName
  39. * @Description : 等值查询
  40. * @return
  41. */
  42. private LinkedHashMap<Object,Object> queryEqualName ( ) {
  43. LinkedHashMap<Object,Object> equalFields=new LinkedHashMap<Object,Object>();
  44. //学院名称
  45. if(!"".equals(college) && college!=null)
  46. {
  47. if(!"".equals(college.getInstitutionId()) && college.getInstitutionId()!=null){
  48. equalFields.put("department.college.collegeId",college.getCollegeId());
  49. }
  50. }
  51. //专业名称
  52. if(!"".equals(departmentName) && departmentName!=null){
  53. equalFields.put("department.id",departmentName);
  54. }
  55. return equalFields;
  56. }
  57. /**
  58. * @MethodName : initQueryClasses
  59. * @Description : 初始化查询条件
  60. * @param request
  61. * @return
  62. */
  63. private HttpServletRequest initQueryClasses (HttpServletRequest request) {
  64. if(!"".equals(collegeName) && collegeName!=null){
  65. //调用后台方法:根据学院Id查询专业
  66. List<Department> departments = classesService.findDepartmentByCollegeId(collegeName);
  67. request.setAttribute("department",departments);
  68. request.setAttribute("collegeId",collegeName);
  69. }
  70. if(!"".equals(departmentName) && departmentName!=null){
  71. request.setAttribute("departmentName",departmentName);
  72. }
  73. //查询所有学院,并将学院设置到request中
  74. List<College> colleges = classesService.findAllCollege();
  75. request.setAttribute("college",colleges);
  76. return request;
  77. }
  78.  
  79. /*----------------------------------get/set------------------------------------------------ */
  80. //略
  81. }


以上就是联动及定位的实现思路,如果大家有更好的实现方法,请务必告诉我哈~~


注意:

1、下拉框问题:

可以根据下来框的name属性获取选择的选项id,所以上面代码中学院id会表示为collegeName和dopartmentName;


2、由于项目中使用dwz框架,如果不适用dwz封装的下拉框,那么<select class="comBox" name="name">应改成<select name="name">即去掉class属性,不然就会默认使用dwz的样式,并优先使用dwz的封装的下拉框实现。

猜你在找的Ajax相关文章