当前位置: 首页 > 编程笔记 >

spring+srpingmvc+hibernate实现动态ztree生成树状图效果

凤安然
2023-03-14
本文向大家介绍spring+srpingmvc+hibernate实现动态ztree生成树状图效果,包括了spring+srpingmvc+hibernate实现动态ztree生成树状图效果的使用技巧和注意事项,需要的朋友参考一下

ztree生成树状图

ztree官网

前台

导入js和css包

下载地址

前端页面 ztree.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" isELIgnored="false" %>
<!DOCTYPE html>
<HTML>
<HEAD>
	<TITLE>ztree</TITLE>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" href="${pageContext.request.contextPath}/Css/demo.css" type="text/css">
	<link rel="stylesheet" href="${pageContext.request.contextPath}/Css/zTreeStyle/zTreeStyle.css" type="text/css">
	<script type="text/javascript" src="${pageContext.request.contextPath}/Js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/Js/jquery.ztree.core-3.5.js"></script>

	<SCRIPT type="text/javascript">
	
		//初始化
		var setting = {
			data: {
				simpleData: {
					enable: true
				}
			},
			callback: {
				beforeClick: beforeClick
			}
		};

		//数据集
		var zNodes =[

			//根据这种格式生成树状图
			// {id:1, pId:0, name:"河北省"},
			// {id:12, pId:1, name:"石家庄"},
			// {id:13, pId:1, name:"邢台"},
			// {id:14, pId:1, name:"邯郸"},
			// {id:2, pId:0, name:"北京市"},
			// {id:22, pId:2, name:"海淀区"},
			// {id:23, pId:2, name:"朝阳区"},
			// {id:24, pId:2, name:"长安区"}

		];
		
		
		//点击后的操作
		function beforeClick(treeId, treeNode, clickFlag) {


			//获取父窗口中id为Text1
	  var parentControl=parent.document.getElementById("Text1");
			//把值设置为treeNode.name;
	  parentControl.value=treeNode.name;

		}
		


		//访问控制层,获取数据。
		$(document).ready(function(){
			var url="${pageContext.request.contextPath}/menu/findZtree";
			$.getJSON(url,{},function(nodes){
				//alert(nodes);
				console.log(JSON.stringify(nodes));
				zNodes=nodes;
				$.fn.zTree.init($("#treeDemo"), setting, zNodes);
		})

	});


	</SCRIPT>
 </HEAD>

<BODY>
<div class="content_wrap">
	<div class="zTreeDemoBackground left">
		<ul id="treeDemo" class="ztree"></ul>
	</div>
</div>
</BODY>
</HTML>

后台

ztree所需实体类

package com.shp.dev.common;
public class Ztree {
 private String id;
 private String pId;
 private String name;
 public String getId() {
 return id;
 }
 public void setId(String id) {
 this.id = id;
 }
 public String getpId() {
 return pId;
 }
 public void setpId(String pId) {
 this.pId = pId;
 }
 public String getName() {
 return name;
 }
 public void setName(String name) {
 this.name = name;
 }
 public Ztree() {
 }
 public Ztree(String id, String pId, String name) {
 this.id = id;
 this.pId = pId;
 this.name = name;
 }
 @Override
 public String toString() {
 return "Ztree{" +
  "id='" + id + '\'' +
  ", pId='" + pId + '\'' +
  ", name='" + name + '\'' +
  '}';
 }
}

dao接口

package com.shp.dev.menu.dao;
import com.shp.dev.menu.pojo.Menu;
import java.util.List;
public interface MenuDao {
 List<Menu> queryAll();
}

dao的实现类

package com.shp.dev.menu.dao;
import com.shp.dev.menu.pojo.Menu;
import org.hibernate.SessionFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;
import java.util.List;
@Repository("menuDao")
public class MenuDaoImpl implements MenuDao{
 @Autowired
 private SessionFactory sessionFactory;
 @Override
 public List<Menu> queryAll() {
 return sessionFactory.getCurrentSession().createQuery("from Menu").list();
 }
}

业务接口

package com.shp.dev.menu.service;
import com.shp.dev.menu.pojo.Menu;
import java.util.List;
public interface MenuService {
 List<Menu> queryAll();
}

