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

二、需要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. AngularJS---表达式

    AngularJS的表达式是放在{{}}里面,用{{ }}符号将一个变量绑定到$scope上. angularJS中的表达式有如下特点: 1.只能在其所属作用域内部 所有的表达式都在其所属的作用域内部 ...

  2. Android学习笔记——权限解释

    <!--允许读取电话状态SIM的权限--><uses-permission android:name="android.permission.READ_PHONE_STAT ...

  3. Android广播机制的深入学习

    部分内容转载自http://www.cnblogs.com/lwbqqyumidi/p/4168017.html 1.Android广播机制概述 Android广播分为两个方面:广播发送者和广播接收者 ...

  4. 黄聪：日租VPS中FileZilla_Server配置方法

    1.关闭VPS中IIS的FTP服务 2.FileZilla_Server 监听端口 21 3.FTP客户端端口为11311(看服务商给出的)

  5. 【学】jQuery的源码思路6——增加each,animaion,ajax以及插件机制

    each() 插件机制 animation ajax //each() //这里第一个参数指定将this指向每次循环到的那个元素身上,而第三个参数element其实就是this本身所以和第一个参数是一 ...

  6. myeclipse2015CI Server显示derby服务器去除方法

    找到myeclipse的安装目录 myeclipse2015CI\configuration\org.eclipse.equinox.simpleconfigurator 打开文件bundles.in ...

  7. 进程物理内存远大于Xmx的问题分析

    问题描述 最近经常被问到一个问题,”为什么我们系统进程占用的物理内存(Res/Rss)会远远大于设置的Xmx值”,比如Xmx设置1.7G,但是top看到的Res的值却达到了3.0G,随着进程的运行,R ...

  8. HTTP 协议详解

    相关文章:HTTP 协议之压缩 当今web程序的开发技术真是百家争鸣,ASP.NET, PHP, JSP,Perl, AJAX 等等. 无论Web技术在未来如何发展,理解Web程序之间通信的基本协议相 ...

  9. [DFNews] Cellebrite UFED Physical Analyzer 3.8

    Cellebrite 两周前正式发布了UFED设备所附带的Physical Analyzer和Logical Analyzer软件,更新后版本为3.8 下载地址已更新至置顶资源下载页面. 主要更新如下 ...

  10. MySQL MEM_ROOT详细讲解

    这篇文章会详细解说MySQL中使用非常广泛的MEM_ROOT的结构体,同时省去debug部分的信息,仅分析正常情况下,mysql中使用MEM_ROOT来做内存分配的部分. 在具体分析之前我们先例举在该 ...