文档章节

zTree -ajax

无极之岚
 无极之岚
发布于 2017/09/01 20:50
字数 490
阅读 46
收藏 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
博文 42
码字总数 18856
作品 0
厦门
程序员
私信 提问
DWZ 和 zTree 如何可以实现ajax

夜里挑战自我。 今天我想把DWZ和zTree整合在一起。昨天我已经实现了用单纯的zTree实现了加载ajax的功能。所以今夜打算把zTree糅合在DWZ中。但是发现居然没法更新,尽管按照大牛的方法debug,...

McArthur
2013/01/06
1K
5
获取目录数据用 POST 不用 GET?

话说貌似 zTree 的开发团队亦在本站,所以弱弱问个问题。。。 事情是这样的,我用 zTree 做了一个目录树,很好用(把 PHP 递归生成树结构的过程转移到前端了,省下了不少服务器资源),先感谢...

ValueError
2011/02/27
1K
15
201. ztree 的简单使用

效果 2. ztree的Demo (不交互后台) 2.1 引入ztree环境 2.2 使用 使用ajax 拿到json格式数据 然后生成树形菜单 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEnco......

Lucky_Me
12/06
0
0
跳转时 如何记录ztree的状态?

问题是这样的:我的页面没使用框架,div+css;左侧是ztree,右侧是点击ztree,ajax动态刷新的数据列表,在列表中有修改,需要跳转,跳转后的页面如何显示原来的左侧的ztree的状态。 谢谢...

dkjava
2012/05/22
788
3
如何生成带target和rel属性的超链接?

@zTree 你好,想跟你请教个问题:ztree和dwz整合,dwz的局部刷新需要使用 这样的一个链接,ztree如何实现呢?

老同志
2013/03/13
624
2

没有更多内容

加载失败,请刷新页面

加载更多

js垃圾回收机制和引起内存泄漏的操作

JS的垃圾回收机制了解吗? Js具有自动垃圾回收机制。垃圾收集器会按照固定的时间间隔周期性的执行。 JS中最常见的垃圾回收方式是标记清除。 工作原理:是当变量进入环境时,将这个变量标记为“...

Jack088
8分钟前
0
0
大数据教程(10.1)倒排索引建立

前面博主介绍了sql中join功能的大数据实现,本节将继续为小伙伴们分享倒排索引的建立。 一、需求 在很多项目中,我们需要对我们的文档建立索引(如:论坛帖子);我们需要记录某个词在各个文...

em_aaron
24分钟前
1
0
"errcode": 41001, "errmsg": "access_token missing hint: [w.ILza05728877!]"

Postman获取微信小程序码的时候报错, errcode: 41001, errmsg: access_token missing hint 查看小程序开发api指南,原来access_token是直接当作parameter的(写在url之后),scene参数一定要...

两广总督bogang
24分钟前
6
0
MYSQL索引

索引的作用 索引类似书籍目录,查找数据,先查找目录,定位页码 性能影响 索引能大大减少查询数据时需要扫描的数据量,提高查询速度, 避免排序和使用临时表 将随机I/O变顺序I/O 降低写速度,占用磁...

关元
43分钟前
7
0
撬动世界的支点——《引爆点》读书笔记2900字优秀范文

撬动世界的支点——《引爆点》读书笔记2900字优秀范文: 作者:挽弓如月。因为加入火种协会的读书活动,最近我连续阅读了两本论述流行的大作,格拉德威尔的《引爆点》和乔纳伯杰的《疯传》。...

原创小博客
55分钟前
17
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部