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生成树状图，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • 基于jQuery ztree实现表格风格的树状结构

    zTree 简介 zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. zTree 是开源免费的软件(MIT 许可证).如果您对 zTree 感兴趣或者愿意资助 zTree 继续发展下去,可以进行捐助. zTree v3.0 将核心代码按照功能进行了分割,不需要的代码可以不用加载 采用了 延迟加载 技术,上万节点轻松加载,即使在 IE6 下也能基本做到秒杀 兼容 IE.FireFox.Chrome.Opera.

  • Angular整合zTree的示例代码

    Angular整合zTree的示例代码

    1 前提准备 1.1 新建一个angular4项目 参考博文:点击前往 1.2 去zTree官网下载zTree zTree官网: 点击前往 2 编程步骤 从打印出zTree对象可以看出,zTree对象利用init方法来实现zTree结构:init方法接收三个参数 参数1:一个ul标签的DOM节点对象 参数2:基本配置对象 参数3:标题信息数组 2.1 在index.html中引入相关js.css <!doctype html> <html lang="en">

  • SpringMVC+ZTree实现树形菜单权限配置的方法

    SpringMVC+ZTree实现树形菜单权限配置的方法

    计划在开源项目里加入权限配置的功能,打算加入zTree实现树形结构. Team的Github开源项目链接:https://github.com/u014427391/jeeplatform欢迎star(收藏) zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. zTree下载链接:http://www.treejs.cn/v3/main.php#_zTreeInfo 角色信息实体类: package org.

  • 实例详解ztree在vue项目中使用并且带有搜索功能

    zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. 上篇文章给大家介绍了vue中如何使用ztree,大家可以点击查看. 之前博客介绍过怎么在vue里展示以及获取点击元素的内容,此文章之介绍搜索功能 html <el-form-item label="机构" class="ztree-par"> <i class="icon_org"

  • 详解Angular结合zTree异步加载节点数据

    1 前提准备 1.1 新建一个angular4项目 参考://www.jb51.net/article/119668.htm 1.2 去zTree官网下载zTree zTree官网:点击前往 三少使用的版本:点击前往 1.3 参考博客 //www.jb51.net/article/133284.htm 2 编程步骤 从打印出zTree对象可以看出,zTree对象利用init方法来实现zTree结构:init方法接收三个参数 参数1:一个ul标签的DOM节点对象 参数2:基本配置对象 参数3:标题

  • vue中如何使用ztree

    下面给大家介绍vue ztree 结合使用方法,一起看看吧! 配置package.json 打包下载jquery以及ztree "dependencies": { "element-ui": "^2.1.0", "vue": "^2.5.2", "axios": "^0.16.1", "jquery":"3.3.1", &quo

  • 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> &l

  • Android动态绘制饼状图的示例代码

    Android动态绘制饼状图的示例代码

    项目里面的需求,当时搜索到MPAndroidChart库,可以实现,但是只是一个需求就引用偌大的一个库,感觉不太爽,打算自己自定义一个. 一.惯例先上效果图 更新图 二.GitHub 代码地址,欢迎指正https://github.com/MNXP/XPPieChart 三.思路 1.空心图(一个大圆中心绘制一个小圆)   2.根据数据算出所占的角度   3.根据动画获取当前绘制的角度   4.根据当前角度获取Paint使用的颜色   5.动态绘制即将绘制的 和 绘制已经绘制的部分(最重要) 四

  • python 字典生成树状图的实例

    python 字典生成树状图的实例

    目录 python字典生成树状图 python生成树结构 python字典生成树状图 from graphviz import Digraph # 获取所有节点中最多子节点的叶节点 def getMaxLeafs(myTree): numLeaf = len(myTree.keys()) for key, value in myTree.items(): if isinstance(value, dict): sum_numLeaf = getMaxLeafs(value) if sum_num

  • jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】

    jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】

    本文实例讲述了jQuery插件HighCharts实现的2D堆条状图效果.分享给大家供大家参考,具体如下: 1.HighCharts之2D堆条状图源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D堆条状图</title> <script type="text/javascript" src

  • jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】

    jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】

    本文实例讲述了jQuery插件HighCharts实现的2D条状图效果.分享给大家供大家参考,具体如下: 1.实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D条状图</title> <script type="text/javascript" src="js/jquery

  • jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】

    jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】

    本文实例讲述了jQuery插件FusionCharts实现的2D饼状图效果.分享给大家供大家参考,具体如下: 1.实现源码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>FusionCharts2D饼图</title> <script src="js/jquery-1.4.2.min.js"></scr

  • jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】

    jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】

    本文实例讲述了jQuery插件FusionCharts绘制的2D条状图效果.分享给大家供大家参考,具体如下: 1.设计思路 (1)了解条状图的一些特性和共性,掌握其特性: (2)根据FusionCharts设计条理,设置静态页面和数据源: (3)引入条状图,设置其属性. 2.设计步骤 (1)设计生成条状图的脚本 $(function(){ var bar2D = new FusionCharts( "FusionCharts/Bar2D.swf", "myChartId&qu

  • jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】

    jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】

    本文实例讲述了jQuery插件FusionCharts绘制的3D饼状图效果.分享给大家供大家参考,具体如下: 1.实现源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>最新版FusionCharts3D饼图</title> <script src="js/jquery-1.4.2.min.js"></s

  • 详解JavaScript实现动态的轮播图效果

    详解JavaScript实现动态的轮播图效果

    利用javascript能实现常见的动态的网页轮播图效果,如下图1所示: 图1 实现该轮播图有以下几个要点: (1)在左右两侧各有一个箭头,分别指的是向左和向右切换,即点击相应的位置就会切换到该图片之前(或之后)的一张图片 (2)在图片的下方有一排圆形按钮,每个按钮有各自的单击事件,点击任意一个按钮就切换到对应的图片 (3)不点击图片时,图片会自动播放,即有一个图片轮播效果 首先可以写出大概的HTML代码为代码1: 代码1: <div id="container"> <

  • vue动态绘制四分之三圆环图效果

    参照网上的一个案例"参照的为绘制的是一个动态的圆环",现在我的需求是改编成四分之三的圆环 实现效果: 样式展示 canvas绘图基本操作设置就可以 参考源代码链接:原文:https://www.jb51.net/html5/682215.html > 引用的上文源代码进行修改,注意几点 1. 理解绘制圆环的原理,是根据弧度进行绘制 2. 弧度的计算公式 3. 每一角度转换成弧度 4. 起点和终点的坐标 > 自己画个图,方便理解! 首先根据图可以看到起点和重点,看坐标知道起点

随机推荐