1、Bootstrap每天必学之级联下拉菜单Bootstrap每天必学之级联下拉菜单_ 本文将介绍自定义的bootstrap级联下拉菜单,主要应用场合有省市级关联菜单等等,那么就先拿这个例子来讲,当然其他场景的关联菜单也同样适用。说实话,封装好一个通用的组件还是需要花费许多精力的和时间的,所谓通用,自然要考虑周全,叹!这次整理的Bootstrap关联select,里面也涉及到了许多jquery、ajax、springMVC等等学问点,可谓应有尽有! 首先,请允许我代表该自定义组件做一番小小的介绍。 “hi,你好,我叫box.js,仆人给我起的名字,其实呢,挺俗的。我主要通过为select组件增加两
2、个自定义属性来完成相应的数据加载,数据恳求用法了ajax,后端数据处理用法了springMVC(当然其他方式也可以,只需要返回对应的json数据即可),用法起来呢,就特别特别简洁了!” 一、界面效果 当然了,从界面上完全看不出来一个组件封装的好坏,但至少,你感觉很简洁美丽,那么好了,有了这层印象,你是否有爱好连续看下去?我想答案是确定的。 二、用法方法 、procity.jsp 首先呢,在页面上加载box.js(稍候介绍,至于其他的bootstrap的css和js,不在本章介绍范围内,略过),同时呢,创建两个select,具体格式见如下: script type=text/javascript
3、 src=$ctx/components/yunm/box.js/script div class=form-group div class=row div class=col-md-6 select name=province_code class=form-control combox ref=city_select refUrl=$ctx/procity?pro_code=valuecity_code=HSLY /select /div div class=col-md-6 select name=city_code id=city_select class=form-control /
4、select /div /div /div script type=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,主要用于选中指定的省市菜单,诸如上文中的(河南
5、、洛阳),假如不选中,则city_code=为空 class=”combox” 为该省级下拉框增加jquery选择器 页面加载完毕后执行combox组件的关键方法,下面具体介绍 、box.js 现在我们来看看关键的组件内容吧! (function($) var _onchange = function(event) var $ref = $(# + event.data.ref); if ($ref.size() = 0) return false; var refUrl = event.data.refUrl; var value = encodeURIComponent(event.dat
6、a.$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 ); ; var addHtml = function(response, $this)
7、 var json = YUNM.response); if (!json) return; var html = ; $.each(json, function(i) if (jsoni) html += option value= + jsoni.value + ; if (jsoni.selected) html += selected= + jsoni.selected; html += + jsoni.name + /option; ); $this.html(html); ; $.extend($.fn, combox : function() return this.each(f
8、unction(i) var $this = $(this); var value = $this.val() | ; var ref = $this.attr(ref); var refUrl = $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(
9、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的底层(可以查
10、询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(省级
11、菜单,便于change大事猎取对应选中项,如效果图中的河南) 通过trigger方法立刻执行change大事,便于猎取对应的市级菜单内容。 再来看_onchange方法,主要是点击省级菜单时触发,用于猎取市级菜单列表 refUrl,向服务端恳求的URL value,用于猎取省级菜单的选中项目,然后通过该value值猎取省级对应的市级菜单 $ref.empty();用于清空市级菜单 通过ajax连续猎取市级菜单内容,然后通过addHtml方法添加到市级菜单中。 addHtml方法 通过jsonEval方法对服务端传递回来的数据进行eval(eval( + data + ),如有不懂,可XX)方法
12、处理,否则会出错。 $.each(json, function(i) 遍历json,通过jquery创建option对象,然后加入到select中。 、ProcityController 前端介绍完了,我们回到后端进行介绍,当然了,你也可以忽视本节,由于不是所用的关联数据都通过springMVC这种方法猎取,那么先预览一下代码吧! package com.honzh.spring.controller; import java.util.ArrayList; import java.util.List; import javax.servlet.http.HttpServletResponse
13、; import org.apache.log4j.Logger; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import com.honzh.biz.database.entity.City; import com.honzh.biz.database.entity.Option; impo
14、rt com.honzh.biz.database.entity.Provincial; import mon.util.JsonUtil; import com.honzh.spring.service.CityService; import com.honzh.spring.service.ProvincialService; Controller RequestMapping(value = /procity) public class ProcityController extends BaseController private static Logger logger = Logg
15、er.getLogger(ProcityController.class); /* * 当传递city_code,则表明下拉框要被选中,否则不选中 */ RequestMapping() public void index(RequestParam(value = city_code, required = false) String city_code, RequestParam(value = pro_code, required = false) String pro_code, HttpServletResponse response) try logger.debug(猎取所在地区
16、+ city_code + , 省 + pro_code); / 假如pro_code为”,则表明要猎取城市菜单,否则猎取市级菜单 if (!pro_code.equals() Integer pro_id = ProvincialService.getInstance().getByProvincialcode(pro_code).getId(); ListCity citys = CityService.getInstance().getCitysByProvincialId(pro_id); ListOption coptions = new ArrayListOption(citys.
17、size(); for (City city : citys) Option coption = new Option(); 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);
18、renderJson(response, coptions); else ListProvincial provincials = ProvincialService.getInstance().getProvincials(); / 转换成标准的option属性(name,value,selected) ListOption options = new ArrayListOption(provincials.size(); / 被选中的省市 / 则说明是展现页面,此时需要为省级菜单和市级菜单设置选择项 if (city_code != null !city_code.equals() Pro
19、vincial selected_provincial = ProvincialService.getInstance().getProvincialByCitycode(city_code); pro_code = selected_provincial.getProcode(); else pro_code = provincials.get(0) = null ? : provincials.get(0).getProcode(); for (Provincial provincial : provincials) Option option = new Option(); option
20、.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 (Exception e) logger.err
21、or(e.getMessage(); logger.error(e.getMessage(), e); renderJson(response, null); RequestParam(value = city_code, required = false) String city_code,对于RequestParam注解,其实特别好用,这里就不多做说明,只是推广一下,固定个数的参数,用该注解更易于代码的维护。 ProvincialService类、CityService类就是两个单例,尽量把数据放置在内存当中,削减查询数据库的次数,稍候贴出来一个例子。 Option类就是单纯的封装前端op
22、tion组件的关键属性,便于组件的通用化。 renderJson(response, JsonUtil.toJson(options);将数据json化后返回,稍候贴上具体代码。 、ProvincialService.java 只贴出来代码例子,不做具体说明,到底不是本章重点。 package com.honzh.spring.service; import java.util.ArrayList; import java.util.List; import com.honzh.biz.database.entity.City; import com.honzh.biz.database.en
23、tity.Provincial; import com.honzh.biz.database.mapper.ProvincialMapper; import mon.spring.SpringContextHolder; public class ProvincialService private static Object lock = new Object(); private static ProvincialService config = null; private ProvincialService() provincials = new ArrayListProvincial()
24、; ProvincialMapper mapper = SpringContextHolder.getBean(ProvincialMapper.class); provincials.addAll(mapper.getProvincials(); public static ProvincialService getInstance() synchronized (lock) if (null = config) config = new ProvincialService(); return (config); public Provincial getByProvincialcode(S
25、tring provincial_code) for (Provincial provincial : provincials) if (provincial.getProcode().equals(provincial_code) return provincial; return null; private ListProvincial provincials = null; public ListProvincial getProvincials() return provincials; public Provincial getProvincialByCitycode(String
26、city_code) City city = CityService.getInstance().getCityByCode(city_code); for (Provincial provincial : provincials) if (provincial.getId().intValue() = city.getProid().intValue() return provincial; return null; public Provincial getProvincialByCode(String province_code) for (Provincial provincial :
27、 provincials) if (provincial.getProcode().equals(province_code) return provincial; return null; 、renderJson方法 /* * 假如出错的话,response挺直返回404 */ protected void renderJson(HttpServletResponse response, Object responseObject) PrintWriter out = null; try if (responseObject = null) response.sendError(404);
28、return; / 将实体对象转换为JSON Object转换 String responseStr = JsonUtil.toJson(responseObject); response.setCharacterEncoding(UTF-8); response.setContentType(application/json; charset=utf-8); out = response.getWriter(); out.append(responseStr); logger.debug(返回是: + responseStr); catch (IOException e) logger.error(e.getMessage(); logger.error(e.getMessage(), e); finally if (out != null) out.close(); 以上就是本文的全部内容,盼望对大家的学习有所关心。 .
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1