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. Spring绑定表单数据

    Spring提供了一些jsp页面常用的form标签,很大程度上提高了我们开发的速度,不用再一个个的标签去绑定属性,而且后台接收数据也很简单,可以直接接收object对象作为属性.官方form标签介绍的 ...

  2. 使用sklearn优雅地进行数据挖掘

    目录 1 使用sklearn进行数据挖掘 1.1 数据挖掘的步骤 1.2 数据初貌 1.3 关键技术2 并行处理 2.1 整体并行处理 2.2 部分并行处理3 流水线处理4 自动化调参5 持久化6 回 ...

  3. 使用HtmlAgilityPack解析Html(非常好用)

    /// <summary> /// 设计成一个exe,解决WebBrowser控件内存泄漏的问题. /// </summary> public partial class Ma ...

  4. 第47讲：Scala多重界定代码实战及其在Spark中的应用源码解析

    今天学习了scala的多重界定 T >: A <: B 表示T同时有下界和下界,下界为A,上界为B,A为B的子类型.下界必须写在前面,上界必须写在后面,位置不能颠倒. T<:A wi ...

  5. 我的iOS之路2

    第一篇果然没人看呢...好吧...那就当笔记做吧...第一篇主要写的是生成了一个helloworld,可能也是和别人撞了,所以有点厌烦,连名字都改掉吧 好,开始写第二篇 之前做第一个应用程序的时候没有 ...

  6. testng+reportng,运行xml

    在看了http://seleniumcn.cn/read.php?tid=7960视频的Reportng后自己实验了下, 1.下载reportng-1.1.4.zip,解压后如下,把reportng- ...

  7. ipv6例子

    一个IPv6通讯的例子 /* sudochen@163.com * * */ #include <stdio.h> #include <string.h> #include & ...

  8. AWIT DBackup 0.0.20 发布，备份系统

    AWIT DBackup 0.0.20 修复了几个小 bug. AllWorldIT DBackup 是一个备份系统,为每个目录创建一个独立的压缩包,这更便于搜索. 特点: 使用 xz, bzip2, ...

  9. MQTT和WebSocket

    严格来说,MQTT跟WebSocket关系不大.他们不是在一个层级的.   MQTT和TCP.WebSocket的关系可以用下图一目了然:   参考资料: http://www.zhihu.com/q ...

  10. 【Bugly技术干货】那些年我们用过的显示性能指标

    Bugly 技术干货系列内容主要涉及移动开发方向,是由 Bugly 邀请腾讯内部各位技术大咖,通过日常工作经验的总结以及感悟撰写而成,内容均属原创,转载请标明出处. 前言: 注:Google 在自己文 ...