文档章节

zTree -ajax

无极之岚
 无极之岚
发布于 2017/09/01 20:50
字数 490
阅读 80
收藏 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);
            }
        });

© 著作权归作者所有

无极之岚
粉丝 5
博文 77
码字总数 40940
作品 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
2018/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

没有更多内容

加载失败,请刷新页面

加载更多

EasyExcel

<!-- alibaba EasyExcel escel导入导出 --> <dependency> <groupId>com.alibaba</groupId> <artifactId>easyexcel</artifactId> <version>1.0.0-RELEASE</version> </dependency>......

少年已不再年少
10分钟前
0
0
解决:warning: deprecated conversion from string constant to 'char*' [-Wwrite-strings]

代码 static int CheckOneReg(uint8_t busNo, char *title, int32_t addr, uint32_t *val, BOOL isPrintfNL, ErrMsg_t const *pMsg)res |= CheckOneReg(busNo,"fwVer:", HALREG_FW_VER, ......

SamXIAO
10分钟前
0
0
jenkins搭建全流程

安装环境   操作系统:linux   软件:jdk 8   软件:tomcat(apache-tomcat-7.0.90) 软件:jenkins 软件:maven 软件:git 1.1安装步骤 1.1.1安装jdk 由于Jenkins是基于Java开发的,安...

shzwork
17分钟前
0
0
Java的战争

本文来自微信公众号: 金捷幡(ID:jin-jiefan) ,作者:金捷幡,封面:拉里·埃里森(东方IC) 2019年5月,彻底撕破脸的特朗普掀起对华为的战争,谷歌被迫吊销了华为的Android授权。开源软...

Java领航员
今天
8
0
超详细的LM3414MRX/NOPB规格参数介绍就在这里

超详细的LM3414MRX/NOPB规格参数介绍就在这里 描述 LM3414和LM3414MRX/NOPB是具有1-A 60 W(1)共阳极功能的恒流降压LED驱动器。它们适用于驱动单串3-W HBLED,效率高达96%。它们可接受4.5...

不能吃肉的仙女
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部