zTree -- jQuery 树插件

2016-08-05
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点
官方网站 http://www.treejs.cn/v3/main.php#_zTreeInfo
ztree实例代码

1	<ul id="treeDemo" class="ztree"></ul>
$(function(){
	//目录树配置
	var setting = {
		view : {
			showLine : false, //是否显示节点之间的连线
			showIcon : true, //是否显示节点的图标
			fontCss : {//字体颜色
				color : "black"
			},
			//鼠标移动到节点上时，显示用户自定义控件
			addHoverDom : addHoverDom, //添加节点
			removeHoverDom : removeHoverDom, //删除节点
			selectedMulti : false	//是否允许同时选中多个节点
			//用于在节点上固定显示用户自定义控件
			//addDiyDom:addDiyDomToInterTree,

		},
		check : {
		    //设置 zTree 的节点上是否显示 checkbox
			enable : false
		},
		data : {
			simpleData : {
			//节点采用简单数据模式
				enable : true
			}
		},
		edit : {
		    //设置节点是否处于编辑状态  显示编辑和删除组件图标
			enable : false,
			idKey : "id",
			pIdKey : "pid",
			rootPId : 0
		},
		callback : {
			onClick : zTreeOnClick, //被点击的节点回掉函数
			onAsyncSuccess:zTreeOnAsyncSuccess
		},
		async : { //异步加载目录
			type : "post",
			enable : true,
			url : 'json/tree.json',
			autoParam:["id"],
			dataFilter : ajaxDataFilter
		}
	};

	//用于捕获异步加载正常结束的事件回调函数
	function zTreeOnAsyncSuccess(){
		var nodew = ztreeObj.getNodesByParam("id","0", null);
		// 展开当前选择的第一个节点（包括其全部子节点）
		ztreeObj.expandNode(nodew[0], true, false, false);
	}
	//ztree数据过滤
	function ajaxDataFilter(treeId, parentNode, responseData) {
		if (responseData) {
			return responseData;
		} else {
			return null;
		}
	};

	//ztree按钮组件
	function addHoverDom(treeId, treeNode) {
		//treeNode节点信息
		var currentNode = treeNode;
		var sObj = $("#" + treeNode.tId + "_span");
		if (treeNode.editNameFlag||$("#addBtn_"+treeNode.tId).length>0)
			return;
		var addStr = "<span class='button add' id='addBtn_"
		  + treeNode.tId
		  + "' title='添加' onfocus='this.blur();'></span>";

		var editStr = "<span class='button edit' id='editBtn_"
		+ treeNode.tId
		+ "' title='修改' onfocus='this.blur();'></span>";

		var removeStr = "<span class='button remove' id='removeBtn_"
		+ treeNode.tId
		+ "' title='删除' onfocus='this.blur();'></span>";
		sObj.after(addStr);

		if (treeNode.id != '0') {
			sObj.after(removeStr);
			sObj.after(editStr);
		}
		var addbtn = $("#addBtn_" + treeNode.tId);
		var editbtn = $("#editBtn_" + treeNode.tId);
		var removebtn = $("#removeBtn_" + treeNode.tId);
		//添加部门按钮监听
		if (addbtn)
			addbtn.bind("click", function() {
				alert('添加')
				console.log(currentNode.id + currentNode.name )
			});
		//编辑部门按钮监听
		if (editbtn)
			editbtn.bind("click", function() {
				alert('修改')
			});
		//删除按钮监听
		if (removebtn)
			removebtn.bind("click", function() {
				alert('删除')
			});
	}
	//鼠标从按钮悬浮移开
	function removeHoverDom(treeId, treeNode) {
		$("#addBtn_" + treeNode.tId).unbind().remove();
		$("#editBtn_" + treeNode.tId).unbind().remove();
		$("#removeBtn_" + treeNode.tId).unbind().remove();
	}
     //节点上固定显示用户自定义控件
     function addDiyDomToInterTree(treeId, treeNode) {
     	if(treeNode.type==='device'){
     		var aObj = $("#" + treeNode.tId + "_a");
     		if ($("#diyBtn_"+ treeId + treeNode.id).length>0) return;
     		var editStr = "<span id='diyBtn_space_"+ treeId + treeNode.id+ "' > </span>"
     			+ "<button type='button' class='diyBtn1' style='border:none;' id='diyBtn_"+ treeId + treeNode.id
     			+ "' onfocus='this.blur();' title='删除设备'><img src='pmc/images/index/del_dev_icon.png' alt='删除'></button>";
     		aObj.append(editStr);
     		var btn = $("#diyBtn_"+ treeId + treeNode.id);
     		if (btn){
     			btn.bind("click", function(){
     				var treeObj = $.fn.zTree.getZTreeObj(treeId);
     				treeObj.removeNode(treeNode,true);
     			});
     		}
     	}
     	if(treeNode.type ==='root'){
     		var aObj = $("#" + treeNode.tId + "_a");
     		var editStr = "<span id='diyBtn_space_"+ treeId +treeNode.id+ "' > </span>"
     			+ "<button type='button' class='diyBtn1' style='border:none;' id='diyBtn_"+ treeId + treeNode.id
     			+ "' onfocus='this.blur();' title='删除全部'><img src='pmc/images/index/del_dev_icon.png' alt='删除'></button>";
     		aObj.append(editStr);
     		var btn = $("#diyBtn_"+ treeId+treeNode.id);
     		if (btn){
     			btn.bind("click", function(){
     				var treeObj = $.fn.zTree.getZTreeObj(treeId);
     				treeObj.removeNode(treeNode,true);
     			});
     		}
     	}
     };


	//调用tree插件
    $(document).ready(function(){
    	$(document).ready(function(){
    	    //也可以ajax直接加入NodeData节点数据，只配置setting省略async
    	    //$.fn.zTree.init($("#treeDemo"), setting，NodeData);
    		ztreeObj = $.fn.zTree.init($("#treeDemo"), setting);
    	});
    });

	//点击目录条，获取信息和表格加载相对应的信息
    function zTreeOnClick(event, treeId, treeNode) {
    	var zTree = treeNode.id;
    	console.log(zTree);
    	// bootTable.refreshData(treeNode.id, 1);
    }
});