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 ...
随机推荐
- Quartz 线程处理
官网 http://www.quartz-scheduler.net/ 相关的 Log 说明 http://netcommon.sourceforge.net/docs/2.1.0/reference ...
- Lab_6_SysOps_AutoScaling_Linux_v2.5
System Operations - Lab 6: Using Amazon Elastic Load Balancer (Linux) - 2.5 ======================== ...
- AMap行政区查询服务
AMap.DistrictSearch行政区查询服务插件,提供全国各省.市.县.区的中心点经纬度.行政区边界坐标组.下级行政区等信息.根据行政区边界坐标组可在地图上绘制行政区边界.(本文为原创,并在项 ...
- SearchBar 修改 cancel button 文字 及颜色
#pragma mark - - (BOOL)searchBarShouldEndEditing:(UISearchBar *)searchBar{ _searchController.searchB ...
- IIS7.0上传文件限制的解决方法
在 Windows7(iis7.5).Win2008(iis 7.0)和Win2003(iis 6.0) 中,默认设置是特别严格和安全的,这样可以最大限度地减少因以前太宽松的超时和限制而造成的攻击. ...
- win10 chrome浏览器字体小，模糊
解决方案: chrome://flags/
- WinForm DataGridView分页功能
WinForm 里面的DataGridView不像WebForm里面的GridView那样有自带的分页功能,需要自己写代码来实现分页,效果如下图: 分页控件 .CS: 1 using System; ...
- Nodejs创建客户端
Node 创建 Web 客户端需要引入 http 模块,创建 client.js 文件,代码如下所示: var http = require('http'); //用于请求的选项 var option ...
- .html()和.text()的区别
在页面调用接口显示数据的时候,正常情况下.html()和.text()都可以显示数据内容,但是在特殊情况下,比如接口中这个参数为空的时候就表现出差距了,.html()显示的是空白,而.text()显示 ...
- java的基本程序设计之个人总结要点
java的基本程序设计之个人总结要点 这是个人看完java核心卷一书之后,罗列的一些比较重要的点子,希望共享给大家. [数值类型] 1.从java7开始,加上前缀0b就可以写二进制数,例如:0b100 ...