zTree下拉树(前后端)

html部分:

<input type="text" class="form-control" id="unit" placeholder="点击选择单元" οnclick="showMenu()" />
<div id="menuContent" class="menuContent" style="display:none;position: absolute;width:95%;border:1px solid rgb(170,170,170);z-index:100;background-color: white;">
	<ul id="unitTree" class="ztree" style="margin-top:0; width:160px; height:auto;"></ul>
</div>

js部分:

var unitTreeSetting = {
	 check: {
		 enable: true,
		 chkStyle: "radio",
		 radioType: "all"
	 },
	 view: {
	 	dblClickExpand: false
	 },
	 data: {
		 simpleData: {
		  enable: true
		 }
	 },
	 callback: {
		 onClick: onClickNode,
		 onCheck: onCheck
	 }
};

var zNodes = function(){
	var result = [];
	$.ajax({
		url : url, // 请求的URL
		dataType : 'json',
		async: false,
		type : "get",
		success : function(data) {
			result = data.result.rows;
		}
	});
	return result;
};
$(document).ready(function() {
	$.fn.zTree.init($("#unitTree"), unitTreeSetting, zNodes());//初始化菜单树形结构
	var treeObj = $.fn.zTree.getZTreeObj("unitTree");
	var nodes = treeObj.transformToArray(treeObj.getNodes());
        for (var i=0, l=nodes.length; i < l; i++) {
            if (nodes[i].isParent){
              treeObj.setChkDisabled(nodes[i], true);//禁用父节点的checkbox
            }
        }
    
    /*
    var node = treeObj.getNodeByParam("id", currentNodeId, null);
    treeObj.checkNode(node,true,true);
    var parent = node.getParentNode();  
    if(!parent.open){  
        treeObj.expandNode(parent,true,true);  //展开选中节点
    }  	*/	
});
//显示菜单
function showMenu() {
	$("#menuContent").css({
		left : "15px",
		top : "34px"
	}).slideDown("fast");


	$("body").bind("mousedown", onBodyDown);
}


//隐藏菜单
function hideMenu() {
	$("#menuContent").fadeOut("fast");
	$("body").unbind("mousedown", onBodyDown);
}
function onBodyDown(event) {
	if (!(event.target.id == "menuBtn"
			|| event.target.id == "menuContent"
			|| event.target.id == "txt_ztree" || $(event.target)
			.parents("#menuContent").length > 0)) {
		hideMenu();
	}
}


//节点点击事件
function onClickNode(e, treeId, treeNode) {
	var zTree = $.fn.zTree.getZTreeObj("unitTree");
	zTree.checkNode(treeNode, !treeNode.checked, null, true);
	return false;
}


//节点选择事件
function onCheck(e, treeId, treeNode) {
	var zTree = $.fn.zTree.getZTreeObj("unitTree"),
	nodes = zTree.getCheckedNodes(true), v = "";
	var nodeId = "";
	var nodeLevel = "";
	for (var i = 0, l = nodes.length; i < l; i++) {
		v += nodes[i].name + ",";
		nodeId += nodes[i].id + ",";
		nodeLevel += nodes[i].menu_level + ",";
	}
	if (v.length > 0) {
		v = v.substring(0, v.length - 1);
		nodeId = nodeId.substring(0, nodeId.length - 1);
		nodeLevel = nodeLevel.substring(0, nodeLevel.length - 1);
		$("#unit").val(v);//显示选中节点的文本
	} else {
		return;
	}
	hideMenu();
}

后端:

1.zTree节点属性

package sy.util;

public class ZtreeNode {
	
	private String id;
	private String pId;
	private String name;
	private boolean open;
	private boolean isParent;
	
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getpId() {
		return pId;
	}
	public void setpId(String pId) {
		this.pId = pId;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public boolean isOpen() {
		return open;
	}
	public void setOpen(boolean open) {
		this.open = open;
	}
	public boolean isParent() {
		return isParent;
	}
	public void setParent(boolean isParent) {
		this.isParent = isParent;
	}

}
2.返回数据结构(以下为service实现层代码,仅供参考)
public ResultJson getUnitTree() {
    	ResultJson result = new ResultJson();
	List<ZtreeNode> ztrlist = new LinkedList<>();
	List<SysProject> firstLeafs = sysProjectService.list();//一级子节点
	ZtreeNode parent = new ZtreeNode();//树的父节点
	parent.setId("0");
	parent.setName("单元信息");
	parent.setOpen(true);
	parent.setpId(null);
	parent.setParent(true);
	ztrlist.add(parent);
	for(Iterator<SysProject> it = firstLeafs.iterator();it.hasNext();){
		SysProject sysProject = it.next();
		ZtreeNode t = new ZtreeNode();
		t.setId(sysProject.getId());
		t.setName(sysProject.getName());
		t.setOpen(false);
		t.setpId("0");
		t.setParent(true);
		ztrlist.add(t);
		Set<SysBuilding> buildingSet = sysProject.getSysBuilding();
		Iterator<SysBuilding> itBuilding = buildingSet.iterator();
		List<SysUnit> thirdLeaves = new ArrayList<>();//判断每个项目下是否有单元信息标识
		while(itBuilding.hasNext()){
			SysBuilding building = itBuilding.next();
			ZtreeNode children = new ZtreeNode();
			children.setId(building.getId());
			children.setName(building.getName());
			children.setOpen(false);
			children.setpId(sysProject.getId());
			children.setParent(true);
			ztrlist.add(children);
			Set<SysUnit> unitSet = building.getSysUnit();
			Iterator<SysUnit> itUnit = unitSet.iterator();
			while(itUnit.hasNext()){
				SysUnit unit = itUnit.next();
				ZtreeNode children1 = new ZtreeNode();
				children1.setId(unit.getId());
				children1.setName(unit.getName());
				children1.setOpen(false);
				children1.setpId(building.getId());
				ztrlist.add(children1);
				thirdLeaves.add(unit);
			}
		}
		/***********去除没有单元的项目************/
		if(thirdLeaves.isEmpty()){
			ztrlist.remove(t);
		}
	}
	result.getResultMap().put("rows", ztrlist);
	result.getResultMap().put("total", ztrlist.size());
	return result;
}


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值