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

二、需要JSON数据的解析

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

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

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<!-- 1 JQuery的js包 -->

<script type="text/javascript" src="jquery-easyui-1.4.4/jquery.min.js"></script>

<!-- 2 css资源 -->

<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/default/easyui.css">

<!-- 3 图标资源 -->

<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.4/themes/icon.css">

<!-- 4 easyui的js包 -->

<script type="text/javascript" src="jquery-easyui-1.4.4/jquery.easyui.min.js"></script>

<!-- 5 本地语言  -->

<script type="text/javascript" src="jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script>

</head>

<body>

这是修改员工的页面

<input class="easyui-combobox"data-options="url:'json/combo.json',

valueField:'id',textField:'text',

editable:false">

<br><br>

省：<input id="sheng" class="easyui-combobox" style="width:100px"

data-options="{

url:'RegionServlet?parentid=0',

valueField:'regionID',

textField:'regionName',

onSelect:function(region)

{

    //alert('选择了省id='+region.regionID);

    $('#shi').combobox('clear');// 清除原有项目

    $('#quxian').combobox('clear');// 清除原有显示项目

    // 重新加载

    $('#shi').combobox('reload','RegionServlet?parentid='+region.regionID);

    $('#quxian').combobox('reload','RegionServlet'); //清理原有下拉项目

}

}">

市：<input id="shi" class="easyui-combobox" style="width:100px"

data-options="{

url:'RegionServlet',

valueField:'regionID',

textField:'regionName',

onSelect:function(region)

{

    $('#quxian').combobox('clear');// 清除原有项目

    // 重新加载

    $('#quxian').combobox('reload','RegionServlet?parentid='+region.regionID);

}

}">

区县：<input id="quxian" class="easyui-combobox" style="width:100px"

data-options="{

url:'RegionServlet',

valueField:'regionID',

textField:'regionName'

}">

</body>

</html>

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

实体类：

package com.hanqi.entity;

// 地区实体类

public class Region {

    // 地区ID

    private String regionID;

    // 地区名称

    private String regionName;

    // 上级地区ID

    private String parentRegionID;

    public String getRegionID() {

        return regionID;

    }

    public void setRegionID(String regionID) {

        this.regionID = regionID;

    }

    public String getRegionName() {

        return regionName;

    }

    public void setRegionName(String regionName) {

        this.regionName = regionName;

    }

    public String getParentRegionID() {

        return parentRegionID;

    }

    public void setParentRegionID(String parentRegionID) {

        this.parentRegionID = parentRegionID;

    }

}

3.DAO层代码：

package com.hanqi.dao;

import java.util.ArrayList;

import java.util.List;

import org.hibernate.Session;

import org.hibernate.SessionFactory;

import org.hibernate.Transaction;

import org.hibernate.boot.registry.StandardServiceRegistryBuilder;

import org.hibernate.cfg.Configuration;

import org.hibernate.service.ServiceRegistry;

import com.hanqi.entity.Region;

public class RegionDAO {

    Configuration cfg = null;

    ServiceRegistry sr =null;

    SessionFactory sf =null;

    Session se=null;

    Transaction tr=null;

    public RegionDAO()

    {

        //加载配置文件

        cfg = new Configuration().configure();

        //注册服务

        sr = new StandardServiceRegistryBuilder()

                .applySettings(cfg.getProperties())

                .build();

    }

    // 初始化

    private void init()

      {

          sf=cfg.buildSessionFactory(sr);

          se= sf.openSession();

          tr=se.beginTransaction();

      }

    // 提交和释放

     private void destory()

      {

              tr.commit();

            se.close();

            sf.close();

      }

     // 获取数据列表

     public List<Region> getList(String parentid)

     {

         List<Region> rtn = new ArrayList<Region>();

         init();

         // 查询数据

         rtn=se.createQuery("from Region where parentRegionID = ?")

                 .setString(0, parentid).list();

         destory();

         return rtn;

     }

}

4.Service层代码：

package com.hanqi.service;

import java.util.List;

import com.hanqi.dao.RegionDAO;

import com.hanqi.entity.Region;

public class RegionService {

    public List<Region> getList(String parentid)

    {

        return new RegionDAO().getList(parentid);

    }

}

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

package com.hanqi.controller;

import java.io.IOException;

import java.util.List;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import com.alibaba.fastjson.JSONArray;

import com.hanqi.entity.Region;

import com.hanqi.service.RegionService;

public class RegionServlet extends HttpServlet {

    private static final long serialVersionUID = 1L;

    public RegionServlet() {

        super();

    }

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

            request.setCharacterEncoding("UTF-8");

            response.setCharacterEncoding("UTF-8");

            response.setContentType("text/html");

            // 接收参数

            String parentid = request.getParameter("parentid");

            if(parentid!=null)

            {

            // 读取地区代表

            List<Region> lr = new RegionService().getList(parentid);

            ;

            // 返回JSON格式的数据

            String json = JSONArray.toJSONString(lr);

            response.getWriter().write(json);

            }

            else

            {

                response.getWriter().write("[]");

            }

    }

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

        doGet(request, response);

    }

}

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. Unable to create Azure Mobile Service: Error 500

    I had to go into my existing azure sql database server and under the configuration tab select " ...

  2. 移动互联网广告 - 第十更 - 广告投放运营 DashBoard - 2016/12/10

    广告投放运营 DashBoard设计 移动互联网互联网广告投放,数据监控DashBoard,基础样例示意,下图仅供参考(来自于互联网).

  3. MyBatis入门学习教程-调用存储过程

    一.提出需求 查询得到男性或女性的数量, 如果传入的是0就女性否则是男性 二.准备数据库表和存储过程 create table p_user( id int primary key auto_incr ...

  4. VS2012 InstallShield2013LimitedEdition激活

    VS2012 InstallShield2013LimitedEdition激活 在实际开发工作中由于升级操作系统后,不知何种原因,导致 InstallShield2013LimitedEdition ...

  5. NodeJs：module.filename、__filename、__dirname、process.cwd()和require.main.filename

    转载于: http://blog.csdn.net/bugknightyyp/article/details/17999473 module.filename:开发期间,该行代码所在的文件. __fi ...

  6. Nginx图片剪裁模块探究

    http://nginx.org/en/docs/http/ngx_http_image_filter_module.html http://cwtea.blog.51cto.com/4500217/ ...

  7. oracle 创建用户

    /*分为四步 *//*第1步:创建临时表空间  */create temporary tablespace ycjy tempfile 'D:\oracledata\ycjy.dbf' size 50 ...

  8. Twitter-Snowflake，64位自增ID算法详解

    Twitter-Snowflake算法产生的背景相当简单,为了满足Twitter每秒上万条消息的请求,每条消息都必须分配一条唯一的id,这些id还需要一些大致的顺序(方便客户端排序),并且在分布式系统 ...

  9. Partitioning & Archiving tables in SQL Server (Part 2: Split, Merge and Switch partitions)

    Reference: http://blogs.msdn.com/b/felixmar/archive/2011/08/29/partitioning-amp-archiving-tables-in- ...

  10. mysql load data 乱码的问题

    新学mysql在用load data导入txt文档时发现导入的内容,select 之后是乱码,先后把表,数据库的字符集类型修改为utf8,但还是一样,最后在 http://bbs.chinaunix. ...