使用jstree自定义下拉菜单树组件

开发背景：

        每次都很啰嗦，要先陈述一下开发背景。不过，这样做的目的一来是让自己能够快速回忆起自己的实战背景，二来是类似引子，能够阐述这样处理的实际用途，不仅仅是用于理论学习。

        今天记录下的是前几天开发的一个下拉框组件，该组件内容是一棵菜单树。本来系统开发的时候使用的是BUI，BUI本身也有下拉树组件。只是因为我们使用的BUI版本比较早，今年的版本和去年的在某些方面不兼容，如果一次性替换，会引起很多js报错。又因为近期使用过就是jstree，测试过几万条节点数据的加载性能，相比BUI，渲染速度有优秀很多（BUI并不能胜任这个数量级）。所以，干脆自己封装一个组件。具体要求，我总结了一下：

 

自定义下拉框，该下拉框内容为菜单树。下拉框操作规则同其他BUI下拉框组件，但是封装方式并非使用BUI封装方式，而是自定义封装。所以需要测试如下功能 
①菜单树节点被选中，会将值显示在输入框，满足多选功能，用逗号分隔 
②菜单树初始化会将存储的节点名称显示在输入框，并且菜单树相应节点会被触发选中 
③提供清空功能，点击清空按钮，下拉框所有选中节点都会清空，并且输入框值也清空；清空按钮在菜单树被选中的情况下显示，在没有选中的情况下隐藏 
④下拉框在单击输入框和下拉标签的情况下会显示出来，在单击下拉框区域外的所有位置都会自动收缩 
⑤查询界面的下拉框的清空功能和“重置”按钮联动 

 

 

 

实战结果：

        这里，有使用到很多封装细节，因为时间问题，初稿不做太多细节表述，重点在代码中有做注释。直接上代码：

 

首先前端html：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%-- 显示输入框 --%>
<div class="rmp-span">
		<label class="rmp-control-label">部门归属</label>
			<div class="rmp-control-text">
				<div id="department" class="bui-cncselectfilter bui-suggest bui-combox bui-select" aria-disabled="false" tabindex="0" hidefocus="true" aria-pressed="false">
					<input type="text" class="bui-select-input" /><span class="icon-delelte-input"><i class="icon-remove-sign-select"></i>&