Ztree行政地区树状展示

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

时间: 2024-10-12 09:47:47

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

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

先从后台讲起 1.表的设计 parent_id就是另外一条记录的id,无限极表设计可以参考  http://m.blog.csdn.net/Rookie_Or_Veteran/article/details/75711386 2.mysql查询很容易,关键是要把id,text,parentId查出来 <?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE mapper PUBLIC "-//myb

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

树状结构Java模型.层级关系Java模型.上下级关系Java模型与html页面展示 一.业务原型:公司的组织结构.传销关系网 二.数据库模型 很简单,创建 id 与 pid 关系即可.(pid:parent_id) 三.Java模型 (我们把这张网撒在html的一张表里.其实用ul来展示会简单N多,自己思考为什么LZ会选择放在表里) private class Table {        private Long id; // 当前对象的id         private int x; /

部门下拉框的树状结构展示小功能的实现

在OA项目中部门管理模块中,添部门需要选择上级部门,此时如果直接将所有的部门从数据库中查询出来,让用户选择是可以的,但是显示出来的效果,不是很友好,这样会导致用户体验不好,因此在这里,我们可以一个小技巧来实现一个好的显示效果,那就是简单的树状结构,如图: 改进前: 改进后: 这是页面的显示效果,因此很有可能大家会从jsp页面下手,但是仔细想想这样会较为麻烦,比较标签的操作不是web后台程序员擅长,同时在jsp中实现该功能并不容易,因此可以考虑在给jsp发送数据之前就将其排序完成,此时就涉及到遍历

Android中的树状(tree)列表

树状列表前端挺常用的,还有人专门写过Ztree,Android中有的时候也需要使用到树状列表,上篇文章写了一下ExpandableListView,ExpandableListView最多支持两级结构,Android中没有三层结构的组件,这个时候需要自己去扩展,可以扩展ExpandableListView,也可以选择扩展ListView.个人觉得扩展ListView更简单一点,多级列表你可以一次性加载出来,也可以分级加载出来,一般分级比较好,点了某一级可以控制点击事件然后去加载子级,这样实现起来

[luogu P3801] 红色的幻想乡 [线段树][树状数组]

题目背景 蕾米莉亚的红雾异变失败后,很不甘心. 题目描述 经过上次失败后,蕾米莉亚决定再次发动红雾异变,但为了防止被灵梦退治,她决定将红雾以奇怪的阵势释放. 我们将幻想乡看做是一个n*m的方格地区,一开始没有任何一个地区被红雾遮盖.蕾米莉亚每次站在某一个地区上,向东南西北四个方向各发出一条无限长的红雾,可以影响到整行/整列,但不会影响到她所站的那个地区.如果两阵红雾碰撞,则会因为密度过大而沉降消失.灵梦察觉到了这次异变,决定去解决它.但在解决之前,灵梦想要了解一片范围红雾的密度.可以简述为两种操

树状数组(Binary Indexed Tree,BIT)

树状数组(Binary Indexed Tree) 前面几篇文章我们分享的都是关于区间求和问题的几种解决方案,同时也介绍了线段树这样的数据结构,我们从中可以体会到合理解决方案带来的便利,对于大部分区间问题,线段树都有其绝对的优势,今天这篇文章,我们就来欣赏由线段树变形的另外一个数据结构--树状数组,树状数组通常也用于解决区间求和.单点更新的问题,而且效率比线段树高一些(树状数组区间求和和单点更新的时间复杂度均为o(log n)),相对而言,线段树的应用范围可能更广泛一些.但不得不承认,树状数组确

vue 用组件的方式渲染树状数据结构新思路

应用场景是这样的,根据客户选择城市(树状结构,大概如下所示):展示到页面,也就是说会与好多层,甚至不确定的情况,一开始选择的方式逐层判断,一层层的遍历,然后后来放弃了,想到了写菜单组件的时候使用过的组件 --- 递归组件对没错,这里只需要把数据展开显示就好了,然后就愉快的啪啪啪了,而且不用担心嵌套层次太深,代码结构也相对之前的逐层遍历要简洁: [ { "id": 1, "text": "A", "children": [ {

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

最近由于工作需要,所以就在github上搜了下关于chart的三方框架 官方地址https://github.com/PhilJay/MPAndroidChart 由于工作需要我这里整理了一份Eclipse版本的类库.(有需要要的留下邮箱) 这就是Code中的效果(树状图) 1 public class BarChartActivity extends Activity implements OnChartValueSelectedListener{ 2 3 private BarChart m

GTK+中的树状列表构件(GtkTreeView)

GTK+中的树状列表构件(GtkTreeView) 在本章的GTK+程序设计教程中,我们将向大家重点介绍非常常用也有点复杂的构件--GtkTreeView . GtkTreeView?构件是一个高级的构件,利用他你就可以制作出漂亮的普通列表或者是树状的列表.这个构件里可以包含一或者多行.他的构架呢?正是采用了大名鼎鼎的MVC (Model View Controller) 设计框架.也就是说数据和显示方式是进行了一种分离的操作. 之前我们有说过复杂这个问题,于是在GtktreeView构件中确实