js实现树形结构

js实现树形结构

1、html

2、js加载数据
$(function() {
loadTree();
});
function loadTree() {

$.ajax({
	async:true,
	cache:false,
	type:'get',
	data:'orgId=610',
	url: 'sysDepartment/loadTree',
	success:function(data) {
		if(data && data.length > 0){
		
			nodeDatas = data;
			
			var treeData = getChildren(data,-1);
			var li = '';
			$.each(treeData, function (index, obj) {
			
				//加载第一层数据
				li += "<li id='li_" + obj.id + "' pId="+obj.pId+" state='open' level='1' class='parent_li'>" +
					"<input id='li_box_" + obj.id + "' type='checkbox' onclick='toSelectNode(this);'/>" +
					"<span id='span_" + obj.id + "' onclick='toOpenNode("+obj.id+")' style='cursor: pointer;' >" + obj.name + "</span>";

				//加载第二层数据
				if (obj.children && obj.children.length > 0) {
					var ul = '<ul class="ul_2">';
					$.each(obj.children, function (index2, item) {
						ul += "<li id='li_" + item.id + "' state='open' level='2' class='child_li'>" +
							"<input id='li_box_" + item.id + "' type='checkbox' onclick='toSelectNode(this);'/>" +
							"<span  id='span_" + item.id + "' onclick='toOpenNode("+item.id+")' style='cursor: pointer;'>" + item.name + "</span>";

						//加载第三层数据
						var thirdLi = '';
						if(item.children && item.children.length > 0) {
							var thirdUl ='<ul  class="ul_3">';
							$.each(item.children, function (index3, thirdItem) {
								thirdUl += "<li id='li_" + thirdItem.id + "' level='3' class='child_li'>" +
									"<input id='li_box_" + thirdItem.id + "' type='checkbox' onclick='toSelectNode(this);'/>" +
									"<span  id='span_" + thirdItem.id + "' style='cursor: pointer;'>" + thirdItem.name + "</span></li>";
							});
							thirdUl += '</ul>';
							thirdLi += thirdUl;
						}
						ul += thirdLi;
					});
					ul += '</ul>';
					li += ul;
				}
				li += "</li>";
			});
			$("#treeDemo").append(li);

			//查找所有一级节点下的三级，如果找到，则给三级节点中除了最后一个节点以外的节点加浮动，如果没有三级，则给所有的二级加浮动
			for(var i=0;i< $(".parent_li").length;i++){
				var item = $(".parent_li")[i];
				if ($(item).find(".ul_3").length > 0) {
					$.each($(item).find(".ul_3").find("li"), function (index, obj) {
						if (index != $(item).find(".ul_3").find("li").length - 1) {
							$(obj).css("float", "left");
						}
					});
					continue;
				} else {
					$.each($(item).find(".ul_2").find("li"), function (index, obj) {
						if (index != $(item).find(".ul_2").find("li").length - 1) {
							$(obj).css("float", "left");
						}
					});
					continue;
				}
			}

			//再次选择角色时，回填数据
			var selectNodeIds = parent.$("#departmentId").val();
			if(selectNodeIds && selectNodeIds.length > 0){
				$.each($("input[type='checkbox']"),function(index,obj){
					if((","+selectNodeIds+",").indexOf(obj.id.substring(7)) > -1){
						$("#"+obj.id).attr("checked","checked");

						//根据勾选的当前节点去置灰该节点以下的所有节点
						var childNodes = $("#li_box_"+obj.id.substring(7)).parent().find('ul').find('li');
						if(childNodes && childNodes.length > 0){
							$.each(childNodes,function(index,childObj){
								$(childObj).find('input').attr("disabled","disabled");
							});
						}
					}
				});
			}
		}
	},error:function() {
		alert('请求失败!');
	}
});

}

//用递归的方式生成层级数据
var getChildren = function(data,root){

var children = [];
for(var i = 0; i < data.length; i++){
	if(root == data[i].pId){
		data[i].children = getChildren(data,data[i].id);
		children.push(data[i]);
	}
}
return children;

};

//动态添加角色子节点

function toOpenNode(pId) {

if(nodeDatas && nodeDatas.length > 0){

	//默认所以节点打开，关闭时，隐藏子节点
	var li_state = $("#span_"+pId).parent().attr('state');
	if(li_state == "open"){
	
		$("#span_"+pId).parent().attr('state','close');
		$("#span_"+pId).next('ul').hide();
	}else{
	
		$("#span_"+pId).parent().attr('state','open');
		$("#span_"+pId).next('ul').show();
	}
}

}

//勾选节点时设置选择属性

function toSelectNode(obj) {

if(obj.checked){
	//设置勾选的当前节点的属性
	$("#"+obj.id).attr("checked","checked");

	//如果勾选节点，则父节点下的所有节点置灰
	var childNodes = $("#li_box_" + obj.id.substring(7)).parent().find('ul').find('li');
	if (childNodes && childNodes.length > 0) {
		$.each(childNodes, function (index, childObj) {
			$(childObj).find('input').attr("disabled", "disabled");
		});
	}

	//当勾选第一级节点时，查询该节点下被选中的节点，并取消选择
	var secondOrThirdSelectNodes = $("#li_box_" + obj.id.substring(7)).parent().find('ul').find("input[type='checkbox']:checked");
	if (secondOrThirdSelectNodes && secondOrThirdSelectNodes.length > 0) {
		$.each(secondOrThirdSelectNodes, function (index1, selectNode) {
			$(selectNode).removeAttr("checked");
		});
	}
}else{
	//设置勾选的当前节点的属性
	$("#"+obj.id).removeAttr("checked");

	//如果取消勾选的是一级节点，则父节点下的复选框取消置灰
	var childNodes = $("#li_box_" + obj.id.substring(7)).parent().find('ul').find('li');
	if (childNodes && childNodes.length > 0) {
		$.each(childNodes, function (index, childObj) {
			$(childObj).find('input').removeAttr("disabled");
		});
	}
}

}