struts2+jquery实现二级联动菜单

最新推荐文章于 2024-02-06 18:47:33 发布

一心编码的小亮亮

最新推荐文章于 2024-02-06 18:47:33 发布

阅读量3.8k

点赞数

分类专栏： javaweb开发文章标签： struts2 jquery 脚本 javascript 二级联动

本文链接：https://blog.csdn.net/wang_liang_/article/details/21117303

版权

javaweb开发专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在实现关联菜单（二级联动效果）时我们通常采用以下的组合方式，即：（struts2+jquery实现二级联动菜单）

首先我们要做实现二级联动效果的准备工作，也就是jar包的引用，我们需要以下jar包（版本可根据实际情况而定）

之后我们就要开始代码编程：

这时在model包中的board类，这时对实现二级联动效果的相关变量的声明和get set方法的实现

package model;

import java.util.ArrayList;
import java.util.List;

import org.apache.struts2.json.annotations.JSON;

public class Board {
	
	private int id;
	
	private String name;
	//自引用外键
	private int parentid;
	//子版块集合
	private List<Board> boards=new ArrayList<Board>();
	
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public int getParentid() {
		return parentid;
	}
	public void setParentid(int parentid) {
		this.parentid = parentid;
	}
	public List<Board> getBoards() {
		return boards;
	}
	public void setBoards(List<Board> boards) {
		this.boards = boards;
	}

}

下面的代码是menuAction的代码，在这里主要划分板块，和菜单与子菜单的关联

package action;

import java.util.HashMap;

import model.Board;

import com.opensymphony.xwork2.ActionSupport;

public class MenuAction extends ActionSupport{

	//主板块id
	private int index;
	
	private HashMap<String,Board> datamap=new HashMap<String,Board>();
	
	@Override
	public String execute() throws Exception {
		//第一个主板块
		Board java=new Board();
		//主板块parentid = 0
		java.setParentid(0);
		java.setId(1);
		java.setName("java");
		//子版块
		Board jsp=new Board();
		jsp.setParentid(1);
		jsp.setId(3);
		jsp.setName("jsp");
		
		Board ssh=new Board();
		ssh.setParentid(1);
		ssh.setId(4);
		ssh.setName("ssh");
		
		//主板块添加子版块
		java.getBoards().add(jsp);
		java.getBoards().add(ssh);
		
		//第二个主板块
		Board net=new Board();
		net.setParentid(0);
		net.setId(2);
		net.setName(".net");
		
		//子版块
		Board mvc=new Board();
		mvc.setParentid(2);
		mvc.setId(5);
		mvc.setName("mvc");
		
		Board wcf=new Board();
		wcf.setParentid(2);
		wcf.setId(6);
		wcf.setName("wcf");
		
		//主板块添加子版块
		net.getBoards().add(mvc);
		net.getBoards().add(wcf);
		//每次充值先清空
		datamap.clear();
		if(index == 1)
		{
			datamap.put("board", java);
		}
		else
		{
			datamap.put("board", net);
		}
		
		return SUCCESS;
	}

	public int getIndex() {
		return index;
	}

	public void setIndex(int index) {
		this.index = index;
	}

	public HashMap<String, Board> getDatamap() {
		return datamap;
	}

	public void setDatamap(HashMap<String, Board> datamap) {
		this.datamap = datamap;
	}
	
	
}

下面是struts配置文件的代码，

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
	"-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
	"http://struts.apache.org/dtds/struts-2.3.dtd">

<struts>
 
	
	<package name="json" extends="json-default">
		<action name="json" class="action.MenuAction" >
			<result type="json">
				<param name="root">datamap</param>
			</result>
		</action>
	</package>
	
</struts>

下面这一部分就是项目的首页，index 在这里我们可以看到我们联合了Javascript脚本，实现了本地的脚本联动效果，在本程序中我们并没有链接数据库，后续我们会继续完善代码，实现从数据库查询相关数据最后展现在二级联动的菜单里

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>


<html>
  <head>
   
    <title>My JSP 'index.jsp' starting page</title>
	<script src="${pageContext.request.contextPath}/jquery-1.10.1.js" type="text/javascript">
	</script>
	<script type="text/javascript">
	$( function(){
		$("#mainmenu").change(
			function()
			{
				$.getJSON("/menu/json",{index:$(this).val()},function(data)
						{
							var boards =data.board;
							//alert(boards.boards[0].id);
							alert(boards.boards.length);
							var myOptions='';
							//遍历子版块
							for(var i =0 ; i<boards.boards.length;i++)
							{
								myOptions+='<option value="' + boards.boards[i].id + '">' + boards.boards[i].name + '</option>';
								$("#childmenu").html(myOptions);
							}
							
						}
				);
				//$("#mainmenu").change();
			}
		
		);
		}	
	);
	</script>
	
  </head>
  
  <body>
    
    	<select id="mainmenu" name="index">
    		<option value="1">java</option>
    		<option value="2">.net</option>
    	</select>
    	<select id="childmenu" name="cindex">
    	
    	</select>
    
    
  </body>
</html>