Bootstrap每天必学之级联下拉菜单Word文档格式.docx
- 文档编号:6281720
- 上传时间:2023-05-06
- 格式:DOCX
- 页数:9
- 大小:18.81KB
Bootstrap每天必学之级联下拉菜单Word文档格式.docx
《Bootstrap每天必学之级联下拉菜单Word文档格式.docx》由会员分享,可在线阅读,更多相关《Bootstrap每天必学之级联下拉菜单Word文档格式.docx(9页珍藏版)》请在冰点文库上搜索。
city_select"
refUrl="
${ctx}/procity?
pro_code={value}city_code=HSLY"
/select
/div
city_code"
id="
form-control"
!
--
$(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){
selected="
+json[i].selected;
+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("
encodeURIComponent(value));
refUrl,
addHtml(response,$this);
if(ref$this.attr("
)){
$this.unbind("
_onchange).bind("
{
ref:
ref,
refUrl:
$this.attr("
),
$this:
$this,
},_onchange).trigger("
})(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值猎取省级对应的市级菜单
用于清空市级菜单
通过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="
required=false)Stringcity_code,
@RequestParam(value="
pro_code"
required=false)Stringpro_code,HttpServletResponseresponse){
try{
logger.debug("
猎取所在地区"
+city_code+"
省"
+pro_code);
//假如pro_code为””,则表明要猎取城市菜单,否则猎取市级菜单
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());
//被选中的省市
//则说明是展现页面,此时需要为省级菜单和市级菜单设置选择项
Provincialselected_provincial=ProvincialService.getInstance().getProvincialByCitycode(city_code);
pro_code=selected_provincial.getProcode();
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());
)provincial.getProcode().equals(pro_code)){
option.setSelected("
options.add(option);
renderJson(response,JsonUtil.toJson(options));
}catch(Exceptione){
logger.error(e.getMessage());
logger.error(e.getMessage(),e);
renderJson(response,null);
required=false)Stringcity_code,对于RequestParam注解,其实特别好用,这里就不多做说明,只是推广一下,固定个数的参数,用该注解更易于代码的维护。
ProvincialService类、CityService类就是两个单例,尽量把数据放置在内存当中,削减查询数据库的次数,稍候贴出来一个例子。
Option类就是单纯的封装前端option组件的关键属性,便于组件的通用化。
将数据json化后返回,稍候贴上具体代码。
④、ProvincialService.java
只贴出来代码例子,不做具体说明,到底不是本章重点。
packagecom.honzh.spring.service;
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){
if(provincial.getProcode().equals(provincial_code)){
returnprovincial;
returnnull;
privateListProvincialprovincials=null;
publicListProvincialgetProvincials(){
returnprovincials;
publicProvincialgetProvincialByCitycode(Stringcity_code){
Citycity=CityService.getInstance().getCityByCode(city_code);
if(provincial.getId().intValue()==city.getProid().intValue()){
publicProvincialgetProvincialByCode(Stringprovince_code){
if(provincial.getProcode().equals(province_code)){
⑤、renderJson方法
*假如出错的话,response挺直返回404
protectedvoidrenderJson(HttpServletResponseresponse,ObjectresponseObject){
PrintWriterout=null;
if(responseObject==null){
response.sendError(404);
//将实体对象转换为JSONObject转换
StringresponseStr=JsonUtil.toJson(responseObject);
response.setCharacterEncoding("
UTF-8"
response.setContentType("
application/json;
charset=utf-8"
out=response.getWriter();
out.append(responseStr);
返回是:
+responseStr);
}catch(IOExceptione){
}finally{
if(out!
=null){
out.close();
以上就是本文的全部内容,盼望对大家的学习有所关心。
...
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Bootstrap 每天 级联 下拉 菜单