SpringMVC+mybatis+ztree实现树的展示

最新推荐文章于 2021-03-26 00:06:10 发布

前方太黑暗

最新推荐文章于 2021-03-26 00:06:10 发布

阅读量840

点赞数 1

分类专栏： ztree 文章标签： zTree ztree回显

本文链接：https://blog.csdn.net/xcc_2269861428/article/details/94004681

版权

ztree 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

实现页面中显示叔结构，并显示，已保存的节点

如图：

选中的数据是从数据库读取出来的

menu表

账户与菜单关系表

前台界面：

首先需要导入ztree的js及样式

JSP页面代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Tree</title>
    <%@include file="../../include/list.jsp" %>
</head>
<SCRIPT type="text/javascript">
		var setting = {
			check: {
				enable: true
			},
			data: {
				simpleData: {
					enable: true
				}
			}
		};

		var code;
		// 设置节点
		function setCheck() {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			var type = { "Y":"ps", "N":"ps"};
			zTree.setting.check.chkboxType = type;
		}
		
		// 获取选中节点
		function getCheck(){
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");	
			var nodes=zTree.getCheckedNodes(true);
			var ids = "";
			for(var i in nodes){
				ids =ids + nodes[i].id+",";
			}
			return ids;
		}
		
		//保存节点关系
		function savNodeRelation(){
			var ids = getCheck();
			ws.tools.ajaxRequest({
				url : SystemGlobal.baseUrl+"/oppo/menu/saveNode.action",
				dataType : 'json',
				type : 'POST',
				data:{
					user_id:1,
					role_id:ids
				},
				successfun : function(response) {
					if (response.status == 0) {
						ws.tools.modalDialog.alert("保存成功");
					}else{
						ws.tools.modalDialog.alert(response.msg,2);
					}
				},
				errorfun : function() {
					ws.tools.modalDialog.alert('请求失败！',2);
				}
		 	}); 
		}
		
		function getData(){
			var data = null;
			ws.tools.ajaxRequest({
				url : SystemGlobal.baseUrl+"/oppo/menu/getTreeList.action",
				dataType : 'json',
				type : 'get',
				successfun : function(response) {
					if (response.status == 0) {
						 data = response.data;
					}else{
						ws.tools.modalDialog.alert(response.msg,2);
					}
				},
				errorfun : function() {
					ws.tools.modalDialog.alert('请求失败！',2);
				}
		 	});
			return data;
		}
		
		$(document).ready(function(){
			var data = getData(); // zNodes
			$.fn.zTree.init($("#treeDemo"), setting, data);
			setCheck();
			
			$("#submitNode").click(function(){
				savNodeRelation();
			});
			
			$("#refreshNode").click(function(){
				var data = getData(); // zNodes
				$.fn.zTree.init($("#treeDemo"), setting, data);
				setCheck();
			});
		});
	</SCRIPT>    
<body style="overflow:auto !important">
	<div class="">
		<ul id="treeDemo" class="ztree"></ul>
	</div>
	
	<button id="submitNode" >提交节点</button>
	<button id="refreshNode">刷新</button>
</body>
</html>

bean

public class Menu {

	private Long id;
	
	private String name;
	
	private String url;
	
	private Long pId;
	
	private boolean open;
	
	private boolean checked;

	public Long getId() {
		return id;
	}

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

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getUrl() {
		return url;
	}

	public void setUrl(String url) {
		this.url = url;
	}

	public Long getpId() {
		return pId;
	}

	public void setpId(Long pId) {
		this.pId = pId;
	}

	public boolean isOpen() {
		return open;
	}

	public void setOpen(boolean open) {
		this.open = open;
	}

	public boolean isChecked() {
		return checked;
	}

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

Controller代码

@Controller
@RequestMapping("/menu")
public class MenuController {
	@Autowired
	private MenuService menuService;
	
	/**
	 * 保存数据
	 * @param request
	 * @return
	 */
	@RequestMapping(value="saveNode", method = RequestMethod.POST, produces = "application/json;charset=UTF-8")
	@ResponseBody
	public ResponseData saveNode(HttpServletRequest request){
		ResponseData responseData=new ResponseData();
		Map<String,Object> map = MapUtil.requestParam2MapString(request);
		try{
			menuService.saveNode(map);
			responseData.setStatus(0);
			responseData.setMsg("保存数据成功");
	    } catch (Exception e) {
			e.printStackTrace();
			responseData.setStatus(1);
			responseData.setMsg("保存数据失败");
		}
		return  responseData;
	}
	
