简单的三级菜单

一.工具类tree

编写工具类tree

package com.eastcom.common.domain;

import java.util.ArrayList;
import java.util.List;
import java.util.Map;

import com.alibaba.fastjson.JSON;

/**
 * tree TODO <br>
 * 
 * 
 * 
 */
public class Tree<T> {
	/**
	 * 节点ID
	 */
	private String id;
	/**
	 * 显示节点文本
	 */
	private String text;
	/**
	 * 节点状态，open closed
	 */
	private Map<String, Object> state;
	/**
	 * 节点是否被选中 true false
	 */
	private boolean checked = false;
	/**
	 * 节点属性
	 */
	private Map<String, Object> attributes;

	/**
	 * 节点的子节点
	 */
	private List<Tree<T>> children = new ArrayList<Tree<T>>();

	/**
	 * 父ID
	 */
	private String parentId;
	/**
	 * 是否有父节点
	 */
	private boolean hasParent = false;
	/**
	 * 是否有子节点
	 */
	private boolean hasChildren = false;

	public String getId() {
		return id;
	}

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

	public String getText() {
		return text;
	}

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

	public Map<String, Object> getState() {
		return state;
	}

	public void setState(Map<String, Object> state) {
		this.state = state;
	}

	public boolean isChecked() {
		return checked;
	}

	public void setChecked(boolean checked) {
		this.checked = checked;
	}

	public Map<String, Object> getAttributes() {
		return attributes;
	}

	public void setAttributes(Map<String, Object> attributes) {
		this.attributes = attributes;
	}

	public List<Tree<T>> getChildren() {
		return children;
	}

	public void setChildren(List<Tree<T>> children) {
		this.children = children;
	}

	public boolean isHasParent() {
		return hasParent;
	}

	public void setHasParent(boolean isParent) {
		this.hasParent = isParent;
	}

	public boolean isHasChildren() {
		return hasChildren;
	}

	public void setChildren(boolean isChildren) {
		this.hasChildren = isChildren;
	}

	public String getParentId() {
		return parentId;
	}

	public void setParentId(String parentId) {
		this.parentId = parentId;
	}

	public Tree(String id, String text, Map<String, Object> state, boolean checked, Map<String, Object> attributes,
			List<Tree<T>> children, boolean isParent, boolean isChildren, String parentID) {
		super();
		this.id = id;
		this.text = text;
		this.state = state;
		this.checked = checked;
		this.attributes = attributes;
		this.children = children;
		this.hasParent = isParent;
		this.hasChildren = isChildren;
		this.parentId = parentID;
	}

	public Tree() {
		super();
	}

	@Override
	public String toString() {

		return JSON.toJSONString(this);
	}

}

二.controller层

@GetMapping("/tree")
	@ResponseBody
	public Tree<VillageTownDO> tree() {
		Tree<VillageTownDO> tree = new Tree<VillageTownDO>();
		tree = villageTownService.getTree(getUserId());
		return tree;
	}

	@GetMapping("/treeView")
	String treeView() {
		return   "department/villageTown/villageTownTree";
	}

三.service层

	Tree<VillageTownDO> getTree(Long userId);

四.ServiceImpl层

@Override
	public Tree<VillageTownDO> getTree(Long userId) {
		List<Tree<VillageTownDO>> trees = new ArrayList<Tree<VillageTownDO>>();
		List<VillageTownDO> villageTowns = null;
		Map<String, Object> map = new HashMap<String,Object>();
		if (userId == null || userId == 0) {
			villageTowns = villageTownDao.list(map);
		} else {
			map.put("userId", userId);
			villageTowns = villageTownDao.listByUser(map);
		}
		
		for (VillageTownDO villageTown : villageTowns) {
			Tree<VillageTownDO> tree = new Tree<VillageTownDO>();
			
			
			tree.setId(villageTown.getTownId().toString());
			tree.setParentId(villageTown.getParentId().toString());
			tree.setText(villageTown.getName());
			/*Map<String, Object> state = new HashMap<>(16);
			state.put("opened", true);
			tree.setState(state);*/
			trees.add(tree);
		}
		// 默认顶级菜单为０，根据数据库实际情况调整
		Tree<VillageTownDO> t = BuildTree.build(trees);
		return t;
	}

五.mapper

