java结合jQuery.ajax实现左右菜单联动刷新列表内容

http://域名/一级菜单ID-二级菜单ID/ 用这种URL请求页面，出现如图所看到的内容；

该页面包括四部分，顶部文件夹+左側菜单+右側菜单+右下側数据列表。

左側菜单包括一级菜单和二级菜单，点击某个一级菜单时打开相应的二级菜单。同一时候右側也显示二级菜单。选中左側某个二级菜单，右側相应的二级菜单也被选中，点击右側二级菜单，显示相应的三级菜单，默认选中三级菜单的所有，点击某个三级菜单。列表中展示相应菜单下的数据；上述所有点击过程中，顶部文件夹以及右側列表同一时候刷新。。。感觉好绕口的样子呢，只是我还是实现了它。。。

就当是做点笔记吧。

页面布局：父页面+iframe_menu+iframe_dataList

parent.jsp

<!-- 头部省略 -->

<script type="text/javascript">
function queryDataByID(type_id) {
	handleDiv(type_id);
}
</script>
</head>
<%

// 处理URL中的參数（一级菜单ID-二级菜单ID）
String id= (String)request.getAttribute("id");
String realid = "";
String[] ids ;
if(id.contains("-")){
	ids = id.split("-");
	if(ids.length==2){
		realid = ids[1];
	}else if(ids.length==3){
		realid = ids[2];
	}
}else{
	realid = id;
}

%>
<body class="tf">

    <p class="wrapper key">
    	<a href="#">门户站点</a><span>></span>
        <a href="#">链接1</a><span>></span>
        <a href="#">链接2</a><span>></span>
        <a href="" id="mulufirst"></a><span>></span>
        <em id="mulusecond"></em><!--标示当前-->
    </p>
     <div class="wrapper clearfix">
    <!--***************************************************************左側菜单****************************************************************-->
       <div class="main_left">
           <iframe onload="iframeMenuFun()" name="iframeMenu" src="/menu/fenlei/<%=id%>.html" height="950" width="250" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" style="float:left;"></iframe>
       </div>
           
	<!--***************************************************************左側菜单****************************************************************-->
        <div class="main_content">
        	<div class="mc_one" id="parentchild"></div> <!-- 加入横向一级和二级菜单 -->
        	<div class="mc_one">
                 
                <ul class="mc_content">
<!--***************************************************************右側数据列表****************************************************************-->
<iframe src="/listpart/<%=realid %>/1.html" align="top" id="iframepage"  width="931" onload="SetWinHeight(this)" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" ></iframe>
					
<!--***************************************************************右側数据列表****************************************************************-->
                </ul>
            </div>
        </div>
    </div>
   
