您的位置：首页 > Web前端 > JQuery

struts2+jquery实现二级联动菜单

2014-03-12 21:34 405 查看

在实现关联菜单（二级联动效果）时我们通常采用以下的组合方式，即：（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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航