Bootstrap doit apprendre le menu déroulant en cascade tous les jours_compétences javascript

Cet article présentera le menu déroulant en cascade bootstrap personnalisé. Les principaux scénarios d'application incluent les menus contextuels provinciaux et municipaux, etc. Prenons d'abord cet exemple, les menus contextuels d'autres scénarios sont également applicables. Pour être honnête, il faut encore beaucoup d'efforts et de temps pour emballer un composant universel. Le composant dit universel nécessite naturellement une réflexion approfondie, soupir ! La sélection liée à Bootstrap compilée cette fois implique également de nombreux points de connaissances tels que jquery, ajax, springMVC, etc. On peut dire qu'elle est tout compris !

Tout d'abord, permettez-moi de faire une petite introduction au nom de ce composant personnalisé.

"Bonjour, bonjour, je m'appelle yunm.combox.js. Le nom que m'a donné le propriétaire est en fait assez vulgaire. Je complète principalement le chargement des données correspondant en ajoutant deux attributs personnalisés au composant de sélection. La demande de données utilise ajax, et le traitement des données back-end utilise springMVC (bien sûr d'autres méthodes sont également possibles, il suffit de renvoyer les données json correspondantes) C'est très, très simple à utiliser »

.

1. Effet d'interface

Bien sûr, vous ne pouvez pas dire à quel point un composant est bien emballé à partir de l'interface, mais au moins vous sentez que c'est simple et beau. Eh bien, avec cette impression, êtes-vous intéressé à continuer à lire ? Je pense que la réponse est oui.

2. Comment utiliser

①、procity.jsp

Tout d'abord, chargez yunm.combox.js sur la page (sera présenté plus tard. Quant aux autres bootstrap css et js, ils n'entrent pas dans le cadre de ce chapitre, alors ignorez-les en même temps). sélectionne. Voir le format spécifique comme suit :

<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&#63;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>

·Deux composants sélectionnés, l'un est province_code et l'autre est city_code.
·Ajout de deux attributs au menu provincial.
​​ ref précise que le menu associé est le menu au niveau de la ville city_select
refUrl précise l'URL du menu pour obtenir les données
                                                                                                                                                                                                 pro_codecomme facteur clé pour obtenir des données municipales
{value} , alors c'est un match de passe.                                                                                                                                                                                                           
city_code=HSLY, principalement utilisé pour sélectionner la province et la ville spécifiées, comme ci-dessus (Henan, Luoyang), s'il n'est pas sélectionné, city_code= est vide ·class="combox" Ajouter un sélecteur jquery pour la liste déroulante provinciale ·La méthode clé d'exécution du composant combox après le chargement de la page est présentée en détail ci-dessous

②、yunm.combox.js Jetons maintenant un coup d’œil au contenu des composants clés !

·通过$.extend($.fn, { combox : function() {为jquery增加一个叫combox的底层(可以查询jquery帮助文档)方法。
·通过(function($){_onchange、addHtml})(jQuery);为该组件在页面初始加载时创建两个方法onchange和addHtml，至于(function($) {})(jQuery);我想你如果不了解的话，赶紧百度吧！
·先来看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 + ')')，如有不懂，可百度）方法处理，否则会出错。
           $.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;

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;
import com.honzh.biz.database.entity.Provincial;
import com.honzh.common.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 = Logger.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("获取所在地区" + city_code + ", 省" + pro_code);

      // 如果pro_code为””，则表明要获取城市菜单，否则获取市级菜单
      if (!pro_code.equals("")) {
        Integer pro_id = ProvincialService.getInstance().getByProvincialcode(pro_code).getId();
        List<City> citys = CityService.getInstance().getCitysByProvincialId(pro_id);
        List<Option> coptions = new ArrayList<Option>(citys.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);
        }
        renderJson(response, coptions);
      } else {
        List<Provincial> provincials = ProvincialService.getInstance().getProvincials();

        // 转换成标准的option属性（name,value,selected）
        List<Option> options = new ArrayList<Option>(provincials.size());

        // 被选中的省市
        // 则说明是展示页面，此时需要为省级菜单和市级菜单设置选择项
        if (city_code != null && !city_code.equals("")) {
          Provincial selected_provincial = ProvincialService.getInstance().getProvincialByCitycode(city_code);

          pro_code = selected_provincial.getProcode();
        } else {
          pro_code = provincials.get(0) == null &#63; "" : provincials.get(0).getProcode();
        }

        for (Provincial provincial : provincials) {
          Option option = new Option();
          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 (Exception e) {
      logger.error(e.getMessage());
      logger.error(e.getMessage(), e);

      renderJson(response, null);
    }
  }

}

@RequestParam(value = "city_code", required = false) String city_code，对于RequestParam注解，其实非常好用，这里就不多做解释，只是推广一下，固定个数的参数，用该注解更易于代码的维护。
ProvincialService类、CityService类就是两个单例，尽量把数据放置在内存当中，减少查询数据库的次数，稍候贴出来一个例子。
Option类就是单纯的封装前端option组件的关键属性，便于组件的通用化。
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.entity.Provincial;
import com.honzh.biz.database.mapper.ProvincialMapper;
import com.honzh.common.spring.SpringContextHolder;

public class ProvincialService {

  private static Object lock = new Object();
  private static ProvincialService config = null;

  private ProvincialService() {
    provincials = new ArrayList<Provincial>();

    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(String provincial_code) {
    for (Provincial provincial : provincials) {
      if (provincial.getProcode().equals(provincial_code)) {
        return provincial;
      }
    }
    return null;
  }

  private List<Provincial> provincials = null;

  public List<Provincial> getProvincials() {
    return provincials;
  }

  public Provincial getProvincialByCitycode(String 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 : 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);
        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();
      }
    }
  }

以上就是本文的全部内容，希望对大家的学习有所帮助。