	@RequestMapping(value="getTreeList", method = RequestMethod.GET, produces = "application/json;charset=UTF-8")
	@ResponseBody
	public ResponseData getTreeList(HttpServletRequest request){
		ResponseData responseData=new ResponseData();
		
		try{
			List<Menu> menu = menuService.getMenuByIds();
			responseData.setStatus(0);
			responseData.setMsg("获取数据成功");
			responseData.setData(menu);
	    } catch (Exception e) {
			e.printStackTrace();
			responseData.setStatus(1);
			responseData.setMsg("获取数据失败");
		}
		return  responseData;
	}
	
}

Service代码

@Service
public class MenuService extends BaseService<MenuDao> {
	@Autowired
	private MenuDao menuDao;
    
	public List<Menu> getMenu(){
		return menuDao.getMenu();
	}
	
	/**
	 * 插入节点
	 * @param map
	 */
	public void saveNode(Map<String,Object> map){
		menuDao.deleteNode(map.get("user_id").toString());
		menuDao.insertNode(map);
	}
	
	/**
	 * 获取节点
	 * @return
	 */
	public List<Menu> getMenuByIds(){
		List<Menu> list = menuDao.getMenu();
		Set<Long> p_list = new HashSet<>();
		Map<String, Object> map = menuDao.getMenuIdByUserId("1");
		String ids [] = String.valueOf(map.get("role_id")).split(",");
		List<String> idsList = Arrays.asList(ids);
		// 父节点展开、子节点选中
		for(Menu m : list){
			if(m.getpId() == 0){
				m.setOpen(true); //打开
			}else{
				if(idsList.contains(m.getId()+"")){
					p_list.add(m.getpId());
					m.setChecked(true); // 选中
				}
			}
		}
		// 父节点选中
		for(Menu m : list){
			if(p_list.contains(m.getId())){
				m.setChecked(true); // 选中
			}
		}
		
		return list;
	}
	
}

DAO代码

public interface MenuDao extends BaseDao {
	
	public List<Menu> getMenu();
	
	public void insertNode(Map<String,Object> map);
	
	public Map<String,Object> getMenuIdByUserId(String id);
	
	public List<Menu> getMenuByIds(String [] ids);
	
	public void deleteNode(String id);
}

XML代码

<!-- 获取菜单 -->
	<select id="getMenu" resultType="com.oppo.common.model.Menu">
		select id,name,url,p_id pId from newmedia_base.menu
	</select>
	
	<!-- 获取菜单ID -->
	<select id="getMenuIdByUserId" resultType="java.util.Map">
		select id,user_id,role_id from newmedia_base.role_menu where user_id = #{id}
	</select>
	
	<!-- 获取菜单调通IDS -->
	<select id="getMenuByIds" resultType="com.oppo.common.model.Menu">
		select id,name,url,p_id pId from newmedia_base.menu
		where
		id in
		<foreach item="item" index="index" collection="array"  open="(" separator="," close=")">
			#{item}
		</foreach>
	</select>

<insert id="insertNode" parameterType="java.util.Map" >
		insert into  newmedia_base.role_menu         
		<trim prefix="(" suffix=")" suffixOverrides=",">
			<if test="user_id != null">  user_id, </if>
			<if test="role_id != null">  role_id, </if>
		</trim>
		<trim prefix="values (" suffix=")" suffixOverrides=",">
			<if test="user_id != null">   #{user_id,jdbcType=INTEGER },</if>
			<if test="role_id != null">   #{role_id,jdbcType=INTEGER },</if>
		</trim>
	</insert>
	
	<delete id="deleteNode" parameterType="java.lang.String">
    	delete from newmedia_base.role_menu where user_id = #{id}
    </delete>

前方太黑暗

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
SpringMVC+mybatis+ztree实现树的展示

实现页面中显示叔结构，并显示，已保存的节点如图：选中的数据是从数据库读取出来的menu表账户与菜单关系表前台界面：首先需要导入ztree的js及样式JSP页面代码<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&...
复制链接

扫一扫