Java框架SSH结合Easyui控件实现省市县三级联动示例解析


Posted in Javascript onJune 12, 2016

Easyui调用数据库实现省市县区三级联动的效果如果下

Java框架SSH结合Easyui控件实现省市县三级联动示例解析

Java框架SSH结合Easyui控件实现省市县三级联动示例解析

Java框架SSH结合Easyui控件实现省市县三级联动示例解析

1、首先要设计数据库,如图所示。一个有4个字段code,note,pycode。code:行政区划代码,note:中文注释,pycode:拼音缩写。 其中code是由6个字段组成。如果是省级最后4位是0000,如果是地级市最后2位是00,其他是县区。 

我已经把相关数据库代码上传到我的csdn资源中,需要的同学自行下载。

Java框架SSH结合Easyui控件实现省市县三级联动示例解析

2、我用的是java、SSH框架结合Easyui控件

3、html代码如下

<tr>                               
       <td class="left">省:</td>  
       <td><input name="contact.province" id="province" style="width: 174px;" ></td>     
       <td class="left">市:</td>          
       <td><input  name="contact.city" id="city" style="width: 174px;"></td>                       
       <td class="left">县区:</td>  
       <td><input name="contact.county" id="county" style="width: 174px;" ></td>
    </tr>

4、对应的JS代码如下

$(function(){
 
 // 下拉框选择控件,下拉框的内容是动态查询数据库信息
 $('#province').combobox({ 
    url:'apply/provinceCombobox_combobox.action',
    editable:false, //不可编辑状态
    cache: false,
   // panelHeight: 'auto',//自动高度适合
    valueField:'code',  
    textField:'note',
    
 onHidePanel: function(){

   $("#city").combobox("setValue",'');
   $("#county").combobox("setValue",'');
   $("#cregicounty").val('');
  var province = $('#province').combobox('getValue'); 
  if(province!=''){
  $.ajax({
  type: "POST",
  url: "apply/cityCombobox_combobox.action?province="+province,
  cache: false,
  dataType : "json",
  success: function(data){
  $("#city").combobox("loadData",data);
                 }
                }); 
              }
           } 
         }); 
 
 $('#city').combobox({ 

   editable:false, //不可编辑状态
   cache: false,
   //panelHeight: 'auto',//自动高度适合
   valueField:'code',  
   textField:'note',
   onHidePanel: function(){
   $("#cregicounty").val('');
   $("#county").combobox("setValue",'');
  var city = $('#city').combobox('getValue'); 
  if(city!=''){
  $.ajax({
  type: "POST",
  url: "apply/countyCombobox_combobox.action?city="+city,
  cache: false,
  dataType : "json",
  success: function(data){
  $("#county").combobox("loadData",data);
                 }
                }); 
              }
           }
  }); 
 $('#county').combobox({ 
   editable:false, //不可编辑状态
   cache: false,
  // panelHeight: 'auto',//自动高度适合
   valueField:'code',  
   textField:'note',
   onHidePanel: function(){
     var str=$('#county').combobox('getText');
   $("#cregicounty").val(str); 
           }
 }); 
 
  $('#country').combobox({//国家代码初始化 
 valueField:'english',  
   textField:'note',
   url:'json/country.json',
   cache: false,
  //panelHeight: 'auto',//自动高度适合
   onChange: function(newValue,oldValue){ 

   countrySearch(newValue);
   countrys(newValue);
   }
 });
});

5、Java的Action代码

//查询全国行政区代码省
 public String provinceCombobox() throws Exception{
 
 List list=comboboxService.findProvince();
 this.jsonUtil(list);
 return null;
 }
 
 //查询全国行政区代码市
 public String cityCombobox() throws Exception{
  
 List list=comboboxService.findCity(province);
 this.jsonUtil(list);
   return null;
 }
 
 //查询全国行政区代码县区
 public String countyCombobox() throws Exception{
 
 List list=comboboxService.findCounty(city);
 this.jsonUtil(list);
   return null;
 }
 
 
 //调用json工具方法,传入参数alist
 public void jsonUtil(Object accountlist) throws Exception{
  HttpServletResponse response = ServletActionContext.getResponse(); 
  log.info("JSON格式:" + accountlist.toString());
  
  String returnJson = JsonConvert.returnJson(accountlist);
  response.setCharacterEncoding("utf-8");
  response.getWriter().println(returnJson);
 }

6、工具JSON代码

import java.io.StringWriter;

import org.codehaus.jackson.map.ObjectMapper;

public class JsonConvert {
 static String jsonStr;
 public static String returnJson(Object object) throws Exception{
 ObjectMapper objectMapper = new ObjectMapper();
 StringWriter stringWriter = new StringWriter();
 objectMapper.writeValue(stringWriter, object);
 
 jsonStr = stringWriter.toString();
 return jsonStr;
 }
}

7、对应接口代码

