java ajax 联动菜单_java结合jQuery.ajax实现左右菜单联动刷新列表内容

http://域名/一级菜单ID-二级菜单ID/用这种URL请求页面，出现如图所看到的内容；

该页面包括四部分，顶部文件夹+左側菜单+右側菜单+右下側数据列表。

左側菜单包括一级菜单和二级菜单，点击某个一级菜单时打开相应的二级菜单。同一时候右側也显示二级菜单。选中左側某个二级菜单，右側相应的二级菜单也被选中，点击右側二级菜单，显示相应的三级菜单，默认选中三级菜单的所有，点击某个三级菜单。列表中展示相应菜单下的数据；上述所有点击过程中，顶部文件夹以及右側列表同一时候刷新。。。感觉好绕口的样子呢，只是我还是实现了它。。。

就当是做点笔记吧。

页面布局：父页面+iframe_menu+iframe_dataList

parent.jsp

function queryDataByID(type_id) {

handleDiv(type_id);

}

// 处理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;

}

%>

门户站点>

链接1>

链接2>

>

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');

}

}

});

})

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;

}

}

}

}

}