今天我将介绍自定义的bootstrap级联下拉菜单(你肯定用得到),主要应用场合有省市级关联菜单等等,那么就先拿这个例子来讲,当然其他场景的关联菜单也同样适用。说实话,封装好一个通用的组件还是需要花费很多精力的和时间的,所谓通用,自然要考虑周全,叹!这次整理的Bootstrap关联select,里面也涉及到了很多jquery、ajax、springMVC等等知识点,可谓包罗万象!
首先,请允许我代表该自定义组件做一番小小的介绍。
“hi,你好,我叫yunm.combox.js,主人给我起的名字,其实呢,挺俗的。我主要通过为select组件增加两个自定义属性来完成相应的数据加载,数据请求使用了ajax,后端数据处理使用了springMVC(当然其他方式也可以,只需要返回对应的json数据即可),使用起来呢,就非常非常简单了!”
一、界面效果
选中状态
非选中状态(我是默认北京-北京)
当然了,从界面上完全看不出来一个组件封装的好坏,但至少,你感觉很简洁漂亮,那么好了,有了这层印象,你是否有兴趣继续看下去?我想答案是肯定的。
二、使用方法
①、procity.jsp
首先呢,在页面上加载yunm.combox.js(稍候介绍,至于其他的bootstrap的css和js,不在本章介绍范围内,略过),同时呢,创建两个select,具体格式见如下:
<script type="text/javascript" src="${ctx}/components/yunm/yunm.combox.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={value}&city_code=HSLY"> </select> </div> <div class="col-md-6"> <select name="city_code" id="city_select" class="form-control"> </select> </div> </div> </div> <script type="text/javascript"> <!-- $(function() { if ($.fn.combox) { $("select.combox", $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组件的关键方法,下面详细介绍
②、yunm.combox.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.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 }); }; var addHtml = function(response, $this) { var json = YUNM.jsonEval(response); if (!json) return; var html = ''; $.each(json, function(i) { if (json[i]) { html += '<option value="' + json[i].value + '"'; if (json[i].selected) { html += ' selected="' + json[i].selected; } html += '">' + json[i].name + '</option>'; } }); $this.html(html); }; $.extend($.fn, { combox : function() { return this.each(function(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(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);