基于ztree的封装

最新推荐文章于 2020-11-24 11:09:14 发布

chengyong11636

最新推荐文章于 2020-11-24 11:09:14 发布

阅读量437

点赞数 1

分类专栏： demo 文章标签： ztree

本文链接：https://blog.youkuaiyun.com/qq_28865227/article/details/93305781

版权

demo 专栏收录该内容

4 篇文章

订阅专栏

1.使用方法

<script>
    var methods = {onclick:fn2};
    initSelTree("dwtree", "dw", methods, true);
    function fn2(e, treeId, treeNode){
        console.log($("#DW").val());
        console.log( $("#DW_NAME").val());
    }


</script>

/**
 * 初始化化方法  给树的父级的上一个元素加入点击事件
 * treeId   树的id
 * treeType 树的种类  当前种类
 * methods 传入的方法 ，现在支持的方法 onclick filter
 * multiSel 是否单选
 */
function initSelTree(treeId, treeType,methods,multiSel) {
	//后台访问树的URL
	var treeUrl ="/tree/"+treeType+"/getTreeNode";
	var isShowIcon =  true;
	$("#"+treeId).attr("treeType",treeType);
	$.fn.zTree.init($("#"+treeId), getSetting(treeUrl,methods,isShowIcon,multiSel), null);
//给父类元素加上click事件	
	 $("#"+treeId).parent().parent().click(function(event){
//点击输入框不弹出
		 if(event.target.type||event.target.type=="text"){
			 hideMenu(treeId);
			 return ;
		 }
//如果已经显示则隐藏		 
		if(! $("#"+treeId).is(":visible")){
			showSelMenu(treeId);
		}
	  });
}
/**
 * 显示下拉框
 * 
 */
function showSelMenu(treeId) {
	var treePrev= $("#"+treeId).parent().prev();
	if(treePrev.val()==""){
		var ztree=$.fn.zTree.getZTreeObj(treeId);
			ztree.checkAllNodes(false);
	}
	var treeWidth= $("#"+treeId).parent().prev().width();
	$("#"+treeId).parent().slideDown("fast");
	if(treeWidth+14<180){
		$("#"+treeId).parent().css("width","180px");
		$("#"+treeId).parent().css("right",(treeWidth+14-180)/2+"px");
	}else{
		$("#"+treeId).parent().css("width",(treeWidth+14)+"px");
	}
	$("body").bind("mousedown",{treeId:treeId}, onBodyDown);
	
}
/**
 * 
 * @param url url
 * @param methods 定义的方法 
 * @returns setting
 */
function getSetting(url,methods,isShowIcon,multiSel){
	//onclick事件
	var onclick=onclickSel;
	//返回值成功调用事件
	var filter=ajaxDataFilter;
	
	var oncheck = onCheck;
	//是否显示图标
	var showIcon = false;

	var otherParam = {};

	var onAsyncSuccessCy =onAsyncSuccess ;
	if(methods&&methods.hasOwnProperty("onAsyncSuccess")){
		onAsyncSuccessCy = methods.onAsyncSuccess;
	}
	if(methods&&methods.hasOwnProperty("onclick")){
		onclick = methods.onclick;
		oncheck = methods.onclick;
	}
	if(methods&&methods.hasOwnProperty("filter")){
		filter = methods.filter;
	}
	if(methods&&methods.hasOwnProperty("oncheck")){
		oncheck = methods.oncheck;
	}
	if(methods&&methods.hasOwnProperty("otherParam")){
		otherParam = methods.otherParam;
	}
	if(methods&&methods.hasOwnProperty("showIcon")){
		showIcon = methods.showIcon;
	}
	var beforeClickFun  = null;
	var beforeCheckFun  = null;
	if(multiSel){
		beforeClickFun = clearSel;
		beforeCheckFun = clearSel;
	}
		var setting = {
				view: {
					dblClickExpand: false,
					showIcon: showIcon,
					showLine: false,
				},
				data: {
					key:{
					name:"NAME"
				},
					simpleData: {
						enable: true
					},
				showIcon: showIcon
				},
				callback: {
					onCheck: oncheck,
					onClick: onclick,
					onAsyncSuccess: onAsyncSuccessCy,
					beforeCheck:beforeCheckFun,
				    beforeClick:beforeClickFun
				},
				async: {
					enable: true,
					url:url,
					autoParam:["ID=p_ID","ATTCODE=p_ATTCODE","PID=p_PID"],
					otherParam:otherParam,
					type:"get",
					dataFilter: filter
				},
				check:{
					enable:true,
					chkStyle:"checkbox",
					chkboxType:{"Y":"","N":""}//表示子 父 节点不关联
				}
			};
		return setting;
	}

/**
 * 绑定鼠标移除事件
 * @param treeId
 */
function hideMenu(treeId) {
	$("#"+treeId).parent().fadeOut("fast");
	$("body").unbind("mousedown",{foo:treeId}, onBodyDown);
}
/**
 * 按其他的元素时取消
 * @param event
 */
function onBodyDown(event) {
	var treeId = event.data.treeId;
	var treeObj = $.fn.zTree.getZTreeObj(treeId);
//隐藏位置  树的class      点击是树的父类       点击的父类有treeSelDiv这个属性
//	if (!(event.target.id == "menuBtn" || event.target == $("#"+treeId).parent() || $(event.target).parents(".treeSelDiv").length>0)) {
//		hideMenu(treeId);
//	}
	if (!(event.target.id == "menuBtn"|| $(event.target).parents(".treeSelDiv").length>0)) {
		hideMenu(treeId);
	}
	
}
/**
 * 调用成功时去掉没有元素的父节点
 * @param event
 * @param treeId
 * @param treeNode
 * @param msg
 */
