zTree生成左侧菜单效果

161502_rglb_2242194.png

 <script type="text/javascript">
	
	//左侧菜单
	var curMenu = null, zTree_Menu = null;
	var setting = {
		view: {
			showLine: true,
			selectedMulti: false,
			dblClickExpand: true
		},
		data: {
			simpleData: {
				enable: true
			},
			key: {
				url: "xUrl"
			}
		},
		callback: {
			onNodeCreated: this.onNodeCreated,
			beforeClick: this.beforeClick,
			onClick: this.onClick
		}
	};
//数据格式 
// [{ id:2, pId:0, name:"应急准备", href:"##", open:true  }, { id:8, pId:2, name:"应急队伍", href:"emergency/emergencySanitationEmergencyTeam.do?method=list"  }, { id:10, pId:2, name:"应急物资", href:"##"  }, { id:11, pId:10, name:"采购申请", href:"emergency/logisticsPurchaseOrderManage.do?method=getListEasyUI"  }]
//注意需要将集合的[]去除 然后在通过这样的方式转出数组 var zNodes =new Array(${list});
	var zNodes =new Array(${list});
	console.log(zNodes);
	function onClick(e, treeId, node) {
		if((node.href).indexOf("##")>-1){
		}else{
			
		}
	}
	
	function beforeClick(treeId, node) {
		if (node.isParent) {
			if (node.level === 0) {
				var pNode = curMenu;
				while (pNode && pNode.level !==0) {
					pNode = pNode.getParentNode();
				}
				if (pNode !== node) {
					var a = $("#" + pNode.tId + "_a");
					a.removeClass("cur");
					zTree_Menu.expandNode(pNode, false);
				}
				a = $("#" + node.tId + "_a");
				a.addClass("cur");

				var isOpen = false;
				for (var i=0,l=node.children.length; i<l; i++) {
					if(node.children[i].open) {
						isOpen = true;
						break;
					}
				}
				if (isOpen) {
					zTree_Menu.expandNode(node, true);
					curMenu = node;
				} else {
					zTree_Menu.expandNode(node.children[0].isParent?node.children[0]:node, true);
					curMenu = node.children[0];
				}
			} else {
				zTree_Menu.expandNode(node);
			}
		}
		return !node.isParent;
	}
	$(document).ready(function(){
		$.fn.zTree.init($("#treeDemo"), setting, zNodes);
		zTree_Menu = $.fn.zTree.getZTreeObj("treeDemo");
		curMenu = zTree_Menu.getNodes()[0];
		zTree_Menu.selectNode(curMenu);
		var a = $("#" + zTree_Menu.getNodes()[0].tId + "_a");
		a.addClass("cur");
	});
	
	</script>

 

转载于:https://my.oschina.net/u/2242194/blog/749753

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值