zTree -ajax
zTree -ajax
无极之岚 发表于8个月前
zTree -ajax
  • 发表于 8个月前
  • 阅读 11
  • 收藏 0
  • 点赞 0
  • 评论 0

【腾讯云】买域名送云解析+SSL证书+建站!>>>   

摘要: play play 实现 通过ajax改变url的参数

废话不多说 直接贴代码

这里是用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);
            }
        });
标签: zTree
  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 2
博文 25
码字总数 10092
×
无极之岚
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: