Java框架SSH結(jié)合Easyui控件實現(xiàn)省市縣三級聯(lián)動示例解析

更新時間：2016年06月12日 11:20:06 作者：海潛

這篇文章主要為大家詳細介紹了Java框架SSH結(jié)合Easyui控件實現(xiàn)省市縣三級聯(lián)動示例，具有一定的參考價值，感興趣的小伙伴們可以參考一下

Easyui調(diào)用數(shù)據(jù)庫實現(xiàn)省市縣區(qū)三級聯(lián)動的效果如果下

1、首先要設(shè)計數(shù)據(jù)庫，如圖所示。一個有4個字段code，note，pycode。code：行政區(qū)劃代碼，note：中文注釋，pycode：拼音縮寫。其中code是由6個字段組成。如果是省級最后4位是0000，如果是地級市最后2位是00，其他是縣區(qū)。

我已經(jīng)把相關(guān)數(shù)據(jù)庫代碼上傳到我的csdn資源中，需要的同學(xué)自行下載。

2、我用的是java、SSH框架結(jié)合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">縣區(qū):</td>  
       <td><input name="contact.county" id="county" style="width: 174px;" ></td>
    </tr>

4、對應(yīng)的JS代碼如下

$(function(){
 
 // 下拉框選擇控件，下拉框的內(nèi)容是動態(tài)查詢數(shù)據(jù)庫信息
 $('#province').combobox({ 
    url:'apply/provinceCombobox_combobox.action',
    editable:false, //不可編輯狀態(tài)
    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, //不可編輯狀態(tài)
   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, //不可編輯狀態(tài)
   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代碼

//查詢?nèi)珖姓^(qū)代碼省
 public String provinceCombobox() throws Exception{
 
 List list=comboboxService.findProvince();
 this.jsonUtil(list);
 return null;
 }
 
 //查詢?nèi)珖姓^(qū)代碼市
 public String cityCombobox() throws Exception{
  
 List list=comboboxService.findCity(province);
 this.jsonUtil(list);
   return null;
 }
 
 //查詢?nèi)珖姓^(qū)代碼縣區(qū)
 public String countyCombobox() throws Exception{
 
 List list=comboboxService.findCounty(city);
 this.jsonUtil(list);
   return null;
 }
 
 
 //調(diào)用json工具方法，傳入?yún)?shù)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、對應(yīng)接口代碼

//查詢省
public List findProvince() throws Exception;
//查詢市
public List findCity(String code) throws Exception;
//查詢縣區(qū)
public List findCounty(String code) throws Exception;

8、對應(yīng)接口實現(xiàn)類代碼

 //下拉框--查詢省
 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();
 }
 
 //下拉框--查詢縣區(qū)
 public List findCounty(String code3) {
 log.info("===下拉框--查詢縣區(qū)");

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: