java結合jQuery.ajax實現左右選單聯動重新整理列表內容

阿新 • • 發佈：2019-02-10

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查詢對應的資料，進行分頁展示。

java結合jQuery.ajax實現左右選單聯動重新整理列表內容

java結合jQuery.ajax實現左右選單聯動重新整理列表內容

jquery ajax 多級select 選單聯動載入實現

jquery ajax實現省市二級聯動

JQuery+Ajax實現省市區三級聯動（附效果圖+資料庫）

利用JQuery+Ajax實現aspx頁面無重新整理的動態資料繫結

jQuery EasyUI實現樹形選單及顯示列表資訊

用jQuery,ajax,實現三級聯動封裝JS的文件

jquery+ajax實現二級聯動

jQuery+ajax實現搜尋下拉選單

ThinkPHP + Ajax 實現2級聯動下拉選單

Vue結合Element-UI實現多級選單導航欄

jQuery Ajax版省市三級聯動

小程式外賣專案實踐之-左右選單聯動

jquery+ajax實現使用者登入案例

PHP+jquery ajax 實現實時的輸出顯示

jquery ajax 實現表單提交和驗證表單

JQuery Ajax實現Select多級關聯動態繫結資料

JQuery ajax實現註冊時非同步實時檢測使用者名稱是否重名並進行提示

JQuery Ajax實現圖片上傳並預覽

Java非遞迴實現一二選單

java結合jQuery.ajax實現左右選單聯動重新整理列表內容

相關推薦