zTree -ajax

最新推荐文章于 2023-04-25 20:06:42 发布

weixin_33969116

最新推荐文章于 2023-04-25 20:06:42 发布

阅读量217

点赞数

文章标签： json 前端 python ViewUI

原文链接：https://my.oschina.net/xlpapapa/blog/1527762

版权

2019独角兽企业重金招聘Python工程师标准>>>

废话不多说直接贴代码

这里是用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);
            }
        });

转载于:https://my.oschina.net/xlpapapa/blog/1527762