最终效果:

点击非叶子节点时，向后台发送请求，获取下级菜单

前台代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

    <%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!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>Insert title here</title>

</head>

<script type="text/javascript" src="<%=basePath %>/js/jquery-1.8.1.js"></script>

	<script type="text/javascript" src="<%=basePath %>/js/jquery.ztree.all-3.5.min.js"></script>

	<link href="<%=basePath %>/css/zTreeStyle.css" rel="stylesheet" type="text/css"/>

	<script type="text/javascript">

		var zTree;

		var setting = {

			async: {

				enable: true,

				url:"<%=basePath%>menu/getMenu.action",

				autoParam:["id=pid"]

			},

			callback:{

				beforeClick:function(treeId,treeNode){

					if(treeNode.isParent){

						zTree.expandNode(treeNode);

						return true;

					}

					return false;

				}

			}

		}; 

		$(function(){

			zTree = $.fn.zTree.init($("#tree"), setting);

		});

	</script>

<body>

	<ul id="tree" class="ztree"></ul>

</body>

</html>

后台代码（springMVC+mybatis）如下：

controller层：

@Controller

@RequestMapping("menu")

public class MenuController {

	@Autowired

	private MenuService menuService;

	@RequestMapping("/getMenu")

	@ResponseBody

	public List<Menu> getMenu(@RequestParam(defaultValue="0")int pid) throws Exception{

		return this.menuService.getMenu(pid);

	}

}

service层如下：

@Service

public class MenuService {

	@Autowired

	private MenuDao menuDao;

	public List<Menu> getMenu(int pid) throws Exception{

		if(pid == 0){

			List<Menu> list = new ArrayList<Menu>();

			Menu menu = this.menuDao.getRoot();

			list.add(menu);

			return list;

		}

		return this.menuDao.getNextNodes(pid);

	}

}

数据库结构如下：

jQuery zTree v3.5 实例3 异步树的更多相关文章

  1. jquery Ztree v3.5 实例2 自定义显示在节点前的图片

    显示效果如下: 代码如下: <html> <head><title></title></head> <script type=&quo ...

  2. Jquery zTree结合Asp.net实现异步加载数据

    zTree结合Asp.net实现异步加载数据 实现简单操作 zTree 下载 api 访问 :http://www.ztree.me/v3/main.php 例子中用到json数据转化 newtons ...

  3. C#使用Jquery zTree实现树状结构显示_异步数据加载

    JQuery-Ztree下载地址:https://github.com/zTree/zTree_v3 JQuery-Ztree数结构演示页面:  http://www.treejs.cn/v3/dem ...

  4. Jquery Ztree异步加载树

    1. 下载jquery的JS文件/ztree的CSS文件和JS文件 https://jquery.com/download/ https://gitee.com/zTree/zTree_v3/tree ...

  5. 爱上MVC3~MVC+ZTree大数据异步树加载

    回到目录 理论部分: MVC+ZTree:指在.net MVC环境下进行开发,ZTree是一个jquery的树插件 大数据:一般我们系统中,有一些表结构属于树型的,如分类,地域,菜单,网站导航等等,而 ...

  6. JQuery Ztree 树插件配置与应用小结

    JQuery Ztree 树插件配置与应用小结 by:授客 QQ:1033553122 测试环境 Win7 jquery-3.2.1.min.js 下载地址: https://gitee.com/is ...

  7. JQuery ztree 异步加载实践

    本来要做一个文件目录浏览界面,需要遍历所有的文件和目录,很显然一次性读取时很费时费力的一件事情. 因此就需要做异步加载.... 不过网上的几篇帖子还挺坑的!原始参考:JQuery异步加载实例,相对来说 ...

  8. MVC小系列（十四）【MVC+ZTree大数据异步树加载】

    ZTree是一个jquery的树插件可以异步加载 第一步定义一个标准的接口(指的是与ztree默认的数据元素保持一致) /// <summary> /// ZTree数据结构 /// &l ...

  9. jquery zTree异步搜索的例子--搜全部节点

    参考博客: https://segmentfault.com/a/1190000004657854 https://blog.csdn.net/houpengfei111/article/detail ...

随机推荐

  1. 在Linux下开始C语言的学习

    为什么要在linux下学习C语言? linux下可以体验到最纯粹的C语言编程,可以抛出其他IDE的影响 环境配置简单,一条命令就足够.甚至对于大多数linux发行版本,都已经不需要配置C语言的环境 查 ...

  2. javaweb常用工具类及配置文件备份

    Javaweb常用工具类及配置文件备份   做一个代码备份,以后常用到的. hibernate工具类备份 package com.dly.service; /*  * hibernate获取sessi ...

  3. hdoj1325 Is It A Tree?

    Is It A Tree?题目链接 题意: 多组测试数据, 每组数据有多个数对, 表示一条有向边(即第一个数是第二个数的父节点), 以 0,0 为一组测试数据结束标志.当输入-1,-1时测试结束. 从 ...

  4. SQL Server调优系列基础篇 - 常用运算符总结

    前言 上一篇我们介绍了如何查看查询计划,本篇将介绍在我们查看的查询计划时的分析技巧,以及几种我们常用的运算符优化技巧,同样侧重基础知识的掌握. 通过本篇可以了解我们平常所写的T-SQL语句,在SQL ...

  5. 使用instsrv.exe+srvany.exe将应用程序安装为windows服务[转]

      转自:http://qingmu.blog.51cto.com/4571483/1248649 一.什么是instsrv.exe和srvany.exe instsrv.exe.exe和srvany ...

  6. EqualsBuilder和HashCodeBuilder(重写equal和hashcode)

    EqualsBuilder和HashCodeBuilder 自动化hashCode()和equals()  问题产生:当需要自动实现hashCode()和equals()方法  解决方法:使用Equa ...

  7. Oracle数据库导入imp命令导入时1659错误处理

    今天在自己的电脑上在给数据库导入表结构及数据时报1659错误,错误如下: IMP-00017:由于oracle错误1659,以下语句失败: “create table “T_TELETE” ..... ...

  8. swift－02代码流程的控制

    // //  main.swift //  02-语句 // //  Created by wanghy on 15/8/9. //  Copyright (c) 2015年 wanghy. All ...

  9. Druid 简单介绍

    官方网址:http://code.alibabatech.com/wiki/display/Druid/Home 1.什么是Druid Druid首先是一个数据库连接池.Druid是目前最好的数据库连 ...

  10. Codevs 1171 潜伏者 2009年NOIP全国联赛提高组

    1171 潜伏者 2009年NOIP全国联赛提高组 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description [问题描述] R 国和S 国正陷 ...