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;
}

 

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