Easyui表单之下拉列表的三级联动
一、实现三级联动需要连接数据库
二、需要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表单之下拉列表的三级联动的更多相关文章
- easyui表单插件-包括日期时控件-列表
← jQuery EasyUI 表单插件 – Numberspinner 数值微调器 jQuery EasyUI 表单插件 - Timespinner 时间微调器 jQuery EasyUI 插件 ...
- easyui表单提交，后台获取不到值
J2ee开发,使用easyui表单提交,在ie中可以正常将参数传递到后台,但使用firefox,chrome都无法将easyui的combobox值传递到后台,使用alert($('#form').s ...
- easyUI表单基础知识
easyUI创建异步提交表单 我们创建一个带有 name.email 和 phone 字段的表单.通过使用 easyui 表单(form)插件来改变表单(form)为 ajax 表单(form).表单 ...
- EasyUI表单验证，自定义插件验证，自定义js插件验证，远程验证，常见手机号，中英文，qq等验证规则验证
{ field : 'startPort', title : "起始端口", editor: "text", width : 50, editor: { ...
- JQuery EasyUI 表单
EasyUI 创建异步提交表单 ♦ 通过使用 easyui 表单插件来改变表单为 ajax表单. 表单提交所有字段到后台服务器,服务器处理和发送一些数据返回到前端页面.我们接收返回数据,并将它显示出来 ...
- 雷林鹏分享：jQuery EasyUI 表单 - 创建异步提交表单
jQuery EasyUI 表单 - 创建异步提交表单 本教程向您展示如何通过 easyui 提交一个表单(Form).我们创建一个带有 name.email 和 phone 字段的表单.通过使用 e ...
- 雷林鹏分享：jQuery EasyUI 表单 - 创建树形下拉框
jQuery EasyUI 表单 - 创建树形下拉框 树形下拉框(ComboTree)是一个带有下列树形结构(Tree)的下拉框(ComboBox).它可以作为一个表单字段进行使用,可以提交给远程服务 ...
- 雷林鹏分享：jQuery EasyUI 表单 - 表单验证
jQuery EasyUI 表单 - 表单验证 本教程将向您展示如何验证一个表单.easyui 框架提供一个 validatebox 插件来验证一个表单.在本教程中,我们将创建一个联系表单,并应用 v ...
- 雷林鹏分享：jQuery EasyUI 表单 - 过滤下拉数据网格
jQuery EasyUI 表单 - 过滤下拉数据网格 下拉数据网格(Combogrid)组件和下拉框(Combobox)组件的共同点是,除了都具有下拉面板以外,它们都是基于数据网格(Datagrid ...
随机推荐
- python基础知识点整理
序列 描述 sequence(序列)是一组有顺序的元素的集合.序列可以包含一个或多个元素,也可以没有任何元素.我们之前所说的基本数据类型,都可以作为序列的元素. 序列有两种:tuple(定值表: 也有 ...
- Angular.JS学习笔记——1
内容来自:http://www.runoob.com/angularjs/angularjs-intro.html AngularJS 是一个 JavaScript 框架.它是一个以 JavaScri ...
- Cannot get a connection, pool exhausted解决办法
http://blog.163.com/it_message/blog/static/8892051200908102032653/ 连接池(Tomcat+oracle),运行一段时间后就会出现 Ca ...
- SQLServer修改表所有者
当用sp_adduser 对数据库进行添加用户之后.却出现了此对象 '表名' 无效的现象? 执行这个语句,就可以把当前库的所有表的所有者改为dboexec sp_msforeachtable 'sp_ ...
- arduino 串口实时绘图(以mpu9250为例)
兴趣之余,利用晚上的时间,做一些个人兴趣方面的开发. 之前没接触过 arduino, 无意之中买了个开发板做一些小开发, 这里利用python 读取 mpu9250 数据实时绘图. 下位机代码 C++ ...
- ( C++) Access the hard drive.
// Open up the volume HANDLE hVolume = CreateFile(wstrPath, GENERIC_READ, FILE_SHARE_READ | FILE_SHA ...
- git学习1：git安装和配置
Git是什么?世界上最先进的分布式版本控制系统,记录了一个文本文件的每次一修改信息,比如,一篇散文,从草稿到最终出版,经历过无数次修改,修改了标点符号形成一个版本,老师帮助修改形成一个版本,同学帮忙修 ...
- 使用jedis操作redis
一 连通性 1. 简单代码测试连通性 Jedis jedis = new Jedis(".......", 6379); String keys = "name" ...
- 源码阅读笔记 - 2 std::vector (2) 关于Allocator Aware Container特性
所有的STL容器,都保存一个或默认,或由用户提供的allocator的实例,用来提供对象内存分配和构造的方法(除了std::array),这样的容器,被称作Allocator Aware Contai ...
- Python创建cvs文件，包含标签和图片数据
在深度学习或者机器学习的时候,常常需要对数据进行整理和分类,最常见的是通过对数据路径和标签写入 到一个整合的txt或者csv文件中,训练进行读取. #coding=utf-8 #!/usr/bin/ ...