文档章节

zTree -ajax

无极之岚
 无极之岚
发布于 2017/09/01 20:50
字数 490
阅读 25
收藏 0
点赞 0
评论 0

废话不多说 直接贴代码

这里是用ajax 来完成的

前端的js代码:

function change(type){
//这个方法 可以给点击事件啥的  然后  传入参数  根据参数的不同 重新加载这个树
     var treeObj = $.fn.zTree.getZTreeObj("tree");
		 treeObj.setting.async.otherParam = {"type":type};
		 $("#tree").html();
	   	 treeObj.reAsyncChildNodes(null,"refresh");
    
}
//这个方法 是移除节点绑定触发的方法 
function beforeRemove(treeId, treeNode){
			/*var zTree = $.fn.zTree.getZTreeObj("tree");
			var node = zTree.selectNode(treeNode);*/
			if(confirm("是否删除此银行?")){
				location.href='${ctx}/del_bank.action?id='+treeNode.IDI+'&type='+$("#type").val();			
			}
			return false;
		}
$(function() {
				//ztree
		
		var setting = {
			edit: {
				enable: true,
				removeTitle:"删除",
				showRemoveBtn:true,
				showRenameBtn:false
			},
			async: {
				enable: true,
				dataType:"json",
				url:"${ctx}/r/dbss/get_bank_tree_by_type.action",
			},
			callback:{
				beforeRemove:beforeRemove			
			},
			data:{
				key:{
					name:"NAME"//显示名字的json的 key
				},
				simpleData:{
					enable:true,//表示使用简单数据模式
					idKey:"ID",//自己定义  ajax传来的数据作为id是什么
					pIdKey:"PID",//定义传来的父节点的 名称
				}
			}
			};
		//ztree 初始化
		$.fn.zTree.init($("#tree"), setting);

}

然后 很明显的 前端页面很简单

<html>
	<head>
    <link rel="stylesheet" href="${ctx}/static/vendor/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
//还需要加入 jquery
		<script type="text/javascript" src="${ctx}/static/vendor/zTree_v3/js/jquery.ztree.core.js"></script>
		<script type="text/javascript" src="${ctx}/static/vendor/zTree_v3/js/jquery.ztree.exedit.js"></script>
    </head>
<body>
<div id="bank_div">
  <div id="bank_ser"></div>
  <div id="tree" class="ztree"></div>
</div>
</body>
</html>

然后效果就是这样 输入图片说明

总结 ztree 还是蛮好用 后台不需要给出顺序 就只要把 自身id和父节点 给赋值好 就可以生成树 删除那个方法也是可以做成ajax的 但是博主比较懒。。。

贴出ajax的 根据点击后传来的参数不同 还可以用颜色标识出 不同的状态

	 	$.ajax({
            type: 'post',
            url: '${ctx}/r/dbss/get_bank_tree_by_type.action',
            dataType: "json", 
            data:{"type":type},
            success: function (data) {
            	var data1=[];
            	for(var i=0;i<data.length;i++){
            		if(data[i].STATE == '1'){
            		data1.push({ idi:data[i].IDI,id:data[i].ID, pId:data[i].PID, name:data[i].NAME, open:false,font:{'background-color':'gray', 'color':'white'}})
            		}else{
            		data1.push({ idi:data[i].IDI,id:data[i].ID, pId:data[i].PID, name:data[i].NAME, open:false})
            		}
            	}
                $.fn.zTree.init($("#tree"), setting, data1);

            },
            error: function (msg) {

                alert(" 数据加载失败!" + msg);
            }
        });

© 著作权归作者所有

共有 人打赏支持
无极之岚
粉丝 2
博文 34
码字总数 13952
作品 0
南岸
zTree v3.5 Css 详解

马上要开始研究新版本的 zTree 结构了,所以要先把现在的情况再多分析一下,做了 v3.x 版本后也一直没有制作 css 的文档,特在此进行整理一下,一边讲结构,一边说说小技巧,希望能给大家一些...

zTree
2012/12/21
0
30
Jquery-zTree的基本用法

【简介】 zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件 兼容 IE、FireFox、Chrome 等浏览器 在一个页面内可同时生成多个 Tree 实例 支持 JSON 数据 支持一次性...

0o清风徐来o0
2013/03/28
0
0
ztree增加子节点造成父节点id错误

ztree:v3.5.35 使用ztree的addNodes 为节点B Ajax动态添加子节点C,添加成功后,再单击节点B,函数获取的节点id为刚才新增节点C的id,不是B的id了. 这个问题哪位知道该怎么解决?...

光石头
06/04
0
2
【zTree】zTree开发使用说明【20140610】

使用条件: 使用zTree树形结构,需要在当前页面中载入zTree的js文件和样式文件 zTree核心js文件:jquery.ztree-2.6.js zTree样式文件: 因为zTree是基于jquery,所以还需要对应的jQuery库文件 ...

shihuafu
2014/06/10
0
0
Jquery结合Ztree生成树

Ztree的api http://www.ztree.me/v3/api.php Ztree的网上demo http://www.ztree.me/v3/demo.php#102 Ztree的本地demo http://yunpan.cn/cLUREC8yghHRs 访问密码 9440 1、添加样式、js <link ......

CurtainRight
2015/11/11
0
0
iMatrix平台中标签数(在tree:ztree)用法(2)

1.1.1 标签树ztree:ztree 1.1.1.1 用法 <ztree:ztree treeType="MANDEPARTMENTTREE" treeId="treeDemo" userWithoutDeptVisible="true" showBranch="true" chkStyle="checkbox" chkboxType="......

iMatrix
2014/08/28
0
0
ztree异步加载菜单与struts2集成

刚刚把自己项目的功能型菜单从dtree迁移到了ztree,项目是ssh2+mysql,说说ztree的异步加载请求action吧,比较简单,就没有写注释 所需jar包 在struts lib下均可找到(请注意不要乱下,很容易...

peanutmain
2012/06/09
0
1
简述如何制作 zTree v3.x 系列的扩展 js 库

zTree v3.x 版本修改了结构,将原先混在一起的代码进行了拆分,调整了内部结构。目前的结构可以比较方便灵活的用插件形式覆盖核心代码或开发自己的新功能,而又不用去特意修改核心代码,也便...

zTree
2012/06/29
0
18
如何去掉ztree的ctrl多选功能

@zTree 你好,想跟你请教个问题: 如何去掉ztree的ctrl多选功能,设置selectMulti: false 也不行

tjane
04/20
0
0
Ztree异步加载自动展开节点

在Ztree的官网Demo中,有自动展开的例子,是通过设置节点属性open:true来实现自动展开的,但是在异步加载中,这个属性设置为true也不会自动展开,因为open:true是指在有子节点的情况下展开,...

Junn
2013/02/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

流利阅读笔记29-20180718待学习

高等教育未来成谜,前景到底在哪里? Ray 2018-07-18 1.今日导读 在这个信息爆炸的年代,获取知识是一件越来越容易的事情。人们曾经认为,如此的时代进步会给高等教育带来众多便利。但事实的...

aibinxiao
20分钟前
7
0
第15章FTP服务搭建与配置

15.1FTP介绍 FTP多用于Windows传文件到linux rz sz在文件超过4G,就无法使用了——>安装包yum install -y install lrzsz rz把 window 上的文件传输到 linux 上 sz 把 linux 上的文件传输到 ...

Linux学习笔记
27分钟前
0
0
OSChina 周三乱弹 —— 你被我从 osc 老婆们名单中踢出了

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @小鱼丁:分享五月天的单曲《后来的我们 (电影《后来的我们》片名曲)》: 《后来的我们 (电影《后来的我们》片名曲)》- 五月天 手机党少年们想...

小小编辑
32分钟前
7
1
Spring Boot Admin 2.0开箱体验

概述 在我之前的 《Spring Boot应用监控实战》 一文中,讲述了如何利用 Spring Boot Admin 1.5.X 版本来可视化地监控 Spring Boot 应用。说时迟,那时快,现在 Spring Boot Admin 都更新到 ...

CodeSheep
51分钟前
0
0
Python + Selenium + Chrome 使用代理 auth 的用户名密码授权

米扑代理,全球领导的代理品牌,专注代理行业近十年,提供开放、私密、独享代理,并可免费试用 米扑代理官网:https://proxy.mimvp.com 本文示例,是结合米扑代理的私密、独享、开放代理,专...

sunboy2050
今天
0
0
实现异步有哪些方法

有哪些方法可以实现异步呢? 方式一:java 线程池 示例: @Test public final void test_ThreadPool() throws InterruptedException { ScheduledThreadPoolExecutor scheduledThre......

黄威
今天
1
0
linux服务器修改mtu值优化cpu

一、jumbo frames 相关 1、什么是jumbo frames Jumbo frames 是指比标准Ethernet Frames长的frame,即比1518/1522 bit大的frames,Jumbo frame的大小是每个设备厂商规定的,不属于IEEE标准;...

六库科技
今天
0
0
牛客网刷题

1. 二维数组中的查找(难度:易) 题目描述 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序。请完成一个函数,输入...

大不了敲一辈子代码
今天
0
0
linux系统的任务计划、服务管理

linux任务计划cron 在linux下,有时候要在我们不在的时候执行一项命令,或启动一个脚本,可以使用任务计划cron功能。 任务计划要用crontab命令完成 选项: -u 指定某个用户,不加-u表示当前用...

黄昏残影
昨天
0
0
设计模式:单例模式

单例模式的定义是确保某个类在任何情况下都只有一个实例,并且需要提供一个全局的访问点供调用者访问该实例的一种模式。 实现以上模式基于以下必须遵守的两点: 1.构造方法私有化 2.提供一个...

人觉非常君
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部