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图像处理—虚拟边缘介绍及使用方法
Dec 27 Javascript
使用js获取地址栏中传递的值
Jul 02 Javascript
javascript 控制input只允许输入的各种指定内容
Jun 19 Javascript
jQuery控制网页打印指定区域的方法
Apr 07 Javascript
手机开发必备技巧:javascript及CSS功能代码分享
May 25 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
Aug 25 Javascript
JavaScript设计模式初探
Jan 07 Javascript
基于VUE实现的九宫格抽奖功能
Sep 30 Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
May 01 Javascript
layui之数据表格--与后台交互获取数据的方法
Sep 29 Javascript
H5实现手机拍照和选择上传功能
Dec 18 Javascript
微信小程序实现拨打电话功能的示例代码
Jun 28 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/07/15 PHP
php中显示数组与对象的实现代码
2011/04/18 PHP
php下通过curl抓取yahoo boss 搜索结果的实现代码
2011/06/10 PHP
php单例模式实现方法分析
2015/03/14 PHP
PHP简单检测网址是否能够正常打开的方法
2016/09/04 PHP
php微信开发之图片回复功能
2018/06/14 PHP
php分享朋友圈的实现代码
2019/02/18 PHP
基于json的jquery地区联动效果代码
2011/07/06 Javascript
jquery修改属性值实例代码(设置属性值)
2014/01/06 Javascript
javascript学习笔记(二)数组和对象部分
2014/09/30 Javascript
10条建议帮助你创建更好的jQuery插件
2015/05/18 Javascript
javascript实现信息增删改查的方法
2015/07/25 Javascript
JavaScript常用基础知识强化学习
2015/12/09 Javascript
jQuery Ajax 全局调用封装实例代码详解
2016/06/02 Javascript
Vue.js第三天学习笔记(计算属性computed)
2016/12/01 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
2016/12/05 Javascript
如何提高数据访问速度
2016/12/26 Javascript
vue axios同步请求解决方案
2017/09/29 Javascript
Bootstrap 3多级下拉菜单实例
2017/11/23 Javascript
微信小程序onShareTimeline()实现分享朋友圈
2021/01/07 Javascript
[43:03]完美世界DOTA2联赛PWL S2 PXG vs Magma 第二场 11.21
2020/11/24 DOTA
python编程使用selenium模拟登陆淘宝实例代码
2018/01/25 Python
python使用openpyxl库修改excel表格数据方法
2018/05/03 Python
python中实现字符串翻转的方法
2018/07/11 Python
Anaconda2 5.2.0安装使用图文教程
2018/09/19 Python
Python socket服务常用操作代码实例
2020/06/22 Python
纯CSS绘制漂亮的圆形图案效果
2014/05/07 HTML / CSS
Html5新标签解释及用法
2012/02/17 HTML / CSS
阿里旅行:飞猪
2017/01/05 全球购物
计算机专业个人求职自荐信
2013/09/21 职场文书
自我鉴定范文200字
2013/10/02 职场文书
运动会获奖感言
2014/02/11 职场文书
公司离职证明标准范本
2014/10/05 职场文书
2014年网络管理员工作总结
2014/12/01 职场文书
违纪学生保证书
2015/02/27 职场文书
2015年度个人教学工作总结
2015/05/20 职场文书