struts2+jquery实现二级联动菜单

来源：互联网发布：阅读网络简介编辑：程序博客网时间：2024/04/29 18:16

在实现关联菜单（二级联动效果）时我们通常采用以下的组合方式，即：（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{//主板块idprivate int index;private HashMap<String,Board> datamap=new HashMap<String,Board>();@Overridepublic String execute() throws Exception {//第一个主板块Board java=new Board();//主板块parentid = 0java.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>

0 0