easyui 左侧Accordion菜单,最下面一个面板被隐藏的解决方法

easyui 左侧Accordion菜单,最下面一个面板被隐藏的解决方法

easyui 左侧Accordion菜单,最下面一个面板被隐藏的解决方法

一.菜单的加载方式

  • 让accordion子菜单里面显示 tree
function initLeftMenu(){
			$.ajax({
				type: 'POST',
				async: false,
				dataType: "json",
				url: '${ctx}/module/getAccordionList',//获取菜单
				success: function(data) {
					$.each(data, function(i, n) { //加载父类节点即一级菜单
						var id = n.moduleId;
						var accordionTitle = n.moduleName;
						var iconCls = n.iconCls;
						if(i == 0) { //显示第一个一级菜单下的二级菜单
							$('#leftAccordion').accordion('add', {
								title: accordionTitle,
								selected: true,
								//可在这加HTML代码,改变布局
								content: '<div style="padding:3px 15px"><ul id="tree' + id + '"></ul></div>',
								iconCls:iconCls
							});
						} else {
							$('#leftAccordion').accordion('add', {
								title: accordionTitle,
								selected: false,
								content: '<div style="padding:3px 15px"><ul id="tree' + id + '"></ul></div>',
								iconCls:iconCls
							});
						}
						loadTreeMenu(id,accordionTitle);
					});
				}
			});
		}

		function loadTreeMenu(id,accordionTitle){
			$.ajax({
				type: 'POST',
				async: false,
				dataType: "json",
				url: '${ctx}/module/getTreeList?pId=' + id,
				success: function(data) {
					$("#tree" + id).tree({
						data: data,
						animate: true,
						//iconCls: icon-blank,
						//在树节点加图片
						lines: true, //显示虚线效果
						onClick: function(node) {
							var isLeaf =  $("#tree" + id).tree('isLeaf', node.target);
							if(isLeaf){
								openTab(node);
								//将 tree的text当key,accordion的title当做value,目的是为了在tabs的title切换时,accordion被选中
								sessionStorage.setItem(node.text,accordionTitle);
								//将tree的text 和tree的id对应起来
								sessionStorage.setItem("treeId"+node.text,id);
								//将tree的节点的text作为key ,node.id作为value 放到sessionStorage中,目的在切换时tree的选中
								sessionStorage.setItem("treeNodeId"+node.text,node.id);
							}
							//支持点击展开/折叠
							$("#tree" + id).tree(node.state === 'closed' ? 'expand' : 'collapse', node.target);
						},
						onLoadSuccess:function(node, data){
							//$("#tree" + id).tree('expandAll');
						}
					});
				}

			});
		}

二.点击其他才显示

  • 系统配置菜单,只有点击了其他accordion它才会显示

easyui 左侧Accordion菜单,最下面一个面板被隐藏的解决方法

三.解决方法:

在初始化函数中调用即可:

$("#index_layout").layout('panel','west').resize();

easyui 左侧Accordion菜单,最下面一个面板被隐藏的解决方法

easyui 左侧Accordion菜单,最下面一个面板被隐藏的解决方法

HTML代码结构

easyui 左侧Accordion菜单,最下面一个面板被隐藏的解决方法

四.修改后效果

easyui 左侧Accordion菜单,最下面一个面板被隐藏的解决方法

上一篇:jQuery、JS和jQuery Easyui三种不同获取值的方法


下一篇:<> 新书出手,有心栽花花不开,无心插柳柳成荫