<script>
		
		function loadDatabyID(type_id){//依据三级id载入数据
			document.getElementById("iframepage").src="/xf/listpart/"+type_id+"/1.html";
		}
		
		function switchSanjiClass(o){
			var oI=$(o).parent().find('a').index($(o));
			$(o).parent().find('a').eq(oI).addClass('on').siblings().removeClass('on');
		}
		
		function handleDiv(type_id){
		var temp = type_id.replace("r","s");
		$('.main_content #parentchild >div').each(function () {//遍历处理隐藏的三级菜单
			if($(this).attr("id")==temp){
				  if ($(this).hasClass('Hide')) {
	                $(this).removeClass('Hide');
	                $(this).addClass('xian');
	            } 
			}else{
				 if ($(this).hasClass('xian')) {
		                $(this).removeClass('xian');
		                $(this).addClass('Hide');
		            } 
			}
        });
	}
	
	function handleDivsan(erjiID) {//用来处理点击左側二级菜单后 显示横向相应三级菜单
		var temp = "s" + erjiID; //依据二级id拼接成三级div的id 这是自己的约定
		$('.main_content #parentchild >div').each(function () {//遍历处理隐藏的三级菜单
			if($(this).attr("id")==temp){
				  if ($(this).hasClass('Hide')) {
	                $(this).removeClass('Hide');
	                $(this).addClass('xian');
	            } 
			}else{
				 if ($(this).hasClass('xian')) {
		                $(this).removeClass('xian');
		                $(this).addClass('Hide');
		            } 
			}
        });
		
		temp = "r" + erjiID;
		$('.main_content #parentchild .clearfix li').each(function (){//遍历处理横向二级样式
			if($(this).attr("id")==temp){
				$(this).addClass('on').siblings().removeClass('on');
			}
		});
		
	}
		function TabOne(){
		var oTLi1=$('.main_content #parentchild .mc_tab li');
		var oTUl1=$('.mc_one .mc_content');
		oTLi1.click(function(){
			var _this=$(this);
			var oI=oTLi1.index(_this);
			oTLi1.eq(oI).addClass('on').siblings().removeClass('on');
			document.getElementById('mulusecond').innerHTML=$(this).text();
			loadDatabyID($(this).attr("id").replace("r",""));
			var temp = $(this).attr("id").replace("r","s"); //依据二级id拼接成三级div的id 这是自己的约定
			$('.main_content #parentchild >div').each(function () {//遍历处理隐藏的三级菜单
				if($(this).attr("id")==temp){
					  if ($(this).hasClass('Hide')) {
		                $(this).removeClass('Hide');
		                $(this).addClass('xian');
		            } 
				}else{
					 if ($(this).hasClass('xian')) {
			                $(this).removeClass('xian');
			                $(this).addClass('Hide');
			            } 
				}
	        });
	})
</script>
<script type="text/javascript">
function SetWinHeight(obj) 
{ 
	   var win=obj; 
	   if (document.getElementById("iframepage")) 
	   { 
		   if (win && !window.opera) 
		   { 
			   if (win.contentDocument && win.contentDocument.body.offsetHeight) {
				   win.height = win.contentDocument.body.offsetHeight + 25;
				   } 
			   else if(win.Document && win.Document.body.scrollHeight) {
				   win.height = win.Document.body.scrollHeight + 25;
			   } 
			   
		   } 
	   } 
} 

function IFrameReSizeWidth(obj) {
	   var win=obj; 
	   if (document.getElementById("iframepage"))
	   { 
		   if (win && !window.opera) 
		   { 
			   if (win.contentDocument && win.contentDocument.body.offsetWidth) {
				   win.width = win.contentDocument.body.offsetWidth;
				   } else if(win.Document && win.Document.body.scrollWidth) {
				   win.width = win.Document.body.scrollWidth;
			   } 
		   } 
	   }
	}
}
</script> 
</body>
</html>

ServiceLeftMenu类用来处理左側菜单请求

public List<MenuModel> getLeftMenu(HttpServletRequest request, HttpServletResponse response) {
		response.setContentType("text/html;charset=gbk");
		response.setCharacterEncoding("gbk");// 防止弹出的信息出现乱码
		
		// 设定查询条件部分省略,menuInfo
		
		// 对ID进行切割处理
		ids = new String[3];
		if ("fenlei".equals(type)) {
			if (id.contains("-")) {
				ids = id.split("-");
			} else {
				ids[0] = id;
			}
		}
		// 依据一级菜单parent_id=0,获取一级菜单列表
		List<MenuModel> list = new ArrayList<MenuModel>();
		
		menuInfo.setTypeParentId("0");
		list = MenuDAO.getMenuList(menuInfo);
		for (int i = 0; i < list.size(); i++) {
			MenuModel MenuModel = list.get(i);
			// 依据二级菜单的parent_id=一级菜单的ID，获取二级菜单列表，
			menuInfo.setTypeParentId(MenuModel.getTypeId());
			// 将二级菜单的列表作为一级菜单的属性保持，这样二级菜单与相应的一级菜单绑定
			list.get(i).setChilds(MenuDAO.getMenuList(menuInfo)) ;
		}
		// 将一级二级才当列表与前端的样式一起拼接为字符串返回到页面
		String strMenu = createMenuByList(list);
		
		request.setAttribute("strMenu", strMenu);
		return null;
	}


