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

 更新时间:2016年06月12日 11:20:06   作者:海潜  
这篇文章主要为大家详细介绍了Java框架SSH结合Easyui控件实现省市县三级联动示例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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






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

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


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();
 }

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

相关文章

  • jQuery图片轮播功能实例代码

    jQuery图片轮播功能实例代码

    这篇文章给大家介绍了jquery 图片轮播代码,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2017-01-01
  • jQuery实现别踩白块儿网页版小游戏

    jQuery实现别踩白块儿网页版小游戏

    本文主要介绍了jQuery实现别踩白块儿网页版小游戏的思路分析与代码。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • jQuery DOM操作 基于命令改变页面

    jQuery DOM操作 基于命令改变页面

    每天都在与DOM打交道而且晕头转向,不过,自打咱认识了jQuery: 是操作属性也不烦了,插入新元素也不晕了,连移动元素及包装元素咱也不抽筋了。。
    2010-01-01
  • jQuery元素选择器实例代码

    jQuery元素选择器实例代码

    这篇文章主要为大家详细介绍了jQuery元素选择器实例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • jQuery中prependTo()方法用法实例

    jQuery中prependTo()方法用法实例

    这篇文章主要介绍了jQuery中prependTo()方法用法,实例分析了prependTo()方法的功能、定义及匹配的元素插入指定元素之前的使用技巧,需要的朋友可以参考下
    2015-01-01
  • jquery中done和then的区别(详解)

    jquery中done和then的区别(详解)

    下面小编就为大家分享一篇jquery中done和then的区别(详解),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • JQuery Highcharts 动态生成图表的方法

    JQuery Highcharts 动态生成图表的方法

    动态图表生成方法有很多,在接下来的文章中将为大家介绍下使用JQuery Highcharts是如何实现的
    2013-11-11
  • jquery中EasyUI实现异步树

    jquery中EasyUI实现异步树

    前面我们分享了使用jquery中EasyUI实现同步树的代码,本文我们就来看下使用EasyUI实现异步树的方法和示例,希望小伙伴们能够喜欢。
    2015-03-03
  • jQuery EasyUI tree 使用拖拽时遇到的错误小结

    jQuery EasyUI tree 使用拖拽时遇到的错误小结

    在我使用tree拖拽时总是失败,控制台输出了很多错误。经过问题跟踪分析最终找到的错误原因,下面小编给大家分享下,感兴趣的朋友参考下
    2016-10-10
  • jQuery简单倒计时效果完整示例

    jQuery简单倒计时效果完整示例

    这篇文章主要介绍了jQuery简单倒计时效果,结合完整实例形式分析了jQuery针对日期与时间的计算与页面元素动态操作相关技巧,需要的朋友可以参考下
    2016-09-09

最新评论