电商商家后台-easyUI的combox三级联动
2015-08-03 14:12
525 查看
这几天在做项目中又用到了easyUI,以前做ITOO的时候前端都是被封装好的,而且也没有真正接触过三级联动效果。这个三级联动是要实现的是省市县联动。选择某一个省时跟着相应的市显示,接着相应的县显示。
不仅是这样,因为做的是修改功能,所以不仅要把查出来的省,市,县显示出来,而且从数据库中查询来的地区需要成为默认显示值。也就是说从数据库中查出来的地区跟查出来的所有省市区做对比,是数据库中地区显示为默认。举个例子,数据库中存的是河北省廊坊市燕郊区,那么显示在界面上的默认值也必须是河北省廊坊市燕郊区。这也是在我实现中刚开始挺头疼的一件事,后来经过查询其实挺简单的。
首先我把从数据库中查询出来的地区,存放到界面上并隐藏起来,然后把从数据库中查询出来的所有省份显示到界面上。其次用JS代码获取隐藏的地区,并设置这些地区在下拉框中默认为选中。
JSP代码:
最后上图:
封装的固然好,但是尝试着去了解底层,因为只有掌握了底层,我们才能运筹帷幄。以前做ITOO的时候没觉得什么,后来做这个项目才发现ITOO封装的太好了,自己了解的太少了,以至于这个项目做起来有点儿生疏。
不仅是这样,因为做的是修改功能,所以不仅要把查出来的省,市,县显示出来,而且从数据库中查询来的地区需要成为默认显示值。也就是说从数据库中查出来的地区跟查出来的所有省市区做对比,是数据库中地区显示为默认。举个例子,数据库中存的是河北省廊坊市燕郊区,那么显示在界面上的默认值也必须是河北省廊坊市燕郊区。这也是在我实现中刚开始挺头疼的一件事,后来经过查询其实挺简单的。
首先我把从数据库中查询出来的地区,存放到界面上并隐藏起来,然后把从数据库中查询出来的所有省份显示到界面上。其次用JS代码获取隐藏的地区,并设置这些地区在下拉框中默认为选中。
JSP代码:
<tr> <td id="area"> <input id="shengyincang" style="display:none;" value="${sheng}"/> <input id="shiyincang" style="display:none;" value="${shi}"/> <input id="xianyincang" style="display:none;" value="${xian}"/> 所在地区: </td> <td><select id="sheng" class="easyui-combobox" name="sheng"> <c:forEach var="catage" items="${requestScope.shengList}" varStatus="status"> <option style=" width: 100px;" value="${catage.iD}">${catage.province_city}</option> </c:forEach> </select> <input id="shi" class="easyui-combobox" name="shi"/> <input id="xian" class="easyui-combobox" name="xian"/> <span id="cityTip"></span> </td> </tr>JS代码:其实JS代码实现的很简单,因为EasyUI的封装功能真的是很强大啊。
window.onload=function(){ //获取界面上隐藏的地区 var shengUID=$("#shengyincang").val(); var shiUID=$("#shiyincang").val(); var xianUID=$("#xianyincang").val(); //var opts=document.getElementById("sheng"); //设置地区被选中 $("#sheng").combobox('select',shengUID); $("#shi").combobox('select',shiUID); $("#xian").combobox('select',xianUID); } //三级联动事件,选择省份,相应所有市跟着出来,选中市相应的县跟着出来。 $(function(){ //触发省选项 $("#sheng").combobox({ onSelect:function(record){ $("#shi").combobox("setValue",''); //清空市 $("#xian").combobox("setValue",''); //清空县 var shengid=$('#sheng').combobox('getValue'); $.ajax({ async:false, url:"personalprofile_findshi.action", data:{shengid:shengid}, type:"POST", dataType:"json", success:function(data){ //alert(data); $("#shi").combobox("loadData",data); } }); } }); $('#shi').combobox({ editable:false, //不可编辑状态 cache: false, panelHeight: '150',//自动高度适合 valueField:'iD', textField:'province_city' }); //触发市选项时 $("#shi").combobox({ onSelect:function(record){ $("#xian").combobox("setValue",''); //清空县 var shiid=$('#shi').combobox('getValue'); $.ajax({ async : false, url:"personalprofile_findxian.action", cache:false, data:{shiid:shiid}, type:"POST", dataType:"json", success:function(data){ $("#xian").combobox("loadData",data); } }); } }); $('#xian').combobox({ editable:false, //不可编辑状态 cache: false, panelHeight: '150',//自动高度适合 valueField:'iD', textField:'province_city' }); });
最后上图:
封装的固然好,但是尝试着去了解底层,因为只有掌握了底层,我们才能运筹帷幄。以前做ITOO的时候没觉得什么,后来做这个项目才发现ITOO封装的太好了,自己了解的太少了,以至于这个项目做起来有点儿生疏。
相关文章推荐
- quick2.2与quick3.3的区别(2)
- java 基础知识——String & StringBuffer & StringBuilder
- UIAlertView 按钮设置可点或者不可点击
- IOS上 关于状态栏的相关设置(UIStatusBar)
- IOS 定制中间突出UItabBar
- Android UI 之 ViewFlipper 和 GestureDetector
- iOS UISlider用法及自定义滑块
- [HDU] 1711 Number Sequence KMP
- 修改virtualbox的UUID,使virtualbox的虚拟磁盘可以复制
- 文字效果和表情图片:JAVA正则表达式 Pattern和Matcher、SpannableString与SpannableStringBuilder
- Robotium Instrumentation run failed due to 'java.lang.ClassNotFoundException'
- The type java.lang.String cannot be resolved. It is indirectly referenced from required .class files
- UITextField(输入框)
- Fixing common issues when hosting a .NET 4.0 WCF service in IIS 7
- 北大ACM1503——Integer Inquiry
- 前端UI框架
- Havok_2014-1-0_Pc_Xs_User_Guide(目录)
- apue 第十六章 套接字
- EQueue - 一个纯C#写的分布式消息队列介绍2
- NGUI初探之UIRoot