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, 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, 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(); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。