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. what is a ear

    http://docs.oracle.com/javaee/6/tutorial/doc/bnaby.html An EAR file (see Figure 1-6) contains Java E ...

  2. CodeBlock 使用TextOut出错

    undefined reference to `TextOutA@20'C:\Program Files (x86)\CodeBlocks\MinGW\lib这次需要的库是:libgdi32.a 1. ...

  3. C#实现HttpPost提交文件

    先建立一个WebApplication Web.config <?xml version="1.0" encoding="utf-8"?> < ...

  4. JQuery的开发与使用心得

    关于jQuery的 入门使用jQuery可以很容易或具有挑战性的,这取决于你如何使用JavaScript,HTML,CSS进行开发和编程. 要知道一件重要的事情是,jQuery是只是一个JavaScr ...

  5. MPI之求和

    // MPI1.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include "mpi.h" #include &l ...

  6. Android中的IntentService

    首先说下,其他概念:Android中的本地服务与远程服务是什么? 本地服务:LocalService 应用程序内部------startService远程服务:RemoteService androi ...

  7. Android JIT实时编译器的设置

    在Android  JIT实时编译是在Android 2.2之后才引入的,JIT编译器可以显著的提高机器的性能,经过测试,android 2.2的性能较android 2.1提高了 2-5倍.JIT提 ...

  8. XtraBackup备份笔记

    安装 rpm -Uhv http://www.percona.com/downloads/percona-release/percona-release-0.0-1.x86_64.rpm yum in ...

  9. iOS直播直播，头都大了

    随着直播市场的火热,市场大军都逐步进入直播市场 ,腾讯旗下的NOW直播也不例外 先说说直播设计底层 一 .流媒体 1 - 伪流媒体 1.1 扫盲:边下载边播放 1.2 伪流媒体:视频不是实时播放的,先 ...

  10. LEFT JOIN 多表查询的应用

    表结构如下:只把主要字段列出 表一:付款记录表  Gather 字段:GatherID , AccountID, PayMents 金额, PayWay  付款方式 1 现金 2 刷卡 表2:销售记录 ...