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. 阿里云安装JDK1.7

    本人阿里云选择的是CentOS 7.0系统,本系列文件将全部基于此环境. 1.下载JDK,版本为jdk-7u79-linux-x64.tar.gz   2.使用FileZilla上传至/softwar ...

  2. Django-简单项目创建

    在磁盘中找到需要存放项目代驾的目录,进入该目录(本机为: /Downloads/All) 输入Django创建项目命令:django-admin startproject mysite,此时在目录下会 ...

  3. spark学习笔记总结-spark入门资料精化

    Spark学习笔记 Spark简介 spark 可以很容易和yarn结合,直接调用HDFS.Hbase上面的数据,和hadoop结合.配置很容易. spark发展迅猛,框架比hadoop更加灵活实用. ...

  4. <Oracle Database>诊断文件

    诊断文件 诊断文件是获取有关数据库活动的信息的一种方式,用于解决数据库出现的一些问题,主要包含有关数据库中出现的重要事件的一些信息,这些文件能更好的对数据库进行日常的管 理,主要类型有一下几种: 警告 ...

  5. 数据库软件dbForge Studio for MySQL更新至v.6.1

    本文转自:慧都控件网 说到MariaDB,这个数据库算是MySQL的一个分支.现在非常的流行,很多地方都能看到它的身影.MariaDB作为一种新的数据库管理系统,在短时间内获得如此高的关注度.这也是D ...

  6. 使用printf输出各种格式的字符串( 转载)

    1. 原样输出字符串:    printf("%s", str); 2. 输出指定长度的字符串, 超长时不截断, 不足时右对齐:    printf("%Ns" ...

  7. 00.PHP学习建议

    各位师弟师妹,大家好~PHP不是我们专业的本该有的方向.我不知道大家为什么来学习这门语言,也许是自己了解之后喜欢这门语言(我想这种可能在我们专业是挺少的),也许是听守中哥说这门语言简单好学,为了躲避学 ...

  8. 用Navicat Premium 远程连接oracle数据库

    1.安装Navicat Premium软件(我的是11.0.7版本)(假设安装路径为D:\NavicatLite\Navicat Premium) 2.下载 instantclient-basic-n ...

  9. Python 之 lamda 函数

    1.例子 语法:lambda [args1,argus2....]:expression map(lambda x: x*x, [y for y in range(10)]) lambda:" ...

  10. 如何在Hdevelop加入自己的算子

    halcon中允许用户编写自定义函数,同时也可以将此函数保存在其他工程中调用.   以halcon12讲解   创建自定义函数     本地程序函数:创建后仅能在当前工程使用 hdevelop函数文件 ...