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 相关文章推荐
JQuery1.6 使用方法三
Nov 23 Javascript
Jquery插件之打造自定义的select标签
Nov 30 Javascript
ajax上传时参数提交不更新等相关问题
Dec 11 Javascript
文件编码导致jquery失效的解决方法
Jun 26 Javascript
关于javascript event flow 的一个bug详解
Sep 17 Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
Nov 30 Javascript
动态加载js、css的简单实现代码
May 26 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
Aug 31 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
vue下拉菜单组件(含搜索)的实现代码
Nov 25 Javascript
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
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数据加密详解
2013/06/18 PHP
PHP将XML转数组过程详解
2013/11/13 PHP
关于PHP的curl开启问题探讨
2014/04/08 PHP
支付宝支付开发――当面付条码支付和扫码支付实例
2016/11/04 PHP
URL编码转换,escape() encodeURI() encodeURIComponent()
2006/12/27 Javascript
网页自动跳转代码收集
2009/09/27 Javascript
文字不间断滚动(上下左右)实例代码
2013/04/21 Javascript
jquery的相对父元素和相对文档定位示例代码
2013/08/02 Javascript
JS计算网页停留时间代码
2014/04/28 Javascript
JavaScript+html5 canvas绘制的小人效果
2016/01/27 Javascript
jquery实现列表上下移动功能
2016/02/25 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
2016/05/19 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
2016/06/17 Javascript
jQuery操作cookie
2016/08/08 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
2017/02/14 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
2017/07/03 Javascript
Javascript的console['']常用输入方法汇总
2018/04/26 Javascript
vue的全局变量和全局拦截请求器的示例代码
2018/09/13 Javascript
Vue中的v-for指令不起效果的解决方法
2018/09/27 Javascript
vue+node 实现视频在线播放的实例代码
2020/10/19 Javascript
[43:58]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第二局
2016/02/27 DOTA
Python高效编程技巧
2013/01/07 Python
python实现批量转换文件编码(批转换编码示例)
2014/01/23 Python
Python 3.x 连接数据库示例(pymysql 方式)
2017/01/19 Python
Python3 实现随机生成一组不重复数并按行写入文件
2018/04/09 Python
Python基于百度AI的文字识别的示例
2018/04/21 Python
Python 创建空的list,以及append用法讲解
2018/05/04 Python
Python中如何将一个类方法变为多个方法
2019/12/30 Python
python读取当前目录下的CSV文件数据
2020/03/11 Python
一道输出判断型Java面试题
2014/10/01 面试题
高中军训感言600字
2014/03/11 职场文书
洗发水广告词
2014/03/13 职场文书
原告离婚代理词
2015/05/23 职场文书
mysql中整数数据类型tinyint详解
2021/12/06 MySQL
浅谈如何保证Mysql主从一致
2022/03/13 MySQL
详解OpenCV获取高动态范围(HDR)成像
2022/04/29 Python