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查询相应的数据，进行分页展示。
java结合jQuery.ajax实现左右菜单联动刷新列表内容的更多相关文章
- jquery ajax实现省市二级联动
今天给大家带来使用jQuery ajax实现的省市联动效果.我们直奔主题,先说下实现思路: 准备数据 这里数据库我使用的是mysql,先看下表格: provience表 city表 这里使用provi ...
- JQuery+Ajax实战三级下拉列表联动（八）
本片文章为练习,项目中不会这样写: 一:涉及到的知识点: jQuery Dom操作 jQuery Ajax操作 ASP.net中的json操作 二:用了自动代码生成器 1.Dal层的代码: publi ...
- （jquery+ajax）省市区三级联动（封装和不封装两种方式）-----2017-05-14
首先,要实现如下图效果, 1.要理清思路: 先做出三个下拉菜单----根据第一个下拉菜单的value值获取第二个下拉列表的内容,第三个同理. 2.用到的数据库表:Chinastates表 规律:根据国 ...
- jquery ajax协调SpringMVCD实现局部刷新IV
feedback.jsp: <%@ page language="java" import="java.util.*" pageEncoding=&quo ...
- jQuery.ajax() 如何设置 Headers 中的 Accept 内容
其实很简单,首先如果是常见类型,则请直接设置 dataType 属性 $.ajax({ dataType: "json", type: "get", succe ...
- 用jquery ajax做的select菜单，选中的效果
//用server端语言赋值给js变量 var departmentId = '<%=提交的值 %>', deviceId='<%=提交的值 %>' $(fun ...
- jquery ajax php 无刷新上传文件 带 遮罩 进度条 效果的哟
在很多项目中都会叫用户上传东西这些的,自从接触了jquery 和ajax之后就不管做什么,首先都会想到这个,我这个人呢?是比较重视客户体验的,这次我这边负责的是后台板块,然后就有一块是要求用户上传照片 ...
- jQuery.ajax() 设置 Headers 中的 Accept 内容
jQuery.ajax() 如何设置 Headers 中的 Accept 内容 其实很简单,首先如果是常见类型,则请直接设置 dataType 属性 $.ajax({ dataType: &quo ...
- Ajax和JSON完成二级菜单联动的功能
首先需要找好JSON的包哦: 链接:http://pan.baidu.com/s/1jH6gN46 密码:lbh1 1:首先创建一个前台页面,比如secondMenu.jsp,源码如下所示: < ...
随机推荐
- oracle 实时查询最耗CPU资源的SQL语句
1. 先通过top命令查看产用资源较多的spid号 2.查询当前耗时的会话ID,用户名,sqlID等: select sid,serial#,machine,username,program,sql_ ...
- 【刷题笔记】LeetCode 222. Count Complete Tree Nodes
题意 给一棵 complete binary tree,数数看一共有多少个结点.做题链接 直观做法:递归 var countNodes = function(root) { if(root===nul ...
- 完整注册+JQuery验证+selert后台校验
Java代码 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8 ...
- BZOJ 3052 树上带修莫队
思路: 就是把带修莫队移到了树上 块的大小开到(n^2/3)/2 比较好- 这是一个卡OJ好题 //By SiriusRen #include <cmath> #include <c ...
- T7315 yyy矩阵折叠(长)
题目背景 全场基本暴零 题目描述 输入输出格式 输入格式: 如图 输出格式: 如图 输入输出样例 输入样例#1: 2 2 1 -2 3 -4 输出样例#1: 4 输入样例#2: 2 5 1 -2 -3 ...
- 用过的jQuery记录
var list= $('input:radio[name="name"]:checked').val(); //选择input中单选name为“name”的并且是选中状态的 in ...
- ServiceStack.Redis之IRedisClient（转载）
一.属性 IRedisClient的属性如下: 属性 说明 ConnectTimeout 连接超时 Db 当前数据库的ID或下标 DbSize 当前数据库的 key 的数量 HadExceptio ...
- Win10 UI入门 导航滑动条 求UWP工作
借鉴了 段博琼 大哥写的导航滑动,自己实现了一个类似安卓 IOS 导航滑动条 支持等比例 分割 tabView 支持动画滑动 效果如下图 WYGrid 你可以想象一个GridView itemsWr ...
- svn: E155017: Checksum mismatch while updating 校验错误的解决方法
[10.3.53.53:/EMRCV5]# svn up svn: E155004: Working copy '/EMRCV5' locked. svn: E155004: '/EMRCV5' is ...
- luoguP4238 【模板】多项式求逆 NTT
Code: #include <bits/stdc++.h> #define N 1000010 #define mod 998244353 #define setIO(s) freope ...