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 相关文章推荐
Jquery实现带动画效果的经典二级导航菜单
Mar 22 Javascript
JavaScript自定义等待wait函数实例分析
Mar 23 Javascript
JS替换字符串中空格方法
Apr 17 Javascript
JS实现动态移动层及拖动浮层关闭的方法
Apr 30 Javascript
javascript结合canvas实现图片旋转效果
May 03 Javascript
Mac中安装nvm的教程分享
Dec 11 Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
Aug 28 Javascript
在vue中安装使用vux的教程详解
Sep 16 Javascript
利用原生的JavaScript实现简单拼图游戏
Nov 18 Javascript
Vue加载json文件的方法简单示例
Jan 28 Javascript
解决layui的radio属性或别的属性没显示出来的问题
Sep 26 Javascript
Vue 数据绑定的原理分析
Nov 16 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 curl基本操作详解
2013/07/23 PHP
实现获取http内容的php函数分享
2014/02/16 PHP
javascript String 对象
2008/04/25 Javascript
jquery 学习之二 属性(html()与html(val))
2010/11/25 Javascript
JavaScript自动设置IFrame高度的小例子
2013/06/08 Javascript
javaScript 动态访问JSon元素示例代码
2013/08/30 Javascript
脚本合并提升javascript性能示例
2014/02/24 Javascript
javascript数组克隆简单实现方法
2015/12/16 Javascript
Javascript操作表单实例讲解(下)
2016/06/20 Javascript
Node.js的Mongodb使用实例
2016/12/30 Javascript
javascript基本数据类型和转换
2017/03/17 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/25 Javascript
深入解析nodejs HTTP服务
2017/07/25 NodeJs
微信小程序 循环及嵌套循环的使用总结
2017/09/26 Javascript
react实现antd线上主题动态切换功能
2019/08/12 Javascript
nodejs nedb 封装库与使用方法示例
2020/02/06 NodeJs
vue中如何自定义右键菜单详解
2020/12/08 Vue.js
js实现简单的倒计时
2021/01/28 Javascript
[38:30]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第一场2
2014/05/24 DOTA
详解Python中的元组与逻辑运算符
2015/10/13 Python
分享Python文本生成二维码实例
2016/01/06 Python
Python模拟用户登录验证
2017/09/11 Python
Python中的单行、多行、中文注释方法
2018/07/19 Python
python实现Excel文件转换为TXT文件
2019/04/28 Python
对Python中 \r, \n, \r\n的彻底理解
2020/03/06 Python
Python爬虫入门有哪些基础知识点
2020/06/02 Python
matplotlib之pyplot模块坐标轴标签设置使用(xlabel()、ylabel())
2021/02/22 Python
Nike意大利官网:Nike.com IT
2020/01/19 全球购物
泰国在线书店:SE-ED
2020/06/21 全球购物
澳大利亚网上书店:QBD
2021/01/09 全球购物
化学实验员岗位职责
2013/12/28 职场文书
工作失职检讨书范文
2014/01/16 职场文书
彩色的翅膀教学反思
2014/04/25 职场文书
求职教师自荐书
2014/06/19 职场文书
作风建设年活动总结
2014/08/27 职场文书
个人更名证明
2015/06/23 职场文书