jsp+bootstrap-treeview树形下拉菜单

目录

前端

移动至输入框内自动显示，移出输入框自动隐藏

<link href="/webjars/bootstrap/3.3.6/dist/css/bootstrap.css" rel="stylesheet">
<link href="/css/bootstrap-treeview.min.css" rel="stylesheet" />

#tv {
	margin-top: 0;
	width: 97%;
	position: absolute;
	z-index: 9;
}

	<div class="form-group">
			<label class="col-sm-3 control-label is-required">选择分类：</label>
		<div class="col-sm-8">
			<input name="typeId" id="typeId" class="form-control" autocomplete="off" type="hidden">
			<div class="regionBox">
				<input id="region" class="form-control" placeholder="请选择分类" autocomplete="off" />
				<div id="tv"></div>
			</div>
		</div>
	</div>

	<script type="text/javascript">
		$(function() {
			selectType();
		})
		function selectType() {
			$('#tv').hide()
			$('.regionBox').hover(function() {
				$('#tv').show()
			}, function() {
				$('#tv').hide()
			})

			$(document).ready(function() {
				var nodeData = [];
				$.ajax({
					url : '/asset/type/treeselect',
					type : 'get',
					dataType : 'json',
					async : false,
					success : function(data) {
						nodeData = data;
						console.log(data)
					}
				})

				$('#tv').treeview({
					data : nodeData, // 节点数据
					levels : 1, // 节点层级数
					color : "#000", // 每一级通用的 节点字体颜色
					backColor : "#fff", // 每一级通用的 节点字背景色
					onhoverColor : "skyblue", // 选中浮动颜色
					showBorder : false, // 不显示边框
					showTags : true, // 是否在每个节点的右侧显示标签。 其值必须在每个节点的数据结构中提供
					highlightSelected : true, // 是否突出显示选定的节点
					selectedColor : "#fff", // 设置选定节点的前景色
					selectedBackColor : "skyblue", // 设置选定节点的背景色
					onNodeSelected : function(event, data) {
						if (data.nodes == null) {
							$('#region').val(data.text);
							$('#typeId').val(data.id);
							$('#tv').hide();
						}
					}
				})

			})
		}
</script>

Controller层

/**
	* 获取分类下拉树列表
	*/
	@GetMapping("/treeselect")
	@ResponseBody
	public List<TreeSelect> treeselect(AssetType assetType) {
		List<AssetType> types = assetTypeService.selectAssetTypeList(assetType);
		return assetTypeService.buildTypeTreeSelect(types);
	}

service层

	/**
	 * 构建前端所需要下拉树结构
	 * 
	 * @param Types
	 *            部门列表
	 * @return 下拉树结构列表
	 */
	@Override
	public List<TreeSelect> buildTypeTreeSelect(List<AssetType> types) {
		List<AssetType> typeTrees = buildTypeTree(types);
		return typeTrees.stream().map(TreeSelect::new).collect(Collectors.toList());
	}


	/**
	 * 递归列表
	 */
	private void recursionFn(List<AssetType> list, AssetType t) {
		// 得到子节点列表
		List<AssetType> childList = getChildList(list, t);
		t.setNodes(childList);

		for (AssetType tChild : childList) {
			if (hasChild(list, tChild)) {
				recursionFn(list, tChild);
			}
		}
	}

	/**
	 * 得到子节点列表
	 */
	private List<AssetType> getChildList(List<AssetType> list, AssetType t) {
		List<AssetType> tlist = new ArrayList<AssetType>();
		Iterator<AssetType> it = list.iterator();
		while (it.hasNext()) {
			AssetType n = it.next();
			if (StringUtils.isNotNull(n.getParentId()) && n.getParentId().longValue() == t.getTypeId().longValue()) {
				tlist.add(n);
			}
		}
		return tlist;
	}

	/**
	 * 判断是否有子节点
	 */
	private boolean hasChild(List<AssetType> list, AssetType t) {
		return getChildList(list, t).size() > 0 ? true : false;
	}

Treeselect树结构实体类

package com.wuyan.asset.base.entity;

import java.io.Serializable;
import java.util.List;
import java.util.stream.Collectors;

import com.fasterxml.jackson.annotation.JsonInclude;
import com.wuyan.asset.dept.entity.AssetDept;
import com.wuyan.asset.type.entity.AssetType;

/**
 * Treeselect树结构实体类
 * 
 * @author 
 */
public class TreeSelect implements Serializable {
	private static final long serialVersionUID = 1L;

	/** 节点ID */
	private Long id;

	/**父节点*/
	private Long pid;
	
	/**节点名称**/
	private String text;

	/** 子节点 */
	@JsonInclude(JsonInclude.Include.NON_EMPTY)
	private List<TreeSelect> nodes;

	public TreeSelect() {

	}
	public TreeSelect(AssetType type) {
		this.id = Long.valueOf(type.getTypeId());
		this.pid=Long.valueOf(type.getParentId());
		this.text = type.getTypeName();
		this.nodes = type.getNodes().stream().map(TreeSelect::new).collect(Collectors.toList());
	}	
	public Long getPid() {
		return pid;
	}

	public void setPid(Long pid) {
		this.pid = pid;
	}

	public String getText() {
		return text;
	}

	public void setText(String text) {
		this.text = text;
	}

	public Long getId() {
		return id;
	}

	public void setId(Long id) {
		this.id = id;
	}

	public List<TreeSelect> getNodes() {
		return nodes;
	}

	public void setNodes(List<TreeSelect> nodes) {
		this.nodes = nodes;
	}
}

model类

/** 子分类 */
	private List<AssetType> nodes = new ArrayList<AssetType>();