AJAX+POPUP+数据库,实现动态无限级栏目BETA

最新推荐文章于 2021-06-09 15:08:15 发布

dh20156

最新推荐文章于 2021-06-09 15:08:15 发布

阅读量2.9k

点赞数

分类专栏：技术文档文章标签：数据库 ajax xmlhttprequest function vbscript null

本文链接：https://blog.csdn.net/dh20156/article/details/896118

版权

技术文档专栏收录该内容

57 篇文章 0 订阅

订阅专栏

为了减轻未来开发压力及缩短开发周期，贴出最近研究模块化开发中的一点积累。

这是一个无限级的栏目模块，使用到了数据库，ASP，JSON数据类型转换，AJAX加载栏目，无限级POPUP显示等技术手段。

现在贴出该实例的所有组成要素：

1、数据库（本例用数据库为ACCESS2000）

2、服务器端加载栏目(文件保存为UTF8格式)

getMenu.asp

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<% Response.Expires = -1 %>

<%
dim menuid
menuid = CheckStr(Request("menuid"))
If menuid<>"" And isNumeric(menuid) then
response.write getMenu(menuid)
End if
function getMenu(fid)
sql = "Select * From dh_module Where fid="&fid&" Order by part Asc,orderno Asc"
Set rs = Server.CreateObject("Adodb.Recordset")
rs.open sql,conn,1,1
If Not rs.eof then
  dim temStr
  tempStr = "{'MenuList':["
  do while not rs.eof
   tempStr = tempStr & "{"
   tempStr = tempStr & "'atid':'"&rs.fields(0)&"',"
   tempStr = tempStr & "'fid':'"&rs.fields(1)&"',"
   tempStr = tempStr & "'modulename':'"&rs.fields(2)&"',"
   tempStr = tempStr & "'part':'"&rs.fields(3)&"',"
   tempStr = tempStr & "'depth':'"&rs.fields(4)&"',"
   tempStr = tempStr & "'orderno':'"&rs.fields(5)&"',"
   tempStr = tempStr & "'existssub':'"&rs.fields(6)&"'"
   tempStr = tempStr & "},"
  rs.moveNext
  loop
  tempStr = tempStr & "]}"
  tempStr = replace(tempStr,",]}","]}")
  getMenu = tempStr
Else
  getMenu = "{'MenuList':[]}"
End if
rs.close
Set rs = Nothing
end function
conn.close
Set conn = Nothing
%>

3、客户端加载栏目(文件保存为UTF8格式)

AJAXRV.JS

// Initialize
function ajaxInitRV()
{
try
{
  reqRV = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
  try
  {
   reqRV = new ActiveXObject("Microsoft.XMLHTTP");
  }
  catch(oc)
  {
   reqRV = null;
  }
}

if(!reqRV && typeof XMLHttpRequest!="undefined")
{
reqRV=new XMLHttpRequest();
}
}

// Send query
function SendQueryRV(url)
{ var ajaxRV = null;
if (url == "") {return;}
ajaxInitRV();
if(reqRV != null)
{
  reqRV.open("GET", encodeURI(url), false);
        reqRV.send();
  ajaxRV = reqRV.responseText;
}
return ajaxRV;
}

test.asp

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<% Response.Expires = -1 %>
<html>
<head>
<title>AJAX MENU TEST</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="UTF-8" />
<script language="javascript" src="ajaxRV.js"></script>
<script language="javascript">
//无限级popMenu
var pops = new Array();
function CreatePopup(degree)
{
    if (degree < 0)
        return null;
    if (pops[degree] != null)
        return pops[degree];

    if (degree == 0)
        pops[0] = window.createPopup();
    else{
        if (pops[degree - 1] == null)
            pops[degree - 1] = CreatePopup(degree - 1)
        pops[degree] = pops[degree - 1].document.parentWindow.createPopup();
    }
    pops[degree].document.body.setAttribute("degree", degree);
    return pops[degree];
}

//最大popMenu级数
CreatePopup(10);

