欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

jsp+bootstrap-treeview树形下拉菜单

程序员文章站 2022-06-08 10:44:07
...

前端

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

<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>();