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 相关文章推荐
JavaScript的目的分析
Jan 05 Javascript
JavaScript asp.net 获取当前超链接中的文本
Apr 14 Javascript
JavaScript中为元素加上name属性的方法
May 09 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
Jan 02 Javascript
loading动画特效小结
Jan 22 Javascript
js仿网易表单及时验证功能
Mar 07 Javascript
基于jQuery实现的单行公告活动轮播效果
Aug 23 jQuery
JS装饰器函数用法总结
Apr 21 Javascript
关于vue-router的那些事儿
May 23 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
Jul 13 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
Sep 03 Javascript
Javascript执行上下文顺序的深入讲解
Nov 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对象Object的概念 介绍
2012/06/14 PHP
PHP-redis中文文档介绍
2013/02/07 PHP
php学习笔记之面向对象
2014/11/08 PHP
PHP连接SQL Server的方法分析【基于thinkPHP5.1框架】
2019/05/06 PHP
laravel多条件查询方法(and,or嵌套查询)
2019/10/09 PHP
php 实现银联商务H5支付的示例代码
2019/10/12 PHP
一页面多XMLHttpRequest对象
2007/01/22 Javascript
javascript 常用关键字列表集合
2007/12/04 Javascript
JQuery在光标位置插入内容的实现代码
2010/06/18 Javascript
比较不错的JS/JQuery显示或隐藏文本的方法
2014/02/13 Javascript
JavaScript ParseFloat()方法
2015/12/18 Javascript
深入解析JavaScript中的立即执行函数
2016/05/21 Javascript
JavaScript中的Array 对象(数组对象)
2016/06/02 Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
2016/12/12 Javascript
Bootstrap入门教程一Hello Bootstrap初识
2017/03/02 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
2019/06/05 Javascript
vue的路由映射问题及解决方案
2019/10/14 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
2020/04/26 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
2020/08/07 jQuery
[05:04]完美世界携手游戏风云打造 卡尔工作室地图界面篇
2013/04/23 DOTA
[02:12]探秘2016国际邀请赛中国区预选赛选手房间
2016/06/25 DOTA
[40:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs TNC
2018/04/01 DOTA
Python中内置数据类型list,tuple,dict,set的区别和用法
2015/12/14 Python
numpy找出array中的最大值,最小值实例
2018/04/03 Python
Python数据类型之Number数字操作实例详解
2019/05/08 Python
wxPython+Matplotlib绘制折线图表
2019/11/19 Python
python global和nonlocal用法解析
2020/02/03 Python
Python限制内存和CPU使用量的方法(Unix系统适用)
2020/08/04 Python
安装并免费使用Pycharm专业版(学生/教师)
2020/09/24 Python
医校毕业生自我鉴定
2014/01/25 职场文书
小学语文课后反思精选
2014/04/25 职场文书
班组建设经验交流材料
2014/05/12 职场文书
面试必备的求职信
2014/05/25 职场文书
2014银行领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
学习型家庭事迹材料
2014/12/20 职场文书
Python之matplotlib绘制折线图
2022/04/13 Python