jQuery Ztree行政地区树状展示(点击加载)


Posted in Javascript onNovember 09, 2016

Ztree行政地区树状展示(点击加载) 效果如下:

jQuery 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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
验证用户是否修改过页面的数据的实现方法
Sep 26 Javascript
jquery each()源代码
Feb 14 Javascript
js中将具有数字属性名的对象转换为数组
Mar 06 Javascript
Node.js安装教程和NPM包管理器使用详解
Aug 16 Javascript
Vuejs第十三篇之组件——杂项
Sep 09 Javascript
基于MVC方式实现三级联动(JavaScript)
Jan 23 Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
Mar 08 Javascript
关于vue.js发布后路径引用的问题解决
Aug 15 Javascript
vue中实现先请求数据再渲染dom分享
Mar 17 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
May 04 Javascript
vue中实现上传文件给后台实例详解
Aug 22 Javascript
详解为什么Vue中不要用index作为key(diff算法)
Apr 04 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
Nov 09 #Javascript
使用 bootstrap modal遇到的问题小结
Nov 09 #Javascript
H5移动端图片压缩上传开发流程
Nov 09 #Javascript
微信小程序 网络API Websocket详解
Nov 09 #Javascript
微信小程序 网络API 上传、下载详解
Nov 09 #Javascript
微信小程序 网络API发起请求详解
Nov 09 #Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
Nov 09 #Javascript
You might like
PHP面向对象——访问修饰符介绍
2012/11/08 PHP
codeigniter框架The URI you submitted has disallowed characters错误解决方法
2014/05/06 PHP
php操作redis缓存方法分享
2015/06/03 PHP
php使用curl获取header检测开启GZip压缩的方法
2018/08/15 PHP
再谈javascript 动态添加样式规则 W3C校检
2009/12/25 Javascript
Jquery Validation插件防止重复提交表单的解决方法
2010/03/05 Javascript
禁止空格提交表单的js代码
2013/11/17 Javascript
Jquery遍历Json数据的方法
2015/04/20 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
2015/10/26 Javascript
jQuery实现图片向左向右切换效果的简单实例
2016/05/18 Javascript
Javascript中的async awai的用法
2017/05/17 Javascript
简单了解vue.js数组的常用操作
2019/06/17 Javascript
用js编写留言板
2020/03/17 Javascript
Python中条件选择和循环语句使用方法介绍
2013/03/13 Python
Python EOL while scanning string literal问题解决方法
2020/09/18 Python
Python中is与==判断的区别
2017/03/28 Python
Python 多线程Threading初学教程
2017/08/22 Python
通过python+selenium3实现浏览器刷简书文章阅读量
2017/12/26 Python
全面分析Python的优点和缺点
2018/02/07 Python
Python实现的爬取百度文库功能示例
2019/02/16 Python
Python如何处理大数据?3个技巧效率提升攻略(推荐)
2019/04/15 Python
python 对字典按照value进行排序的方法
2019/05/09 Python
python使用多线程+socket实现端口扫描
2020/05/28 Python
pycharm如何设置官方中文(如何汉化)
2020/12/29 Python
CHARLES & KEITH加拿大官网:新加坡时尚品牌
2020/03/26 全球购物
美国知名眼镜网站:Target Optical
2020/04/04 全球购物
单位刻章介绍信范文
2014/01/11 职场文书
协议书与合同的区别
2014/04/18 职场文书
会计学专业自荐信
2014/06/25 职场文书
2014小学教师年度考核工作总结
2014/12/03 职场文书
乐山大佛导游词
2015/02/02 职场文书
农民工工资保障承诺书
2015/05/04 职场文书
新郎父母婚礼致辞
2015/07/27 职场文书
幼儿园大班教学反思
2016/03/02 职场文书
字典算法实现及操作 --python(实用)
2021/03/31 Python
Redis Stream类型的使用详解
2021/11/11 Redis