文档章节

zTree -ajax

无极之岚
 无极之岚
发布于 2017/09/01 20:50
字数 490
阅读 34
收藏 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
ztree增加子节点造成父节点id错误

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

光石头
06/04
0
2
Jquery-zTree的基本用法

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

0o清风徐来o0
2013/03/28
0
0
【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

没有更多内容

加载失败,请刷新页面

加载更多

你为什么在Redis里读到了本应过期的数据

一个事故的故事 晚上睡的正香突然被电话吵醒,对面是开发焦急的声音:我们的程序在访问redis的时候读到了本应过期的key导致整个业务逻辑出了问题,需要马上解决。 看到这里你可能会想:这是不...

IT--小哥
今天
2
0
祝大家节日快乐,阖家幸福! centos GnuTLS 漏洞

yum update -y gnutls 修复了GnuTLS 漏洞。更新到最新 gnutls.x86_64 0:2.12.23-22.el6 版本

yizhichao
昨天
5
0
Scrapy 1.5.0之选择器

构造选择器 Scrapy选择器是通过文本(Text)或 TextResponse 对象构造的 Selector 类的实例。 它根据输入类型自动选择最佳的解析规则(XML vs HTML): >>> from scrapy.selector import Sele...

Eappo_Geng
昨天
4
0
Windows下Git多账号配置,同一电脑多个ssh-key的管理

Windows下Git多账号配置,同一电脑多个ssh-key的管理   这一篇文章是对上一篇文章《Git-TortoiseGit完整配置流程》的拓展,所以需要对上一篇文章有所了解,当然直接往下看也可以,其中也有...

morpheusWB
昨天
5
0
中秋快乐!!!

HiBlock
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部