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

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

(0)

相关推荐

  • Easyui form combobox省市区三级联动

    使用方法 $(function () { //省市区三级联动 $.citySelect({ $province: $('#province'), $city: $('#city'), $County: $('#county') }); $('#ff').form('load', { 'province': '广东省', 'city': '深圳市', 'county': '罗湖区' }); }); <form id="ff" method="post">

  • jQuery使用EasyUi实现三级联动下拉框效果

    其它的都不说,使用easyui实现三级联动主要就是一层套一层,大家且看代码 html表单 <input id="txtPipeRowName" style="width:150px;"> <input id="txtPipeName" style="width:150px;"> easyUi的Combobox: // 一层Combo var srmCombx = $("#txtShouName

  • 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=&quo

  • 详解EasyUi控件中的Datagrid

    最近手头有个web项目需要用到第三方控件(EasyUi),用第三方控件做出来的效果毕竟比原生态的要稍微好看那么一点,该项目中有个需求,需要在数据列表中直接编辑数据保存,行话叫做行内编辑. 在讲行内编辑之前,我们需要先了解如何使用EasyUi创建一个DataGrid,当然方式有很多(1.easyui.js,或者直接html代码加easyui的Style),我采用的是JS的方式:    一.使用Js创建DataGrid 上面是效果图, Html代码如下:在页面定义一个table <!--数据展示 -

  • Java实现Excel表单控件的添加与删除

    目录 介绍 Java示例1添加表单控件 Java示例2删除表单控件 介绍 通过表单控件,用户可以快速地将数据填写到模板文档中,轻松引用单元格数据并与其进行交互.本文通过Java代码示例介绍如何在Excel表格中添加表单控件,包括文本框.单选按钮.复选框.组合框.微调按钮等:以及如何删除Excel中的指定表单控件. 程序运行环境:Java.IDEA.jdk1.8.0.无需安装Microsoft Excel 使用工具:Free Spire.XLS for Java (免费版) jar获取及导入:官网

  • VUE饿了么树形控件添加增删改功能的示例代码

    本文介绍了VUE饿了么树形控件添加增删改功能的示例代码,分享给大家,具体如下: element-ui树形控件:地址 在原文档中有个案例是有新增和删除功能,但是后来发现其修改的数据并不能直接影响到树形数据,所以采用了 render-content 的API重新写了个组件. 写个开发的步骤,所以文章比较长emmm 大致效果如图: 1.省市API 在网上复制了个省市的list,有两个属性是新增的 isEdit :控制编辑状态 maxexpandId :为现下id的最大值 export default{

  • C# Winform 实现控件自适应父容器大小的示例代码

    在日常开发中经常遇到控件不能随着父容器大小的改变而且自动改变控件的所在位置和大小.以下是实现的代码 /// <summary> /// 根据父容器实现控件自适应大小位置 /// </summary> /// <param name="control">所需自适应大小位置的控件</param> private void ChangeLocationSizeByParent (Control control) { //记录父容器大小,来判断改

  • java制作仿微信视频播放控件

    此控件继承自 SurfaceView,利用 MediaPlayer 播放视频. 小视频播放界面 MoviePlayerView.java import java.io.IOException; import android.content.Context; import android.media.AudioManager; import android.media.MediaPlayer; import android.media.MediaPlayer.OnCompletionListene

  • java通过复选框控件数组实现添加多个复选框控件示例分享

    思路如下: 创建JPanel面板对象:使用JPanel类的setLayout(0,4)方法设置网格布局管理器,即列数为4,行数自动调节:创建一个字符串型一维数组作为控件文本数组:创建一个JCheckBox型一维数组作为控件数组:使用for循环遍历控件数组,初始化数组中的复选框组件,使用JPanel类的add()方法把数组元素(即每个复选框)添加到面板中.代码如下: 复制代码 代码如下: package cn.edu.xidian.crytoll; import java.awt.BorderLa

  • Vue框架下引入ActiveX控件的问题解决

    最近参与了山东某一公司的呼叫中心系统的开发项目,我负责的模块是在公司已有的前端Vue框架下集成他们的软电话条功能.从开始到结束所遇到的几个问题如下: 1.如何将ActiveX控件引入Vue,并且在页面上成功渲染: 2.如何调用ActiveX已提供的方法: 3.如何监听ActiveX的动作: (注:以上问题在html的文件里不存在) 我们先来看下第一个问题:如何将ActiveX控件引入Vue,并且在页面上成功渲染.如何将ActiveX控件渲染到页面上.根据客户开发人员提供的demo,`<objec

  • javascript客户端遍历控件与获取父容器对象示例代码

    1,遍历也面中所有的控件function findControlAll()    {        var inputs=document.getElementsByTagName("input");        for(j=0;j<inputs.length;j++)           if(inputs[j].type=="text") //这儿将页面所有类型为text的控件找出来,也可以设置成你想遍历的控件类型       {            

  • Android开发之瀑布流控件的实现与使用方法示例

    本文实例讲述了Android开发之瀑布流控件的实现与使用方法.分享给大家供大家参考,具体如下: public class FlowLayout extends ViewGroup { /**行里子view之间的行距离*/ public int mHorizontolSpace = Util.getDimen(R.dimen.top_padding); /**行里子view之间的垂直距离*/ public int mVerticalSpace = Util.getDimen(R.dimen.top

随机推荐