private String createMenuByList(List<MenuModel> menulist){
		StringBuffer strMenu = new StringBuffer();
		strMenu.append("<p><img src='http://img.test.com/images/zhizhen.png' alt='' title=''/>菜单</p>");
		for (MenuModel MenuModel : menulist) {
			//分类页遍历一级菜单
			if("fenlei".equals(type)){
				strMenu.append("<ul ><li id='");
				strMenu.append(MenuModel.getTypeId());
				
				if(MenuModel.getTypeId().equals(ids[0])){
					strMenu.append("' class='nav_title'><em class='on'></em>");
					strMenu.append(MenuModel.getTypeName());
					strMenu.append("</li><li class='nav_details'><ul>");
				}else{
					strMenu.append("' class='nav_title'><em ></em>");
					strMenu.append(MenuModel.getTypeName());
					strMenu.append("</li><li class='nav_details dis'><ul>");
				}
				int k = 0;
				//分类页遍历二级菜单
				for (MenuModel child : MenuModel.getChilds()) {
					if (ids[1] != null && !ids[1].equals("")) {
						if(child.getTypeId().equals(ids[1])){
							strMenu.append("<li class='on' onclick='showSanji("+child.getTypeId()+")'><a class='clearfix'><span>");
						}else{
							strMenu.append("<li onclick='showSanji("+child.getTypeId()+")'><a class='clearfix'><span>");
						}
					} else {
						if (k == 0 && ids[0].equals(MenuModel.getTypeId())) {
							strMenu.append("<li class='on'  onclick='showSanji("+child.getTypeId()+")'><a class='clearfix'><span>");
							k = 2;
						} else {
							strMenu.append("<li onclick='showSanji("+child.getTypeId()+")'><a class='clearfix'><span>");
						}
						
					}
					
					strMenu.append(child.getTypeName());
					strMenu.append("</span><em>></em></a></li>");
				}
				strMenu.append("</ul></li></ul>");
					
			} else {
				//....
			}
			
		}
		return strMenu.toString();
	}

leftmenu.jsp

<html>
<!-- 省略首部内容 -->
<head>
<script type="text/javascript">

$(document).ready(function(){ 
	Vnavl();
	//tab标签
	TabOne();
	// 顶部文件夹
	creatMulu();
	<%
	String id = (String)request.getAttribute("idd");
	String[] ids = new String[3];
	if (id.contains("-")) {
		ids = id.split("-");
	} else {
		ids[0] = id;
		ids[1] = "0";
	}
	
	%>
	getChild(<%=ids[0]%>,<%=ids[1]%>);//横向菜单默认打开第一个
});
	function creatMulu(){
		//刚进入页面依据样式确定一级文件夹的内容
		 $(".v_nav>ul .nav_title").each(function () {
			 if ($(this).find('em').hasClass('on')) {
				 window.parent.document.getElementById('mulufirst').innerHTML=$(this).text();
			 }
		 });
		//刚进入页面依据样式确定二级文件夹的内容
		 $('.nav_details>ul>li').each(function () {
			 if ($(this).hasClass('on')) {
				 window.parent.document.getElementById('mulusecond').innerHTML=$(this).text().replace(">","");
			 }
		 });
	}
//左側菜单效果
function Vnavl(){
	var oUl=$('.v_nav>ul');
		var oNavT=$(".v_nav>ul .nav_title");
		var oLi=$('.nav_details>ul>li');
		oNavT.click(function(){
			var _this=$(this);
			//alert($(this).text());
			//alert($(this).attr("id"));
			var oI=oNavT.index(_this);
			oNavT.find('em').removeClass('on');
			oUl.eq(oI).siblings().find('.nav_details').slideUp();
			oUl.eq(oI).find('.nav_details').slideDown();
			oNavT.eq(oI).find('em').addClass('on');
			
			var yijiId = $(this).attr("id");
// 			alert($(this).attr("id"));
			 getChild($(this).attr("id"));
			 var count = 0;
			 oUl.eq(oI).find('.nav_details').find('ul').find('li').each(function () {
				 if(count==0){
					 $(this).addClass('on');
					 window.parent.document.getElementById("mulusecond").innerHTML=$(this).text().replace(">","");
					 parent.loadDatabyID(yijiId);
					 count = 1;
				 }
			 });
			//动态改动一级文件夹
			 window.parent.document.getElementById('mulufirst').innerHTML=$(this).text();
			})
		oLi.click(function(){
			var _this=$(this);
			var oI=oLi.index(_this);
			oLi.removeClass('on');
			oLi.eq(oI).addClass('on');
			//动态改动二级级文件夹
			window.parent.document.getElementById('mulusecond').innerHTML=$(this).text().replace(">","");
			})		
	}
	 

