一、实现三级联动需要连接数据库

二、需要JSON数据的解析

三、需要Servlet类与界面相对应值的传递

1. 界面层需要的代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Insert title here</title>
  6. <!-- 1 JQuery的js包 -->
  7. <script type="text/javascript" src="jquery-easyui-1.4.4/jquery.min.js"></script>
  8.  
  9. <!-- 2 css资源 -->
  10. <link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/default/easyui.css">
  11.  
  12. <!-- 3 图标资源 -->
  13. <link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/icon.css">
  14.  
  15. <!-- 4 easyui的js包 -->
  16. <script type="text/javascript" src="jquery-easyui-1.4.4/jquery.easyui.min.js"></script>
  17.  
  18. <!-- 5 本地语言  -->
  19. <script type="text/javascript" src="jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script>
  20. </head>
  21. <body>
  22. 这是修改员工的页面
  23.  
  24. <input class="easyui-combobox"data-options="url:'json/combo.json',
  25. valueField:'id',textField:'text',
  26. editable:false">
  27.  
  28. <br><br>
  29. 省：<input id="sheng" class="easyui-combobox" style="width:100px"
  30. data-options="{
  31. url:'RegionServlet?parentid=0',
  32. valueField:'regionID',
  33. textField:'regionName',
  34. onSelect:function(region)
  35. {
  36.     //alert('选择了省id='+region.regionID);
  37.     $('#shi').combobox('clear');// 清除原有项目
  38.     $('#quxian').combobox('clear');// 清除原有显示项目
  39.     // 重新加载
  40.     $('#shi').combobox('reload','RegionServlet?parentid='+region.regionID);
  41.     $('#quxian').combobox('reload','RegionServlet'); //清理原有下拉项目
  42.  
  43. }
  44. }">
  45. 市：<input id="shi" class="easyui-combobox" style="width:100px"
  46. data-options="{
  47. url:'RegionServlet',
  48. valueField:'regionID',
  49. textField:'regionName',
  50. onSelect:function(region)
  51. {
  52.     $('#quxian').combobox('clear');// 清除原有项目
  53.     // 重新加载
  54.     $('#quxian').combobox('reload','RegionServlet?parentid='+region.regionID);
  55. }
  56.  
  57. }">
  58. 区县：<input id="quxian" class="easyui-combobox" style="width:100px"
  59. data-options="{
  60. url:'RegionServlet',
  61. valueField:'regionID',
  62. textField:'regionName'
  63. }">
  64. </body>
  65. </html>

2. 通过hibernate创建实体类与映射文件

实体类：

  1. package com.hanqi.entity;
  2.  
  3. // 地区实体类
  4. public class Region {
  5.  
  6.     // 地区ID
  7.     private String regionID;
  8.  
  9.     // 地区名称
  10.     private String regionName;
  11.  
  12.     // 上级地区ID
  13.     private String parentRegionID;
  14.  
  15.     public String getRegionID() {
  16.         return regionID;
  17.     }
  18.  
  19.     public void setRegionID(String regionID) {
  20.         this.regionID = regionID;
  21.     }
  22.  
  23.     public String getRegionName() {
  24.         return regionName;
  25.     }
  26.  
  27.     public void setRegionName(String regionName) {
  28.         this.regionName = regionName;
  29.     }
  30.  
  31.     public String getParentRegionID() {
  32.         return parentRegionID;
  33.     }
  34.  
  35.     public void setParentRegionID(String parentRegionID) {
  36.         this.parentRegionID = parentRegionID;
  37.     }
  38.  
  39. }