//查询省
public List findProvince() throws Exception;
//查询市
public List findCity(String code) throws Exception;
//查询县区
public List findCounty(String code) throws Exception;

 8、对应接口实现类代码 

//下拉框--查询省
 public List findProvince() {
 log.info("===下拉框--查询省");

 Criteria criteria=this.sessionFactory.getCurrentSession().createCriteria(CareacodeTblQg.class);
 criteria.add(Restrictions.like("code", "%0000"));
 criteria.addOrder(Order.asc("code"));
 
 return criteria.list();
 }
 
 //下拉框--查询市
 public List findCity(String code2) {
 log.info("===下拉框--查询市");
 String id=code2.substring(0,2);

 Criteria criteria=this.sessionFactory.getCurrentSession().createCriteria(CareacodeTblQg.class);
 criteria.add(Restrictions.like("code", id+"%00"));
 criteria.add(Restrictions.ne("code",code2 ));
 criteria.addOrder(Order.asc("code"));
 
 return criteria.list();
 }
 
 //下拉框--查询县区
 public List findCounty(String code3) {
 log.info("===下拉框--查询县区");

 String id=code3.substring(0,4);
 Criteria criteria=this.sessionFactory.getCurrentSession().createCriteria(CareacodeTblQg.class); 
 
 criteria.add(Restrictions.like("code", id+"%"));
 criteria.add(Restrictions.not(Restrictions.like("code", "%01")));
 criteria.add(Restrictions.ne("code",code3 ));
 criteria.addOrder(Order.asc("code"));
 
 return criteria.list();
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
不懂JavaScript应该怎样学
Apr 16 Javascript
input 高级限制级用法
Mar 26 Javascript
javascript实现简单的Map示例介绍
Dec 23 Javascript
JavaScript实现存储HTML字符串示例
Apr 21 Javascript
input输入框鼠标焦点提示信息
Mar 17 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
Aug 29 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
Dec 14 Javascript
如何理解Vue的render函数的具体用法
Aug 30 Javascript
Angularjs cookie 操作实例详解
Sep 27 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
Jul 22 Javascript
关于Javascript闭包与应用的详解
Apr 22 Javascript
Vue中使用import进行路由懒加载的原理分析
Apr 01 Vue.js
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
Jun 12 #Javascript
javascript jquery对form元素的常见操作详解
Jun 12 #Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
Jun 12 #Javascript
浅谈JS中逗号运算符的用法
Jun 12 #Javascript
Node.js Addons翻译(C/C++扩展)
Jun 12 #Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
Jun 12 #Javascript
jQuery的each循环用法简单示例
Jun 12 #Javascript
You might like
PHP学习之PHP运算符
2006/10/09 PHP
100行PHP代码实现socks5代理服务器
2016/04/28 PHP
php执行多个存储过程的方法【基于thinkPHP】
2016/11/08 PHP
使用angular写一个hello world
2015/01/23 Javascript
ReactNative-JS 调用原生方法实例代码
2016/10/08 Javascript
Linux CentOS系统下安装node.js与express的方法
2017/04/01 Javascript
JS原生轮播图的简单实现(推荐)
2017/07/22 Javascript
浅谈箭头函数写法在ReactJs中的使用
2017/08/22 Javascript
浅谈Express异步进化史
2017/09/09 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
2017/12/15 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
2018/09/03 Javascript
JavaScript实现身份证验证代码实例
2019/08/26 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
2020/10/22 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
2020/11/12 Javascript
删除目录下相同文件的python代码(逐级优化)
2012/05/25 Python
Python的Bottle框架的一些使用技巧介绍
2015/04/08 Python
python使用pyqt写带界面工具的示例代码
2017/10/23 Python
Python入门之三角函数全解【收藏】
2017/11/08 Python
tensorflow 恢复指定层与不同层指定不同学习率的方法
2018/07/26 Python
Pandas 按索引合并数据集的方法
2018/11/15 Python
python学生管理系统
2019/01/30 Python
python系列 文件操作的代码
2019/10/06 Python
python 实现汉诺塔游戏
2020/11/28 Python
python中PyQuery库用法分享
2021/01/15 Python
New Balance美国官网:运动鞋和健身服装
2017/04/11 全球购物
雅诗兰黛旗下专业男士保养领导品牌:Lab Series
2017/05/15 全球购物
创立科技Java面试题
2015/11/29 面试题
《商鞅南门立木》教学反思
2014/02/16 职场文书
英文自荐信常用句子
2014/03/26 职场文书
岗位竞聘书范文
2014/03/31 职场文书
司法局群众路线教育实践活动整改措施
2014/09/17 职场文书
村主任群众路线个人对照检查材料
2014/09/26 职场文书
事业单位年度考核个人总结
2015/02/12 职场文书
人力资源部工作计划
2019/05/14 职场文书
竞聘开场白方式有哪些?
2019/08/28 职场文书
victoriaMetrics库布隆过滤器初始化及使用详解
2022/04/05 Golang