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的Date方法实现代码(prototype)
Nov 20 Javascript
js将控件隐藏的方法及display属性介绍
Jul 04 Javascript
input:checkbox多选框实现单选效果跟radio一样
Jun 16 Javascript
图解js图片轮播效果
Dec 20 Javascript
简单理解vue中Props属性
Oct 27 Javascript
vue 怎么创建组件及组件使用方法
Jul 27 Javascript
JavaScript中的一些隐式转换和总结(推荐)
Dec 22 Javascript
JavaScript运行原理分析
Feb 09 Javascript
基于Vue渲染与插件的加载顺序的问题详解
Mar 05 Javascript
使用electron将vue-cli项目打包成exe的方法
Sep 29 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
Sep 06 Javascript
基于vue实现简易打地鼠游戏
Aug 21 Javascript
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来检测proxy
2006/10/09 PHP
linux实现php定时执行cron任务详解
2013/12/24 PHP
PHP 抽象方法与抽象类abstract关键字介绍及应用
2014/10/16 PHP
PHP 返回13位时间戳的实现代码
2016/05/13 PHP
php 如何获取文件的后缀名
2016/06/05 PHP
php车辆违章查询数据示例
2016/10/14 PHP
laravel实现于语言包的完美切换方法
2019/09/29 PHP
uploadify 3.0 详细使用说明
2012/06/18 Javascript
jQuery使用数组编写图片无缝向左滚动
2012/12/11 Javascript
快速解决jQuery与其他库冲突的方法介绍
2014/01/02 Javascript
javascript与有限状态机详解
2014/05/08 Javascript
Javascript中封装window.open解决不兼容问题
2014/09/28 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
2017/06/28 Javascript
jQuery列表检索功能实现代码
2017/07/17 jQuery
react native 原生模块桥接的简单说明小结
2019/02/26 Javascript
一个手写的vue放大镜效果
2019/08/09 Javascript
解决Layui数据表格的宽高问题
2019/09/28 Javascript
[02:22]完美世界DOTA2联赛PWL S3 集锦第一期
2020/12/15 DOTA
python删除列表内容
2015/08/04 Python
解决python3 urllib中urlopen报错的问题
2017/03/25 Python
Python实现加载及解析properties配置文件的方法
2018/03/29 Python
使用django-guardian实现django-admin的行级权限控制的方法
2018/10/30 Python
Python 给屏幕打印信息加上颜色的实现方法
2019/04/24 Python
pyqt5 键盘监听按下enter 就登陆的实例
2019/06/25 Python
python 求定积分和不定积分示例
2019/11/20 Python
Python使用Socket实现简单聊天程序
2020/02/28 Python
香港钟表珠宝首饰商城:OneMallTime网摩间
2016/10/14 全球购物
L*SPACE官网:比基尼、泳装和度假服装
2019/03/18 全球购物
物理教师自荐信范文
2013/12/28 职场文书
宿舍违规检讨书
2014/01/12 职场文书
奥林匹克的口号
2014/06/13 职场文书
先进个人推荐材料
2014/12/29 职场文书
2015年社区关工委工作总结
2015/04/03 职场文书
2015年司法局工作总结
2015/05/22 职场文书
Java生成日期时间存入Mysql数据库的实现方法
2022/03/03 Java/Android
Node.js实现爬取网站图片的示例代码
2022/04/04 NodeJs