3.DAO层代码：

  1. package com.hanqi.dao;
  2.  
  3. import java.util.ArrayList;
  4. import java.util.List;
  5.  
  6. import org.hibernate.Session;
  7. import org.hibernate.SessionFactory;
  8. import org.hibernate.Transaction;
  9. import org.hibernate.boot.registry.StandardServiceRegistryBuilder;
  10. import org.hibernate.cfg.Configuration;
  11. import org.hibernate.service.ServiceRegistry;
  12.  
  13. import com.hanqi.entity.Region;
  14.  
  15. public class RegionDAO {
  16.  
  17.     Configuration cfg = null;
  18.     ServiceRegistry sr =null;
  19.     SessionFactory sf =null;
  20.     Session se=null;
  21.     Transaction tr=null;
  22.     public RegionDAO()
  23.     {
  24.         //加载配置文件
  25.         cfg = new Configuration().configure();
  26.         //注册服务
  27.         sr = new StandardServiceRegistryBuilder()
  28.                 .applySettings(cfg.getProperties())
  29.                 .build();
  30.     }
  31.     // 初始化
  32.     private void init()
  33.       {
  34.           sf=cfg.buildSessionFactory(sr);
  35.           se= sf.openSession();
  36.           tr=se.beginTransaction();
  37.       }
  38.     // 提交和释放
  39.      private void destory()
  40.       {
  41.               tr.commit();
  42.             se.close();
  43.             sf.close();
  44.       }
  45.  
  46.      // 获取数据列表
  47.  
  48.      public List<Region> getList(String parentid)
  49.      {
  50.  
  51.          List<Region> rtn = new ArrayList<Region>();
  52.  
  53.          init();
  54.  
  55.          // 查询数据
  56.          rtn=se.createQuery("from Region where parentRegionID = ?")
  57.                  .setString(0, parentid).list();
  58.  
  59.          destory();
  60.  
  61.          return rtn;
  62.      }
  63. }

4.Service层代码：

  1. package com.hanqi.service;
  2.  
  3. import java.util.List;
  4.  
  5. import com.hanqi.dao.RegionDAO;
  6. import com.hanqi.entity.Region;
  7.  
  8. public class RegionService {
  9.  
  10.     public List<Region> getList(String parentid)
  11.     {
  12.         return new RegionDAO().getList(parentid);
  13.     }
  14.  
  15. }

5.Servlet层代码：（解析JSON数据的jar包FastJson）

  1. package com.hanqi.controller;
  2.  
  3. import java.io.IOException;
  4. import java.util.List;
  5.  
  6. import javax.servlet.ServletException;
  7. import javax.servlet.http.HttpServlet;
  8. import javax.servlet.http.HttpServletRequest;
  9. import javax.servlet.http.HttpServletResponse;
  10.  
  11. import com.alibaba.fastjson.JSONArray;
  12. import com.hanqi.entity.Region;
  13. import com.hanqi.service.RegionService;
  14.  
  15. public class RegionServlet extends HttpServlet {
  16.     private static final long serialVersionUID = 1L;
  17.  
  18.     public RegionServlet() {
  19.         super();
  20.  
  21.     }
  22.  
  23.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  24.  
  25.             request.setCharacterEncoding("UTF-8");
  26.             response.setCharacterEncoding("UTF-8");
  27.             response.setContentType("text/html");
  28.  
  29.             // 接收参数
  30.             String parentid = request.getParameter("parentid");
  31.  
  32.             if(parentid!=null)
  33.             {
  34.  
  35.             // 读取地区代表
  36.             List<Region> lr = new RegionService().getList(parentid);
  37.             ;
  38.             // 返回JSON格式的数据
  39.             String json = JSONArray.toJSONString(lr);
  40.  
  41.             response.getWriter().write(json);
  42.             }
  43.             else
  44.             {
  45.                 response.getWriter().write("[]");
  46.             }
  47.     }
  48.  
  49.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  50.  
  51.         doGet(request, response);
  52.     }
  53.  
  54. }