<select id="list" resultType="com.eastcom.department.domain.VillageTownDO">
		select `town_id`,`parent_id`,`name` from v_pjdj_village_town
        <where>  
		  		  <if test="townId != null and townId != ''"> and town_id = #{townId} </if>
		  		  <if test="parentId != null and parentId != ''"> and parent_id = #{parentId} </if>
		  		  <if test="name != null and name != ''"> and name like concat('%',#{name},'%') </if>
		  		</where>
        <choose>
            <when test="sort != null and sort.trim() != ''">
                order by ${sort} ${order}
            </when>
			<otherwise>
                order by town_id desc
			</otherwise>
        </choose>
		<if test="offset != null and limit != null">
			limit #{offset}, #{limit}
		</if>
	</select>
	
	<select id="listByUser" resultType="com.eastcom.department.domain.VillageTownDO">
		select a.`town_id`,a.`parent_id`,a.`name` 
		from v_pjdj_village_town a, v_pjdj_user_villages b
		where b.user_id = #{userId} and a.town_id = b.district
		union
		select a.`town_id`,a.`parent_id`,a.`name` 
		from v_pjdj_village_town a, v_pjdj_user_villages b
		where b.user_id = #{userId} and a.town_id = b.parent_id
		union 
		select a.`town_id`,a.`parent_id`,a.`name` 
		from v_pjdj_village_town a
		where a.parent_id = 0
	</select>

html

<!DOCTYPE html>
<html>

<meta charset="utf-8">
<head th:include="include :: header"></head>

<body class="gray-bg">
	<div class="wrapper wrapper-content animated fadeInRight">

		<div class="row">
			<div class="col-sm-12">

				<div class="ibox-content">
					<div id="villageTownTree"></div>
				</div>
				<div class="form-group">
					<div class="col-sm-12 col-sm-offset-12">
						<button class="btn btn-danger" onclick="clearVillage()">清空</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div th:include="include :: footer"></div>


	<script type="text/javascript">
		
	
		$(document).ready(function() {
			getTreeData()
		});
		function getTreeData() {
			$.ajax({
				type : "GET",
				url : contextPath+"/department/villageTown/tree",
				success : function(tree) {
					loadTree(tree);
				}
			});
		}
		function loadTree(tree) {
			$('#villageTownTree').jstree({
				'core' : {
					'data' : tree
				},
				"plugins" : [ "search" ]
			});
			$('#villageTownTree').jstree().open_all();
		}
		function clearVillage() {
			parent.loadVillageTown("","");
			var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
			parent.layer.close(index);
		}
		$('#villageTownTree').on("changed.jstree", function(e, data) {
			if(data.node.parents.length == 3){
				parent.loadVillageTown(data.node.id,data.node.text);
				var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
				parent.layer.close(index);
			}
			
		});
		
	</script>
</body>

</html>

每次html,js调用时

<div id="villageDiv" class="form-group" style="display: none"  >	
								<label class="col-sm-3 control-label">所属村社（村庄）：</label>
								<div class="col-sm-8">
									<input id="villageId" name="villageId" type="hidden"> 
									<input id="village" name="village" class="form-control" type="text"
										style="cursor: pointer;" onclick="openDept()"
										readonly="readonly" placeholder="所属村/社区">
								</div>
							</div>









var openDept = function(){
	layer.open({
		type:2,
		title:"选择村/社区",
		shadeClose : true, // 点击遮罩关闭层
		area : [ '400px', '520px' ],
		content:"../../department/villageTown/treeView"
	})
}

loadVillageTown = function(id, text) {
	$("#villageId").val(id);
	$("#village").val(text);
}

展示结果

表sql

SET FOREIGN_KEY_CHECKS=0;

-- ----------------------------
-- Table structure for pjdj_village_town
-- ----------------------------
DROP TABLE IF EXISTS `pjdj_village_town`;
CREATE TABLE `pjdj_village_town` (
  `town_id` bigint(20) NOT NULL AUTO_INCREMENT,
  `parent_id` bigint(20) NOT NULL COMMENT '上一级ID，乡镇(街道)为0',
  `name` varchar(255) NOT NULL COMMENT '名字',
  `uuid` varchar(255) DEFAULT NULL COMMENT 'uuid',
  `status` int(10) NOT NULL DEFAULT '1' COMMENT '状态',
  PRIMARY KEY (`town_id`),
  KEY `idx_pid` (`parent_id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=11354 DEFAULT CHARSET=utf8;