//显示popMenu
function showPopMenu(obj,str,w,h,degree){
var dhpop = window.createPopup();
if(window.event == null){
  var lefter = w - 10;
  var topper = obj.parentElement.offsetTop;
}else{
  var lefter = window.event.offsetX;
  var topper = window.event.offsetY;
}
pops[degree].document.body.style.fontSize = "12px";
pops[degree].document.body.style.border = "1px solid #333333";
pops[degree].document.body.style.backgroundColor = "lightyellow";
pops[degree].document.body.style.margin = "5px";
pops[degree].document.body.innerHTML = str;
pops[degree].show(lefter, topper, w, h, obj);
}

//隐藏popMenu
function hidePopMenu(i){
pops[i].hide();
}

//AJAX方式加载栏目
function getMenu(menuid){
var url = "getMenu.asp?menuid="+menuid;
var ajaxRV = null;
ajaxRV = SendQueryRV(url);
//将服务器端获得的数据使用JSON方式转换数据类型
return eval("("+ajaxRV+")");
}

//将加载栏目数据组合成popMenu文档
function showMenu(obj,menuid){
var tempObj = getMenu(menuid);
var mlList = tempObj.MenuList.length;
var tempArr = new Array();
var depth = 0;
for(var i=0;i<mlList;i++){
  //使用JSON方式转换数据类型后的数据
  //tempArr.push("atid:"+tempObj.MenuList[i].atid+";fid:"+tempObj.MenuList[i].fid+";modulename:"+tempObj.MenuList[i].modulename+";part:"+tempObj.MenuList[i].part+";depth:"+tempObj.MenuList[i].depth+";orderno:"+tempObj.MenuList[i].orderno+";existssub:"+tempObj.MenuList[i].existssub+";");
  //生成是否有子栏目不同的显示文档
  if(tempObj.MenuList[i].existssub == 1){
   tempArr.push("<div style=/"height:20px;line-height:20px;cursor:default;/" οnmοuseοver=/"top.showMenu(this,"+tempObj.MenuList[i].atid+");/"><table width='100%' cellpadding='0' cellspacing='0'><tr height='20' οnmοuseοver=/"this.style.backgroundColor='highlight';this.style.color='highlighttext';/" οnmοuseοut=/"this.style.backgroundColor='';this.style.color='';/"><td width='20'></td><td style='font-size:12px;' valign='middle'>"+tempObj.MenuList[i].modulename+"<td width='15' style='font-size:12px;' valign='middle'><font style='font-family:webdings;'>4</font></td></tr></table></div>");
  }else{
   tempArr.push("<div style=/"height:20px;line-height:20px;cursor:default;/" οnmοuseοver=/"top.showMenu(this,"+tempObj.MenuList[i].atid+");/"><table width='100%' cellpadding='0' cellspacing='0'><tr height='20' οnmοuseοver=/"this.style.backgroundColor='highlight';this.style.color='highlighttext';/" οnmοuseοut=/"this.style.backgroundColor='';this.style.color='';/"><td width='20'></td><td style='font-size:12px;' valign='middle'>"+tempObj.MenuList[i].modulename+"<td width='15'></td></tr></table></div>");
  }
  //当前栏目层深
  depth = tempObj.MenuList[i].depth;
}
var tempStr = tempArr.join("");
if(tempStr != "" && tempStr != null){
  //加载popMenu
  showPopMenu(obj,tempStr,160,mlList*20+12,depth);
  //隐藏切换后的popMenu
  for(var di=0;di<pops.length-1;di++){
   if(di>depth){
    top.hidePopMenu(di);
   }
  }
}
return false;
}
</script>
</head>
<body οncοntextmenu="return showMenu(this,0);">
在BODY的oncontextmenu事件里测试。
</body>
</html>

4、测试效果

dh20156

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
AJAX+POPUP+数据库,实现动态无限级栏目BETA

为了减轻未来开发压力及缩短开发周期，贴出最近研究模块化开发中的一点积累。这是一个无限级的栏目模块，使用到了数据库，ASP，JSON数据类型转换，AJAX加载栏目，无限级POPUP显示等技术手段。现在贴出该实例的所有组成要素：1、数据库（本例用数据库为ACCESS2000）2、服务器端加载栏目(文件保存为UTF8格式)getMenu.aspdim menuidm
复制链接

扫一扫

专栏目录