Bootstrap每天必学之级联下拉菜单.docx
《Bootstrap每天必学之级联下拉菜单.docx》由会员分享，可在线阅读，更多相关《Bootstrap每天必学之级联下拉菜单.docx（9页珍藏版）》请在冰豆网上搜索。
Bootstrap每天必学之级联下拉菜单
Bootstrap每天必学之级联下拉菜单_
本文将介绍自定义的bootstrap级联下拉菜单，主要应用场合有省市级关联菜单等等，那么就先拿这个例子来讲，当然其他场景的关联菜单也同样适用。
说实话，封装好一个通用的组件还是需要花费许多精力的和时间的，所谓通用，自然要考虑周全，叹！
这次整理的Bootstrap关联select，里面也涉及到了许多jquery、ajax、springMVC等等学问点，可谓应有尽有！
首先，请允许我代表该自定义组件做一番小小的介绍。
“hi，你好，我叫box.js，仆人给我起的名字，其实呢，挺俗的。
我主要通过为select组件增加两个自定义属性来完成相应的数据加载，数据恳求用法了ajax，后端数据处理用法了springMVC（当然其他方式也可以，只需要返回对应的json数据即可），用法起来呢，就特别特别简洁了！
”
一、界面效果
当然了，从界面上完全看不出来一个组件封装的好坏，但至少，你感觉很简洁美丽，那么好了，有了这层印象，你是否有爱好连续看下去？
我想答案是确定的。
二、用法方法
①、procity.jsp
首先呢，在页面上加载box.js（稍候介绍，至于其他的bootstrap的css和js，不在本章介绍范围内，略过），同时呢，创建两个select，具体格式见如下：
scripttype="text/javascript"src="${ctx}/components/yunm/box.js"/script
divclass="form-group"
divclass="row"
divclass="col-md-6"
selectname="province_code"class="form-controlcombox"ref="city_select"
refUrl="${ctx}/procity?
pro_code={value}city_code=HSLY"
/select
/div
divclass="col-md-6"
selectname="city_code"id="city_select"class="form-control"
/select
/div
/div
/div
scripttype="text/javascript"
!
--
$（function（）{
if（$box）{
$（"box",$p）.combox（）;
}
}）;
//--
/script
·两个select组件，一个为province_code、一个为city_code。
·省级菜单上增加了两个属性。
ref指定关联菜单为市级菜单city_select
refUrl指定菜单猎取数据的URL
pro_code作为猎取市级数据的关键因子
{value}呢，则为通配符，稍候在介绍组件的时候连续讲到
city_code=HSLY，主要用于选中指定的省市菜单，诸如上文中的（河南、洛阳），假如不选中，则city_code=为空
·class=”combox”为该省级下拉框增加jquery选择器
·页面加载完毕后执行combox组件的关键方法，下面具体介绍
②、box.js
现在我们来看看关键的组件内容吧！
（function（$）{
var_onchange=function（event）{
var$ref=$（"#"+event.data.ref）;
if（$ref.size（）==0）
returnfalse;
varrefUrl=event.data.refUrl;
varvalue=encodeURIComponent（event.data.$this.val（））;
YUNM.debug（value）;
$.ajax（{
type:
'POST',
dataType:
"json",
url:
refUrl.replace（"{value}",value）,
cache:
false,
data:
{},
success:
function（response）{
$ref.empty（）;
addHtml（response,$ref）;
$ref.trigger（"change"）.combox（）;
},
error:
YUNM.ajaxError
}）;
};
varaddHtml=function（response,$this）{
varjson=YUNM.response）;
if（!
json）
return;
varhtml='';
$.each（json,function（i）{
if（json[i]）{
html+='optionvalue="'+json[i].value+'"';
if（json[i].selected）{
html+='selected="'+json[i].selected;
}
html+='"'+json[i].name+'/option';
}
}）;
$this.html（html）;
};
$.extend（$.fn,{
combox:
function（）{
returnthis.each（function（i）{
var$this=$（this）;
varvalue=$this.val（）||'';
varref=$this.attr（"ref"）;
varrefUrl=$this.attr（"refUrl"）||"";
if（refUrl）{
refUrl=refUrl.replace（"{value}",encodeURIComponent（value））;
}
if（refUrl）{
$.ajax（{
type:
'POST',
dataType:
"json",
url:
refUrl,
cache:
false,
data:
{},
success:
function（response）{
addHtml（response,$this）;
if（ref$this.attr（"refUrl"））{
$this.unbind（"change",_onchange）.bind（"change",{
ref:
ref,
refUrl:
$this.attr（"refUrl"）,
$this:
$this,
},_onchange）.trigger（"change"）;
}
},
error:
YUNM.ajaxError
}）;
}
}）;
}
}）;
}）（jQuery）;
·通过$.extend（$.fn,{combox:
function（）{为jquery增加一个叫combox的底层（可以查询jquery关心文档）方法。
·通过（function（$）{_onchange、addHtml}）（jQuery）;为该组件在页面初始加载时创建两个方法onchange和addHtml，至于（function（$）{}）（jQuery）;我想你假如不了解的话，抓紧XX吧！
·先来看combox方法
猎取ref、refUrl，通过ajax向refUrl恳求省级菜单数据，当猎取胜利后，通过addHtml方法将json转换后的option绑定到省级菜单select上
然后呢，为省级菜单select绑定change大事，传递的参数为ref（市级菜单）、refUrl（市级数据猎取的url）、$this（省级菜单，便于change大事猎取对应选中项，如效果图中的河南）
通过trigger方法立刻执行change大事，便于猎取对应的市级菜单内容。
·再来看_onchange方法，主要是点击省级菜单时触发，用于猎取市级菜单列表
refUrl，向服务端恳求的URL
value，用于猎取省级菜单的选中项目，然后通过该value值猎取省级对应的市级菜单
$ref.empty（）;用于清空市级菜单
通过ajax连续猎取市级菜单内容，然后通过addHtml方法添加到市级菜单中。
·addHtml方法
通过jsonEval方法对服务端传递回来的数据进行eval（eval（'（'+data+'）'），如有不懂，可XX）方法处理，否则会出错。
$.each（json,function（i）{遍历json，通过jquery创建option对象，然后加入到select中。
③、ProcityController
前端介绍完了，我们回到后端进行介绍，当然了，你也可以忽视本节，由于不是所用的关联数据都通过springMVC这种方法猎取，那么先预览一下代码吧！
packagecom.honzh.spring.controller;
importjava.util.ArrayList;
importjava.util.List;
importjavax.servlet.http.HttpServletResponse;
importorg.apache.log4j.Logger;
importorg.springframework.stereotype.Controller;
importorg.springframework.web.bind.annotation.RequestMapping;
importorg.springframework.web.bind.annotation.RequestParam;
importcom.honzh.biz.database.entity.City;
importcom.honzh.biz.database.entity.Option;
importcom.honzh.biz.database.entity.Provincial;
importmon.util.JsonUtil;
importcom.honzh.spring.service.CityService;
importcom.honzh.spring.service.ProvincialService;
@Controller
@RequestMapping（value="/procity"）
publicclassProcityControllerextendsBaseController{
privatestaticLoggerlogger=Logger.getLogger（ProcityController.class）;
/**
*当传递city_code，则表明下拉框要被选中，否则不选中
*/
@RequestMapping（""）
publicvoidindex（@RequestParam（value="city_code",required=false）Stringcity_code,
@RequestParam（value="pro_code",required=false）Stringpro_code,HttpServletResponseresponse）{
try{
logger.debug（"猎取所在地区"+city_code+",省"+pro_code）;
//假如pro_code为””，则表明要猎取城市菜单，否则猎取市级菜单
if（!
pro_code.equals（""））{
Integerpro_id=ProvincialService.getInstance（）.getByProvincialcode（pro_code）.getId（）;
ListCitycitys=CityService.getInstance（）.getCitysByProvincialId（pro_id）;
ListOptioncoptions=newArrayListOption（citys.size（））;
for（Citycity:
citys）{
Optioncoption=newOption（）;
coption.setId（city.getId（））;
coption.setName（city.getCname（））;
coption.setValue（city.getCode（））;
//市级菜单被选中
if（city_code!
=null!
city_code.equals（""））{
if（city.getCode（）.equals（city_code））{
coption.setSelected（"selected"）;
}
}
coptions.add（coption）;
}
renderJson（response,coptions）;
}else{
ListProvincialprovincials=ProvincialService.getInstance（）.getProvincials（）;
//转换成标准的option属性（name,value,selected）
ListOptionoptions=newArrayListOption（provincials.size（））;
//被选中的省市
//则说明是展现页面，此时需要为省级菜单和市级菜单设置选择项
if（city_code!
=null!
city_code.equals（""））{
Provincialselected_provincial=ProvincialService.getInstance（）.getProvincialByCitycode（city_code）;
pro_code=selected_provincial.getProcode（）;
}else{
pro_code=provincials.get（0）==null?
"":
provincials.get（0）.getProcode（）;
}
for（Provincialprovincial:
provincials）{
Optionoption=newOption（）;
option.setId（provincial.getId（））;
option.setName（provincial.getProname（））;
option.setValue（provincial.getProcode（））;
if（!
pro_code.equals（""）provincial.getProcode（）.equals（pro_code））{
option.setSelected（"selected"）;
}
options.add（option）;
}
renderJson（response,JsonUtil.toJson（options））;
}
}catch（Exceptione）{
logger.error（e.getMessage（））;
logger.error（e.getMessage（）,e）;
renderJson（response,null）;
}
}
}
@RequestParam（value="city_code",required=false）Stringcity_code，对于RequestParam注解，其实特别好用，这里就不多做说明，只是推广一下，固定个数的参数，用该注解更易于代码的维护。
ProvincialService类、CityService类就是两个单例，尽量把数据放置在内存当中，削减查询数据库的次数，稍候贴出来一个例子。
Option类就是单纯的封装前端option组件的关键属性，便于组件的通用化。
renderJson（response,JsonUtil.toJson（options））;将数据json化后返回，稍候贴上具体代码。
④、ProvincialService.java
只贴出来代码例子，不做具体说明，到底不是本章重点。
packagecom.honzh.spring.service;
importjava.util.ArrayList;
importjava.util.List;
importcom.honzh.biz.database.entity.City;
importcom.honzh.biz.database.entity.Provincial;
importcom.honzh.biz.database.mapper.ProvincialMapper;
importmon.spring.SpringContextHolder;
publicclassProvincialService{
privatestaticObjectlock=newObject（）;
privatestaticProvincialServiceconfig=null;
privateProvincialService（）{
provincials=newArrayListProvincial（）;
ProvincialMappermapper=SpringContextHolder.getBean（ProvincialMapper.class）;
provincials.addAll（mapper.getProvincials（））;
}
publicstaticProvincialServicegetInstance（）{
synchronized（lock）{
if（null==config）{
config=newProvincialService（）;
}
}
return（config）;
}
publicProvincialgetByProvincialcode（Stringprovincial_code）{
for（Provincialprovincial:
provincials）{
if（provincial.getProcode（）.equals（provincial_code））{
returnprovincial;
}
}
returnnull;
}
privateListProvincialprovincials=null;
publicListProvincialgetProvincials（）{
returnprovincials;
}
publicProvincialgetProvincialByCitycode（Stringcity_code）{
Citycity=CityService.getInstance（）.getCityByCode（city_code）;
for（Provincialprovincial:
provincials）{
if（provincial.getId（）.intValue（）==city.getProid（）.intValue（））{
returnprovincial;
}
}
returnnull;
}
publicProvincialgetProvincialByCode（Stringprovince_code）{
for（Provincialprovincial:
provincials）{
if（provincial.getProcode（）.equals（province_code））{
returnprovincial;
}
}
returnnull;
}
}
⑤、renderJson方法
/**
*假如出错的话，response挺直返回404
*/
protectedvoidrenderJson（HttpServletResponseresponse,ObjectresponseObject）{
PrintWriterout=null;
try{
if（responseObject==null）{
response.sendError（404）;
return;
}
//将实体对象转换为JSONObject转换
StringresponseStr=JsonUtil.toJson（responseObject）;
response.setCharacterEncoding（"UTF-8"）;
response.setContentType（"application/json;charset=utf-8"）;
out=response.getWriter（）;
out.append（responseStr）;
logger.debug（"返回是：
"+responseStr）;
}catch（IOExceptione）{
logger.error（e.getMessage（））;
logger.error（e.getMessage（）,e）;
}finally{
if（out!
=null）{
out.close（）;
}
}
}
以上就是本文的全部内容，盼望对大家的学习有所关心。
...
升级会员 