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 相关文章推荐
再谈ie和firefox下的document.all属性
Oct 21 Javascript
js 实现日期灵活格式化的小例子
Jul 14 Javascript
常见表单重复提交问题整理及解决方法
Nov 13 Javascript
js常用数组操作方法简明总结
Jun 20 Javascript
jQuery 仿百度输入标签插件附效果图
Jul 04 Javascript
javascript进行四舍五入方法汇总
Dec 16 Javascript
javascript实现youku的视频代码自适应宽度
May 25 Javascript
浅析JS获取url中的参数实例代码
Jun 14 Javascript
完美实现八种js焦点轮播图(下篇)
Apr 20 Javascript
JS实现元素上下左右移动效果
Oct 18 Javascript
js删除数组中的元素delete和splice的区别详解
Feb 03 Javascript
VueCli生产环境打包部署跨域失败的解决
Nov 13 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代码
2006/12/06 PHP
php中通过smtp发邮件的类,测试通过
2007/01/22 PHP
php图像处理类实例
2015/07/28 PHP
PHP微信网页授权的配置文件操作分析
2019/05/29 PHP
php+redis实现消息队列功能示例
2019/09/19 PHP
javascript getElementsByClassName函数
2010/04/01 Javascript
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
2013/06/25 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
2013/11/22 Javascript
JavaScript中的Math 使用介绍
2014/04/21 Javascript
jQuery经过一段时间自动隐藏指定元素的方法
2015/03/17 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
2016/10/14 Javascript
微信扫码支付零云插件版实例详解
2017/04/26 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
2017/09/10 Javascript
详解vue+css3做交互特效的方法
2017/11/20 Javascript
详解使用React进行组件库开发
2018/02/06 Javascript
使用vue2实现购物车和地址选配功能
2018/03/29 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
2018/06/07 Javascript
jQuery操作cookie的示例代码
2019/06/05 jQuery
python 获取本机ip地址的两个方法
2013/02/25 Python
python定时采集摄像头图像上传ftp服务器功能实现
2013/12/23 Python
Apache如何部署django项目
2017/05/21 Python
python 3利用Dlib 19.7实现摄像头人脸检测特征点标定
2018/02/26 Python
python实现websocket的客户端压力测试
2019/06/25 Python
pytorch dataloader 取batch_size时候出现bug的解决方式
2020/02/20 Python
python代数式括号有效性检验示例代码
2020/10/04 Python
HTML5的video标签的浏览器兼容性增强方案分享
2016/05/19 HTML / CSS
有趣的睡衣和礼物:LazyOne
2019/11/27 全球购物
如何写出好的Java代码
2014/04/25 面试题
小型女装店的创业计划书
2014/01/09 职场文书
扬尘污染防治方案
2014/06/15 职场文书
会计学毕业生求职信
2014/06/25 职场文书
八年级英语教学计划
2015/01/23 职场文书
总结Python使用过程中的bug
2021/06/18 Python
Python语法学习之进程的创建与常用方法详解
2022/04/08 Python
Vue2项目中对百度地图的封装使用详解
2022/06/16 Vue.js
Redis主从复制操作和配置详情
2022/09/23 Redis