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 相关文章推荐
提升你网站水平的jQuery插件集合推荐
Apr 19 Javascript
jquery 页面滚动到指定DIV实现代码
Sep 25 Javascript
JavaScript中标识符提升问题
Jun 11 Javascript
JS实现不规则TAB选项卡效果代码
Sep 16 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
May 16 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
Feb 09 Javascript
详解vue-router2.0动态路由获取参数
Jun 14 Javascript
详解用vue.js和laravel实现微信授权登陆
Jun 23 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
Jul 13 Javascript
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
vue-cli webpack 引入swiper的操作方法
Sep 15 Javascript
Node.js 的 GC 机制详解
Jun 03 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表单加入Token防止重复提交的方法分析
2016/10/10 PHP
tp5框架内使用tp3.2分页的方法分析
2019/05/05 PHP
Jquery AJAX 框架的使用方法
2009/11/03 Javascript
js中将字符串转换成json的三种方式
2011/01/12 Javascript
Javascript倒计时页面跳转实例小结
2013/09/11 Javascript
javascript字符串替换函数如何一次性全部替换掉
2015/10/30 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
2016/03/22 Javascript
JS中使用正则表达式g模式和非g模式的区别
2017/04/01 Javascript
Angular2中select用法之设置默认值与事件详解
2017/05/07 Javascript
AngularJs 常用的过滤器
2017/05/15 Javascript
JS从非数组对象转数组的方法小结
2018/03/26 Javascript
Vue 使用中的小技巧
2018/04/26 Javascript
vue 表单验证按钮事件交由父组件触发的方法
2018/12/17 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
2019/09/24 Javascript
js实现录音上传功能
2019/11/22 Javascript
Python模仿POST提交HTTP数据及使用Cookie值的方法
2014/11/10 Python
Python基于Tkinter实现的记事本实例
2015/06/17 Python
利用PyInstaller将python程序.py转为.exe的方法详解
2017/05/03 Python
谈谈python中GUI的选择
2018/03/01 Python
对python中的logger模块全面讲解
2018/04/28 Python
python批量查询、汉字去重处理CSV文件
2018/05/31 Python
Pandas DataFrame 取一行数据会得到Series的方法
2018/11/10 Python
python遍历文件目录、批量处理同类文件
2019/08/31 Python
python多进程重复加载的解决方式
2019/12/13 Python
PyTorch加载自己的数据集实例详解
2020/03/18 Python
k-means 聚类算法与Python实现代码
2020/06/01 Python
matplotlib subplot绘制多个子图的方法示例
2020/07/28 Python
美国设计师精美珠宝购物网:Netaya
2016/08/28 全球购物
Perfumetrader荷兰:香水、化妆品和护肤品在线商店
2017/09/15 全球购物
小学毕业感言50字
2014/02/16 职场文书
2014乡镇干部纪律作风整顿思想汇报
2014/09/13 职场文书
党员批评与自我批评(5篇)
2014/09/23 职场文书
2015年房地产销售工作总结
2015/04/20 职场文书
Python破解极验滑动验证码详细步骤
2021/05/21 Python
python 对图片进行简单的处理
2021/06/23 Python
Python中Numpy和Matplotlib的基本使用指南
2021/11/02 Python