function showSanji(erjiID){
	parent.handleDivsan(erjiID);
	parent.loadDatabyID(erjiID);
}

//依据一级菜单ID获得横向二级菜单和三级菜单
function getChild(topid,secondid){
        jQuery.ajax({  
                type: "post",  
                url: "/xf/makesecond.html",  
                data:{param:"child",optionValue:topid,seId:secondid},  
                success: function(data){ 
                 	var tt = "";
                 	var default_id = "";//记录二级菜单第一项id
                	var json = eval(data); //数组   
                    $.each(json, function (index) {
                        //循环获取数据  
                         default_id = json[index].firstErjiID;
                         tt = json[index].erjihtml;
                     });
                	 window.parent.document.getElementById('parentchild').innerHTML=tt; 
                	 parent.queryDataByID(default_id);
                	 parent.TabOne();
                }  
        });  
}

</script>

</head>
<body class="tf">
<div class="v_nav" >
<!-- 显示左側菜单 -->
<%=request.getAttribute("strMenu") %>
 </div>

</body>
</html>

RightMenuService用来查询右側菜单，用json格式返回。通过显示/隐藏样式来控制三级菜单的样式

public List<MenuModel> getMenuRows(HttpServletRequest request, HttpServletResponse response) {
		// 设置编码
		response.setContentType("text/html;charset=gb2312");
		response.setCharacterEncoding("gb2312");
		// 接受參数
		String param = request.getParameter("param");
		String optionValue = request.getParameter("optionValue");
		String seId = request.getParameter("seId");
		
		// 设定SQL查询条件省略，menuInfo
		
		// 查询二级栏目
		List<MenuModel> listErji = new ArrayList<MenuModel>();
		// 查询三级栏目
		List<MenuModel> listSanji = new ArrayList<MenuModel>();
		
		// 横向二级菜单
		listErji.clear();
		if("child".equals(param)){
			menuInfo.setTypeId(optionValue);
			menuInfo.setFlag("2");
			listErji = MenuDAO.getMenuRowsList(menuInfo);
			request.setAttribute("type_id", optionValue);
		}
		
		String data = "<ul class='clearfix mc_tab'>";
		String firstErjiID = "";
		int k = 0;
		for (int i = 0; i < listErji.size(); i++) {
			String id = "r"+listErji.get(i).getTypeId();
			String name = listErji.get(i).getTypeName();
			//if (i == 0) {
			if(listErji.get(i).getTypeId().equals(seId)) {
				firstErjiID = id;
				data += "<li class='on' id="+id+">"+name+"</li>";
			} else if (("0".equals(seId) && k == 0) || (null ==seId && k == 0)){
				// 訪问一级分类或者点击一级分类时默认选择第一个二级分类
				k = 1;
				data += "<li class='on' id="+id+">"+name+"</li>";
			} else {
				data += "<li id="+id+">"+name+"</li>";
			}
			
		}
		data += "</ul>";
		
		// 横向三级菜单
		listSanji.clear();
		for (int i = 0; i < listErji.size(); i++) {
			menuInfo.setTypeId(listErji.get(i).getTypeId());
			menuInfo.setFlag("3");
			listSanji = MenuDAO.getMenuRowsList(menuInfo);
			
			data +="<div id='s"+listErji.get(i).getTypeId()+"' class='Hide clearfix'><a  class='on' onclick='loadDatabyID("+listErji.get(i).getTypeId()+");switchSanjiClass(this)'>所有</a>";
			for (int j = 0; j < listSanji.size(); j++) {
				data += "<a onclick='loadDatabyID("+listSanji.get(j).getTypeId()+");switchSanjiClass(this)'>"+listSanji.get(j).getTypeName()+"</a>";
			}
			data += "</div>";
		}
		//data返回的是json类型的数据
		data = "[{"firstErjiID":""+firstErjiID+"","erjihtml":""+data+""}]";

		try {
			response.getWriter().write(data);
		} catch (IOException e) {
			e.printStackTrace();
		}
		
		return null;
	}