function onAsyncSuccess(event, treeId, treeNode, msg) {
	if(msg.length==2){
		ztree=$.fn.zTree.getZTreeObj(treeId);
		treeNode.isParent = false;
		ztree.updateNode(treeNode);
	}else{
	}
}

/**
 * onCheck方法 会将复选框中的非父类的勾选元素  id和name 放入 父类的上一个元素
 * @param e
 * @param treeId
 * @param treeNode
 */		
function onCheck(e, treeId, treeNode) {
	onclickSel(e, treeId, treeNode);
}
function onclickSel(e, treeId, treeNode){
	var tree = $("#"+treeId);
	var treeNode_treeSel = tree.attr("treeNode_treeSel");//获取运维单位ID
	var checked_treeSel  = tree.attr("checked_treeSel")=="true";
	if(checked_treeSel==true){
		treeNode.checked = true;
	}else{
		
	var checked_tree = tree.attr("checked_treeSel");
	if(e.type=="click"){//判断是点的文本还是选择框 click是点的文本
	//if(!treeNode.isParent){ //判断是不是父节点 不是父节点就进去
		ztree=$.fn.zTree.getZTreeObj(treeId);
			if(checked_tree&&treeNode_treeSel==treeNode.ID){
				treeNode.checked = checked_treeSel;
			}
	treeNode.checked = !treeNode.checked;
	ztree.updateNode(treeNode);
	setTreeValue(e, treeId, treeNode);
	//}
	}
	else{
		ztree=$.fn.zTree.getZTreeObj(treeId);
			if(checked_tree&&treeNode_treeSel==treeNode.ID){
				treeNode.checked = !checked_treeSel;
			}
		setTreeValue(e, treeId, treeNode);	
	}
	var fn =tree.attr("clickOrCheck");
	if(fn){
		var str =fn+"("+treeNode+")";
		eval(str);
	}
	}
}

function setTreeValue(e, treeId, treeNode){
	var tree = $("#"+treeId);
	var zTree = $.fn.zTree.getZTreeObj(treeId),
	nodes = zTree.getCheckedNodes(true),
	v = "";
	ids="";
	var attcodes ="";
	for (var i=0, l=nodes.length; i<l; i++) {
		//if(!nodes[i].isParent){
			v += nodes[i].NAME + ",";
			ids += nodes[i].ID + ",";
			var nodesCode =nodes[i].ATTCODE;
			if(attcodes.indexOf(nodesCode)<0){
				attcodes +=nodesCode+ ",";
			}
		//}
	}
	if (v.length > 0 ) v = v.substring(0, v.length-1);
	if (ids.length > 0 ) ids = ids.substring(0, ids.length-1);
	if (attcodes.length > 0 ) attcodes = attcodes.substring(0, attcodes.length-1);
	var treePrev = $("#"+treeId).parent().prev();
	if(treePrev.prev().val()!=ids){
		var fn =treePrev.prev().attr("clickmethod");
		if(fn){
			var str =fn+"('"+ids+"')";
			eval(str);
		}
	}
	 tree.attr("treeNode_treeSel",treeNode.ID);
	treePrev.val(v);
	treePrev.prev().val(ids);
	treePrev.prev().attr("attcode",attcodes);
	treePrev.prev().attr("parentid",treeNode.PARENT_ID);
	treePrev.prev().attr("speciaid",treeNode.ID);
	treePrev.prev().attr("isUser",treeNode.isUser);
}

function ajaxDataFilter(treeId, parentNode, responseData) {
    if (responseData) {
      for(var i =0; i < responseData.length; i++) {
    	  //by ts
    	  var code = (responseData[i].ATTCODE==undefined?responseData[i].ATTRIBUTECODE:responseData[i].ATTCODE);
    	  responseData[i].iconSkin = getIconSkin(code);
    	  if(responseData[i].children){
    		  ajaxDataFilter(null,null,responseData[i].children);
    	  }
      }
    }
    return responseData;
};
/**
 * 根据类型换成iconskin
 * type attcode
 * .ztree li span.button.county_ico_docu{margin-right:2px; background: url(./img/county.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
   .ztree li span.button.county_ico_open,.ztree li span.button.county_ico_close{margin-right:2px; background: url(./img/county.png) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle}
 * skin css中定义的属性
 * @param attcode
 * @returns
 */
function getIconSkin(attcode) {
	   if(attcode){
	    var type =["COUNTY"];
	    var skin =["county"];
	    for (var i = 0; i < type.length; i++) {
			if(attcode == type[i]){
				return skin[i];
			}
		}
	   }
};
/**
 * 单选
 * @param treeId
 * @param treeNode
 * @param clickFlag
 * @returns
 */
function clearSel(treeId, treeNode, clickFlag) {
	var tree = $("#"+treeId);
	var ztree=$.fn.zTree.getZTreeObj(treeId);
	if(treeNode){
	/*if(treeNode.isParent){
		
	}else{*/
		var checked_treeSel = treeNode.checked;
		tree.attr("checked_treeSel",checked_treeSel);
	//}
	}
	if(checked_treeSel==true){
		treeNode.checked = true;
	}else{
		ztree.checkAllNodes(false);	
	}
	
};