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. easyconf——基于AugularJS的配置管理系统开发框架

    目录 1 easyconf的诞生2 easyconf的设计理念 2.1 总体设计 2.2 细节设计 2.2.1 CRUD操作 2.2.2 即时校验 2.2.3 下拉框设计3 easyconf使用指南 ...

  2. Struts2基础

    访问ServletApi (1)用ActionConten访问Api, ActionContent.getContext().getSession().put("user",&qu ...

  3. Mac环境下svn的使用

    在Windows环境中,我们一般使用TortoiseSVN来搭建svn环境.在Mac环境下,由于Mac自带了svn的服务器端和客户端功能,所以我们可以在不装任何第三方软件的前提下使用svn功能,不过还 ...

  4. CoinPunk项目介绍

           CoinPunk是一个bitcoin比特币钱夹服务web应用程序,你可以自己构建钱夹服务.开源,免费. 轻量级,高效 响应式设计 轻易创建新账户 详细的交易记录 构建于Node.js与H ...

  5. 解决IE6下png图片透明度不显示的问题

    世界上最遥远的距离,不外乎我在搞前端,你却在用旧IE,现在随着XP要退休了,IE6的市场占有率应该也会逐步下滑.不过基于天朝人民的惰性以及企鹅微软的“扎篱笆”活动,做网站的朋友依旧不能忽视IE6的存在 ...

  6. NoSQL：从关系型数据库到非关系型数据库

    关系型数据库 所谓关系型数据库,,就是指采用了关系模型来组织数据的数据库. 什么是关系模型,简单说,关系模型就是二维表格模型,而一个关系型数据库就是由二维表及其之间的联系所组成的一个数据组织. 关系模 ...

  7. Github注册过程以及对管理软件的了解

    二.目前流行的源程序管理软件和项目管理软件主要有以下一些: 1.Visual Source Safe 优点:如果开发工具是VS.NET,用VSS较合适,方便,安装配置和使用都简单,版本控制简单,打la ...

  8. java提高篇(十八)-----数组之一：认识JAVA数组

          噢,它明白了,河水既没有牛伯伯说的那么浅,也没有小松鼠说的那么深,只有自己亲自试过才知道!道听途说永远只能看到表明现象,只有亲自试过了,才知道它的深浅!!!!! 一.什么是数组      ...

  9. FusionCharts简单教程(二)-----使用js加载图像和setDataXML()加载数据

          前面一篇对FusionCharts进行了一个简单的介绍,而且建立了我们第一个图形,但是那个是在HTML中使用<OBJECT>和<EMBED>标记来加载图形的,但是这 ...

  10. 继续SecureString

    上回写了关于SecureString的特征和为什么我们要使用它,这篇继续研究研究这个SecureString. **主要内容:** - SecureString与String之间的转换 - Secur ...