Ztree行政地区树状展示（点击加载） 效果如下：

开始贴代码：

实体类 Item，用于对Ztree的节点展示

public class Item {

	private String id;

	private String pId;

	private String name;

	private int type;

	private String isParent;

        //getters、setters

}

　　

通过业务代码获取加载的对象：

@RequestMapping("/province/showProvince")

@ResponseBody

public List<Item> showProvince(HttpServletRequest request,Model model){

    List<Province> all = provinceService.getAll();

    List<Item> list = new ArrayList<Item>(all.size());

    for(Province p : all){

    	Item item = new Item();

    	item.setId(p.getCode());

    	item.setpId("0");

    	item.setName(p.getProvinceName());

    	item.setIsParent("true");

    	item.setType(0);

    	list.add(item);

    }

       return list;

  }

关键看页面的脚本和实现：

页面代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

             "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Insert title here</title>

<link rel="stylesheet" href="css/demo.css" type="text/css" />

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

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>

<script type="text/javascript" src="js/menu.js"></script>

<script type="text/javascript" src="js/jquery.ztree.core-3.5.js"></script>

</head>

<body>

	<div class="zTreeDemoBackground left">

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

	</div>

</body>

</html>

menu.js

var menu = {

	setting : {

		data : {

			simpleData : {

				enable : true

			}

		},

		keep : {

			parent : true

		},

		/*

		 * view : { dblClickExpand : false },

		 */

		callback : { // 回调函数

			onExpand : addNode,

			onClick : addNode

		}

	},

	loadMenuTree : function() {

		$.post("province/showProvince.do", null, function(data) {

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

		});

	}

};

$().ready(function() {

	menu.loadMenuTree();

});

function addNode(event, treeId, treeNode, clickFlag) {

	var zTree = $.fn.zTree.getZTreeObj("tree");

	if (treeNode.isParent && typeof (treeNode.children) == "undefined") {

		var type = treeNode.type;

		var parameter = {

			pId : treeNode.id

		};

		if (type == 0) {

			$.post("city/showCity.do", parameter, function(data) {

				zTree.addNodes(treeNode, data);

			});

		}

		if (type == 1) {

			$.post("county/showCounty.do", parameter, function(data) {

				zTree.addNodes(treeNode, data);

			});

		}

	}

}

其中onExpand : addNode,  onClick : addNode 两个回调函数，分别是在点击折叠按钮和节点时，异步加载子节点的内容，onDblClick添加回调函数时，发现会触发onExpand 事件，是因为zTree双击时触发onExpand事件,所以在setting中设置 view : { dblClickExpand : false } 可关闭这个默认设置。

最后，提供一个zTree的在线api: http://www.treejs.cn/v3/api.php

Ztree行政地区树状展示的更多相关文章

  1. 基于ExtJs6前台,SpringMVC-Spring-Mybatis,resteasy,mysql无限极表设计，实现树状展示数据(treepanel)

    先从后台讲起 1.表的设计 parent_id就是另外一条记录的id,无限极表设计可以参考  http://m.blog.csdn.net/Rookie_Or_Veteran/article/deta ...

  2. 树状结构Java模型、层级关系Java模型、上下级关系Java模型与html页面展示

    树状结构Java模型.层级关系Java模型.上下级关系Java模型与html页面展示 一.业务原型:公司的组织结构.传销关系网 二.数据库模型 很简单,创建 id 与 pid 关系即可.(pid:pa ...

  3. layui+ztree 树状下拉框

    一.效果图 [关闭] [展开] 二.代码 [HTML]注:布局一定要用DIV不是select否则效果···· <div class="layui-form-item"> ...

  4. ztree 文件夹类型的 树状图

    未套程序的源代码: 链接:http://pan.baidu.com/s/1nuHbxhf 密码:4aw2 已套程序的源代码: css样式: /*发布邮件 选择领导弹窗*/ .xuandao{ disp ...

  5. ztree 树状图——例

    效果: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta ...

  6. 树状图展示终端目录内容-tree

    以树状图列出目录的内容,让你一目了然 执行 tree 指令,它会列出指定目录下的所有文件,包括子目录里的文件. 安装 我们通过包管理工具可以方便的安装它 mac - brew install tree ...

  7. javascript中用闭包递归遍历树状数组

    做公司项目时,要求写一个方法,方法的参数为一个菜单数组集合和一个菜单id,菜单数组的格式为树状json,如下面所示: [{"id":28,"text":&quo ...

  8. Android中的树状(tree)列表

    树状列表前端挺常用的,还有人专门写过Ztree,Android中有的时候也需要使用到树状列表,上篇文章写了一下ExpandableListView,ExpandableListView最多支持两级结构 ...

  9. Android开源图表之树状图和饼状图的官方示例的整理

    最近由于工作需要,所以就在github上搜了下关于chart的三方框架 官方地址https://github.com/PhilJay/MPAndroidChart 由于工作需要我这里整理了一份Ecli ...

随机推荐

  1. UVALive 4329 Ping pong（树状数组）

    题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=13895 题意:一条街上住有n个乒乓选手,每个人都有一个技能值,现在 ...

  2. Winform以任意角度旋转PictureBox中的图片的方法

    方法1: private void RotateFormCenter(PictureBox pb, float angle) { Image img = pb.Image; int newWidth ...

  3. linux下subversion server安装手册

    linux下subversion server安装手册 安装基于的Linux版本为:Red Hat Enterprise Linux Server release 6.3. 一 准备需要的安装包. ( ...

  4. 离线安装eclipse的svn插件

    原文:http://blog.sina.com.cn/s/blog_8e037f440101ebmz.html 连接不到外网情况下,在eclipse中安装svn插件. 两种方法: 首先下载安装到ecl ...

  5. C++混合编程之idlcpp教程Lua篇(6)

    上一篇在这 C++混合编程之idlcpp教程Lua篇(5) 第一篇在这 C++混合编程之idlcpp教程(一) 工程LuaTutorial4中加入了四个文件:LuaTutorial4.cpp, Tut ...

  6. xUtils 1.8.4 (Android工具库) 发布 - http模块优化

    感谢关注xUitls的网友最近一段时间给予的热心反馈,xUtils近期做了很多细节优化,同时修复和优化了大家反馈的一些问题.重要的变化有http请求返回更全面的结果信息:下载设置断点续下时,如果服务器 ...

  7. Python札记 -- 装饰器补充

    本随笔是对Python札记 -- 装饰器的一些补充. 使用装饰器的时候,被装饰函数的一些属性会丢失,比如如下代码: #!/usr/bin/env python def deco(func): def ...

  8. 【Bugly干货分享】微信文件微起底Ⅰ

    Bugly 技术干货系列内容主要涉及移动开发方向,是由Bugly邀请腾讯内部各位技术大咖,通过日常工作经验的总结以及感悟撰写而成,内容均属原创,转载请标明出处 微信大家都在用,但微信的本地文件到底隐藏 ...

  9. 共享你的控件 -- 用NuGet包装自己的控件

    简介 在当前的开发中,NuGet的使用已经有了不小的地位,特别是应用.NET Core的UWP开发里,模块化的平台本身更是直接依赖于NuGet这一包管理器. 有时自己开发了一个不错的控组件,想通过Nu ...

  10. dijit样式定制(二)dijit.form.Select与dijit.form.NumberSpinner

    dijit.form.Select: Select的样式位于Claro/form/Select.less中,Select主要通过table来布局,下图可以看到Select的布局结构 介绍几个主要的cl ...