大致步骤如上。有了新的思路可继续完好哈

补充：实现菜单眼下有两种思路。一是在后端拼接好字符串直接返回，而是在后端返回一个json格式的数据，拼接过程在前端实现。这里补充另外一种方式~

//获得一级菜单
function getTopMenu(){  
	jQuery("#parent").empty();
	jQuery("#parent").append("<p><img src='http://img.test.com/images/zhizhen.png' alt='' title=''/> 菜单</p>");
    jQuery.ajax({  
            type: "post",  
            url: "/xf/makesecond.html", 
            data:{param:"parent"},  
            success: function(data){ 
            	
            	var json = eval(data); //数组   
                $.each(json, function (index) {
                    //循环获取数据  class="on"
                    var Id = json[index].typeId;
                    var Name = json[index].typeName;
                    if(0==index){
                    	firsetId = Id;
                    	jQuery("#parent").append("<ul ><li class='nav_title' onclick='Vnavl()'><em class='on'></em>"+Name+"</li><li class='nav_details'><ul id='"+Id+"'></ul></li></ul>");
                    } else {
                    	jQuery("#parent").append("<ul><li class='nav_title' onclick='Vnavl()' ><em></em>"+Name+"</li><li class='nav_details dis'><ul id='"+Id+"'></ul></li></ul>");
                    }
                    
                    getChild(Id);
                });
 
            }  
    }); 
}

后台实现

public List<MenuModel> getLeftMenu(HttpServletRequest request, HttpServletResponse response) {
		response.setContentType("text/html;charset=gb2312");
		response.setCharacterEncoding("gb2312");// 防止弹出的信息出现乱码
		//查询条件省略
		
		List<MenuModel> list = new ArrayList<MenuModel>();
		
		String param = request.getParameter("param");
		String optionValue = request.getParameter("optionValue");
		list.clear();
		if ("parent".equals(param)) {
			menuInfo.setTypeParentId("0");
			list = menuDAO.getLeftMenuList(menuInfo);
			request.setAttribute("type_id", 0);
		} else if ("child".equals(param)) {
			menuInfo.setTypeParentId(optionValue);
			list = menuDAO.getLeftMenuList(menuInfo);
			request.setAttribute("type_id", optionValue);
		}
		net.sf.json.JSONArray jsonArray = net.sf.json.JSONArray.fromObject(list);
		String data = jsonArray.toString();
		System.out.println(data);
		
		try {
			response.getWriter().write(data);
		} catch (IOException e) {
			e.printStackTrace();
		}
		return null;
	}

右下側数据列表，就是普通的数据展示。依据菜单ID查询相应的数据，进行分页展示。

相关阅读:
C# Dev PropertyGrid
C# PropertyGrid控件应用心得
 FileWriter不覆盖
 FileWriter
java试题
 Java线程池
 java自带线程池和队列详细讲解
 HashMap练习题
 Map集合
 java指定
原文地址：https://www.cnblogs.com/lytwajue/p/7008651.html

最新文章
poj 2586
poj 2965
poj 1753
草稿
 hdu 1269
hdu 1176
hdu 1159
hdu 1114 完全背包问题
 hdu 1087 最大上升子序列和
 hdu 1069

热门文章
run
CodeMirror tab转空格
 js获取ip地址
 访问权限
 Swift 懒加载
 Angular 201703
MySQLdb
iOS布局
 pickle
set