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 ...
随机推荐
- LINUX 下Open cv练习使用小记（1）
首先肯定离不开选一张自己喜欢的图像来显示 #include <opencv2/core/core.hpp> #include <opencv2/highgui/highgui.hpp ...
- 燕十八MySQL优化学习笔记
观察 show status; 里面的这三个参数;Queries Threads_connected Threads_running判断周期性变化 -------------------------- ...
- UNIX网络编程-Poll模型学习
1.相关接口介绍 1.1 poll ---------------------------------------------------------------------- #include &l ...
- Solr整合Ansj中文分词器
Ansj的使用和相关资料下载参考:http://iamyida.iteye.com/blog/2220833 参考 http://www.cnblogs.com/luxh/p/5016894.html ...
- 日本DARTS 支撑的一系列应用项目
DARTS是多学科空间科学数据平台,例如天体物理.太阳物理.太阳物理.月球与行星科学和微重力科学.在此数据支撑下,有许多应用. 1.http://wms.selene.darts.isas.jaxa. ...
- StackPanel在增加控件的问题
今天遇到这样一个问题,就是我做了一个自定义控件.然后加到StackPanel中, <StackPanel Height="676" HorizontalAlignment=& ...
- oracle免客户端安装 plsql连接
开发的过程中,往往没有必要在自己的电脑上安装oracle,也实在太大了. 这里介绍一种使用plsql连接oracle的方法,类似于navicat之连接mysql. 先下载plsql,进行安装,这里提供 ...
- 基于jFinal建立简单的服务端-接收请求并返回指定内容
本菜鸡是一名弱弱的测试工程师,最近完成了一个支付相关的项目,项目工作中,需要建立一个模拟支付宝的网关,主要是接收请求并返回数据.作为一名没有丝毫开发经验的菜鸡,初期入门相当费劲,主要还是思维上的转变. ...
- 如何成功运行一个最简单的servlet
好吧,又是一个简单到不能再简单的问题~~ 由于各种原因,这次就不上图了,直接步骤和代码了. 1.前期准备 jdk.tomcat.EditPlus(eclipse)安装成功并且设置好环境变量. 2.由于 ...
- AfxMessageBox和MessageBox区别
如果用MFC的话,请尽量使用afxmessagebox,因为这个全局的对话框最安全,也最方便. 但是在WIN32 SDK的情况下只能使用MESSAGEBOX. MessageBox()是Win3 ...