Easyui表单之下拉列表的三级联动的更多相关文章

  1. easyui表单插件-包括日期时控件-列表

    ← jQuery EasyUI 表单插件 – Numberspinner 数值微调器 jQuery EasyUI 表单插件 - Timespinner 时间微调器  jQuery EasyUI 插件 ...

  2. easyui表单提交，后台获取不到值

    J2ee开发,使用easyui表单提交,在ie中可以正常将参数传递到后台,但使用firefox,chrome都无法将easyui的combobox值传递到后台,使用alert($('#form').s ...

  3. easyUI表单基础知识

    easyUI创建异步提交表单 我们创建一个带有 name.email 和 phone 字段的表单.通过使用 easyui 表单(form)插件来改变表单(form)为 ajax 表单(form).表单 ...

  4. EasyUI表单验证，自定义插件验证，自定义js插件验证，远程验证，常见手机号，中英文，qq等验证规则验证

     { field : 'startPort', title : "起始端口", editor: "text", width : 50, editor: { ...

  5. JQuery EasyUI 表单

    EasyUI 创建异步提交表单 ♦ 通过使用 easyui 表单插件来改变表单为 ajax表单. 表单提交所有字段到后台服务器,服务器处理和发送一些数据返回到前端页面.我们接收返回数据,并将它显示出来 ...

  6. 雷林鹏分享：jQuery EasyUI 表单 - 创建异步提交表单

    jQuery EasyUI 表单 - 创建异步提交表单 本教程向您展示如何通过 easyui 提交一个表单(Form).我们创建一个带有 name.email 和 phone 字段的表单.通过使用 e ...

  7. 雷林鹏分享：jQuery EasyUI 表单 - 创建树形下拉框

    jQuery EasyUI 表单 - 创建树形下拉框 树形下拉框(ComboTree)是一个带有下列树形结构(Tree)的下拉框(ComboBox).它可以作为一个表单字段进行使用,可以提交给远程服务 ...

  8. 雷林鹏分享：jQuery EasyUI 表单 - 表单验证

    jQuery EasyUI 表单 - 表单验证 本教程将向您展示如何验证一个表单.easyui 框架提供一个 validatebox 插件来验证一个表单.在本教程中,我们将创建一个联系表单,并应用 v ...

  9. 雷林鹏分享：jQuery EasyUI 表单 - 过滤下拉数据网格

    jQuery EasyUI 表单 - 过滤下拉数据网格 下拉数据网格(Combogrid)组件和下拉框(Combobox)组件的共同点是,除了都具有下拉面板以外,它们都是基于数据网格(Datagrid ...

随机推荐

  1. RDLC An unexpected error occurred while compiling expressions. Native compiler return value: '-1073741511'

    One of my web project, which has a rdlc file using some expressions, was working fine while developi ...

  2. MyBatis原理分析之三：初始化（配置文件读取和解析）

    1. 准备工作 编写测试代码(具体请参考<Mybatis入门示例>),设置断点,以Debug模式运行,具体代码如下: )ExecutorType:执行类型,ExecutorType主要有三 ...

  3. android APK 文件的生成过程

    步骤: 1. 用 aapt工具生成R文件aapt  package  -m -J  gen目录 -M AndroidManifest.xml  -S res目录  -I 编译版本sdk的android ...

  4. 【sql】之查询昨天的记录

    http://blog.csdn.net/cangchen/article/details/44978531

  5. Mysql大范围分页优化案例

    在BBS线上业务抓到如下分页SQL: meizu_bbs meizu_bbs Query Sending data , meizu_bbs meizu_bbs Query Sending data , ...

  6. LINQ实现递归算法

    LINQ的使代码更加整洁,但往常递归都会需要定义两个方法,如果使用Razor语法书写递归就会变得无从下手.所以推荐使用LINQ实现递归 @{ //统计名片认证数量 ; Func<int, int ...

  7. Disruptor 极速体验

    已经不记得最早接触到 Disruptor 是什么时候了,只记得发现它的时候它是以具有闪电般的速度被介绍的.于是在脑子里, Disruptor 和"闪电"一词关联了起来,然而却一直没 ...

  8. C#如何获取CPU处理器核心数量 z

    有几条不同的处理器信息,您可以获得有关的信息:物理处理器数量.核心数量和逻辑处理器数量,这些可以不同.两颗双核超线程(启用)处理器的机器情况下有:2个物理处理器.4个核心和8个逻辑处理器. 逻辑处理器 ...

  9. 简单排序，C# 直接使用 List。

    List<string> list = new List<string>(); list.Add("sdfs"); list.Add("ef&qu ...

  10. 第一个Leap Motion测试页面 (webgl/three/leapjs/leap)

    div#canvas-frame{ border: none; cursor: pointer; width: 100%; height: 800px; background-color: #EEEE ...