ztree相关方法

勾选父节点,选中该节点下的所有子节点(不包括父节点)

var setting = {
	view: {
		selectedMulti: false,
		showIcon:false
	},
	data: {
		simpleData: {
			enable: true
		}
	},
	check: {
		enable: true
	},
	callback: {
		onCheck: treenodeClick  //勾选节点
	}
}; 
//点击树节点,获取节点的所有子节点id
function treenodeClick(event, treeId, treeNode) {
	//此处treeNode 为当前节点
	var arr = [];  //定义arr数组接收
	if(treeNode.isParent){   //如果当前为父级
		arr = getAllChildrenNodes(treeNode,arr);
	}else{
		var obj = {
			"name":treeNode.name,
			"id":treeNode.id
		}
		arr.push(obj);
	}
	for(var i=0; i<arr.length; i++){
        //如果是勾选,则遍历之前定义的数组将name拼接到元素里
		if(treeNode.checked == true){
			$("#tonly_beidou_check").append("<span chec='"+arr[i].id+"'>"+arr[i].name+"</span>");
        //如果是取消勾选,则从元素中移除 		
        }else{
			$("#tonly_beidou_check span[chec='"+arr[i].id+"']").remove();
		}
		
	}
}	
//使用递归,得到子节点的数据
function getAllChildrenNodes(treeNode,arr){
	if (treeNode.isParent) {
		var childrenNodes = treeNode.children;
		if (childrenNodes) {
			for (var i=0; i<childrenNodes.length; i++) {
				if(childrenNodes[i].isParent){
					getAllChildrenNodes(childrenNodes[i], arr);
				}else{
					var obj = {
						"name":childrenNodes[i].name,
						"id":childrenNodes[i].id
					}
					arr.push(obj);
				}
			}
		}
	}
	return arr;
}

处理数据,展示树形结构

//处理数据格式
var data = res.data;
data.forEach(function(item,index,arr){
    var obj = {
	    "id":item.code,
	    "pId":item.parentCode ? item.parentCode : 0,
	    "name":item.title,
	    "code":item.code,
	    "icon":"../js/plugin/ztree/zTreeStyle/img/diy/6.png"
    }
    if(item.isNode == 2){
        obj.icon = "../js/plugin/ztree/zTreeStyle/img/diy/1_close.png";
    }
    if(!item.parentCode){ 
	    obj.open = true;
    }
    zNodes.push(obj);
});
$.fn.zTree.init($("#demand_tree"), setting, zNodes);
var treeObj = $.fn.zTree.getZTreeObj("demand_tree");

//点击某个节点 然后将该节点的名称赋值值文本框
function onClick(e, treeId, treeNode) {
	//如果是父级
	if(treeNode.isParent){
	    return;
	}
	$(".type_title .type_title_name").html(treeNode.name);
	$(".type_title .type_title_name").attr("code",treeNode.code);
	loadTypeInstructions(treeNode.code);
	loadTypeQuickDescribe(treeNode.code);
    return false;
}
	
//还原zTree的初始数据
function InitialZtree() {
     $.fn.zTree.init($("#demand_tree"), setting, zNodes);
}
	
//根据文本框的关键词输入情况自动匹配树内节点 进行模糊查找
function AutoMatch(txtObj) {
	 if (txtObj.value.length > 0) {
	      InitialZtree();
	      var zTree = $.fn.zTree.getZTreeObj("demand_tree");
	      var nodeList = zTree.getNodesByParamFuzzy("name", txtObj.value);
	      //将找到的nodelist节点更新至Ztree内
	      $.fn.zTree.init($("#demand_tree"), setting, nodeList);
      } else {
	      InitialZtree();                
	  }              
}

//搜索框绑定事件
$('#type_search_demand').bind('keyup',function(){
	AutoMatch(this);
});

将平级对象转换为子父级关系

/*
 * 树结构父子关系
 */
//data:带转换成树形结构的对象数组
//attributes:对象属性
function toTreeData (data, attributes) {
    let resData = data;
    let tree = [];
	//找寻根节点
	for (let i = 0; i < resData.length; i++) {
		// 如果parentCode等于零
	    if (resData[i][attributes.parentCode] == null) {
	    	resData[i].title = resData[i].name;
	        tree.push(treeObj(resData[i])); // 将属于第一级的对象push进去
	        resData.splice(i, 1);  // 将自身从数组中移除
	        i--;
	    }
	}
 
    run(tree);
 
	//找寻子树
	function run(chiArr) {
	    if (resData.length != 0) {
	        for (let i = 0; i < chiArr.length; i++) {
	            for (let j = 0; j < resData.length; j++) {
	                if (chiArr[i].id == resData[j][attributes.parentCode]){
	                	resData[j].title = resData[j].name;
	                    let obj = treeObj(resData[j]);
	                    chiArr[i].children.push(obj);
	                    resData.splice(j, 1);
	                    j--;
	                }
	            }
	            run(chiArr[i].children);
	        }
	    }
	}
    return tree;
}
function treeObj(originObj){
	//对象深拷贝
	let obj ={};
	for (key in originObj){
		var val = originObj[key];
  		obj[key] = typeof val === 'object' ? arguments.callee(val):val;
    }
   //对象新增children键值,用于存放子树
   obj['children'] = [];
   return obj;
}

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章