业务实现层

package com.shp.dev.menu.service;
import com.shp.dev.menu.dao.MenuDao;
import com.shp.dev.menu.pojo.Menu;
import com.shp.dev.role.dao.RoleDao;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import java.util.List;
@Service("menuService")
public class MenuServiceImpl implements MenuService{
 //@Transactional(readOnly = true)//只读事务
 // @Transactional(rollbackFor = Exception.class)//启动事务,所有异常都回滚
 @Autowired
 private MenuDao menuDao;
 @Override
 @Transactional(readOnly = true)//只读事务
 public List<Menu> queryAll() {
 return menuDao.queryAll();
 }
}

控制层

package com.shp.dev.menu.web;
import com.shp.dev.common.Ztree;
import com.shp.dev.menu.pojo.Menu;
import com.shp.dev.menu.service.MenuService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.ArrayList;
import java.util.List;
@Controller
@RequestMapping("/menu")
public class MenuController {
 @Autowired
 private MenuService menuService;
 @RequestMapping("/findZtree")
 @ResponseBody // 返回json对象
 public List<Ztree> findZtree(){
 List<Ztree> menus=new ArrayList<Ztree>();
 List<Menu> query = menuService.queryAll();
 for (Menu m : query) {
  menus.add(new Ztree(m.getId(),m.getParent_id(),m.getName()));
 }
 return menus;
 }
}

总结

以上所述是小编给大家介绍的spring+srpingmvc+hibernate实现动态ztree生成树状图,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

 类似资料:
  • 我正在用C#开发一个窗口表单,使用数据库中的数据构建一个树视图。有一个存储过程,给出以下信息的列表 id-节点id描述-树视图中显示的值是EndNode-0,如果它是结束节点;1,如果这个节点有孩子 如果isEndNode为1,那么我必须使用当前节点的id调用相同的存储过程,以接收其下的子节点列表。 我已经建立了一个机制来调用存储过程并获取项目列表,但我不确定如何填充树结构。我想我会将第一个列表显

  • 本文向大家介绍jQuery zTree插件快速实现目录树,包括了jQuery zTree插件快速实现目录树的使用技巧和注意事项,需要的朋友参考一下 ztree是JQuery的一个开源树形目录的插件,用来快速构建网站的树形目录结构,并且提供了功能丰富,利于扩展的API。 JQuery ztree官网 只要引入jquery和ztree的库js,然后给ztree提供需要的json数据,并且设置好ztre

  • 需求是列表页操作栏点击导出按钮 然后根据数据详情动态生成PDF 这种一般是前端做还是后端做 如果前端实现是不是画一个页面出来 然后需要跳到页面里 用html导出PDF这方式种实现 有做过的大佬麻烦帮忙解答下谢谢

  • GIF(Graphics Interchange Format,图形交换格式)是一种“位图”图像格式,它以 作为图像的扩展名。GIF 图片非常适合在互联网中使用,这是因为它采用了图像预压缩技术,该技术的应用,在一定程度上减少了图像传播、加载所消耗的时间。 与其他格式的图片相比,GIF 还有一项非常重要的应用,那就是生成动态图。我们知道,Pillow 能够处理多种图像格式,包括 GIF 格式,它可以

  • 需求: 1、根据后台下发数据生成多条节点连线图(类似于echarts的 多树图结构)。 2、实现跨树图某个节点间连线,且连线为虚线。 3、点与点之间的连线鼠标移入,上线显示数字(如下图),节点鼠标移入也会显示相应的数字。 效果如下图所示: 效果图如下: 1、尝试echarts的树图实现,但是echarts貌似不支持跨树图连线, 2、尝试用echarts的 关系图实现,可以实现任意节点间连线,但是需

  • 本文向大家介绍JS highcharts动态柱状图原理及实现,包括了JS highcharts动态柱状图原理及实现的使用技巧和注意事项,需要的朋友参考一下 实现一个柱状图,这个柱状图的高度在不停的刷新,效果如下: 官网是没有动态刷新的示例的,由于需要我查看了其源码,并根据之前示例做出了动态柱状图的效果,希望对同学们有用! 看一下代码: 同样,绘制这个图需要的也是双维数组,我尝试了几个方法,使用 s