无限级类别JS目录树显示
发布:apollo | 发布时间: 2008年9月23日遇到了一个比较特殊的客户，我们后台程序在刚开始制作初期就已经考虑到无限级别的类别分类，可一般的产品前台在调用的时候，都是采用简单的二级目录分类，这个客户要求可以在后台添加四级的目录，这不，没办法了，只能改改前台的JS显示脚本代码吧，还好网络上这样的代码比较全，下面就直接把代码贴出来，大家瞧瞧。
1、数据库表结构 Class
ID 自动编号
ClassName 文本 类别名称
ClassRoot 数字 父类别ID值
2、JS脚本
//左侧导航
function showSub(clsid)
{
var obj=document.getElementById(clsid);
if (!obj) return;
with(obj){
style.display=(style.display=="block")?"none":"block";
}
}
function changeIcon(objid)
{
var obj=document.getElementById(objid);
if (!obj) return;
var tmpsrc=(obj.src.indexOf(picArr[2])==-1)?picArr[2]:picArr[1];
obj.src=tmpsrc;
}
function getSubCls(topID)
{
var tmpstr=eval("clsStr.match(/\\${3}"+topID+"\\|{2}[^$]*/g)");
return tmpstr;
}
function listProCLass(ver)
{
var tmpArr,tmp,tmp2,tmp3,tmp4,tmp5,icon;
ver=(ver==1)?1:0;
tmp=getSubCls(0);
if (!tmp) return;
for (var i=0;i<tmp.length;i++)
{
tmpArr=tmp[i].replace(/\${3}/,"").split("||");
tmp2=getSubCls(tmpArr[1]);
icon=picArr[0];
document.writeln("<div style=\"border-bottom:1px solid #D2D2D2;\">");
document.writeln("<table width=\"98%\" align=\"center\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" onmouseover=\"this.style.backgroundColor=\'#F7FCFF\'\" onmouseout=\"this.style.backgroundColor=\'\'\">");
document.writeln(" <tr>");
document.writeln(" <td><table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" >");
document.writeln(" <tr>");
document.writeln(" <td width=\"30\"><div align=\"center\" class=\"lev0\"><img src=\""+icon+"\" class=\"icon\" \/><\/div><\/td>");
if (!tmp2){
document.writeln(" <td height=\"24\" valign=\"middle\" style=\"padding-top:3px;\"><div align=\"left\"><a href=\""+linkArr[ver]+"?clsid="+tmpArr[1]+"\" id=\"prolink"+tmpArr[1]+"\">"+tmpArr[ver+2]+"</a><\/div><\/td>");
}
else{
document.writeln(" <td height=\"24\" valign=\"middle\" style=\"padding-top:3px;\"><div align=\"left\"><a href=\"javascript:void(0);\" onclick=\"showSub(\'cls"+tmpArr[1]+"\');\" id=\"prolink"+tmpArr[1]+"\" class=\"clslink1\">"+tmpArr[ver+2]+"</a><\/div><\/td>");
}
document.writeln(" <\/tr>");
document.writeln(" <\/table><\/td>");
document.writeln(" <\/tr>");
document.writeln("<\/table>");
if (!tmp2){document.writeln("</div>");continue;}
document.writeln("<div id=\"cls"+tmpArr[1]+"\" class='sub1'>");
for (var j=0;j<tmp2.length;j++)
{
var tmpArr2=tmp2[j].replace(/\${3}/,"").split("||");
tmp3=getSubCls(tmpArr2[1]);
document.writeln("<table width=\"100%\" align=\"center\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">");
document.writeln(" <tr>");
document.writeln(" <td><table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" onmouseover=\"this.style.backgroundColor=\'#F7FCFF\'\" onmouseout=\"this.style.backgroundColor=\'\'\">");
document.writeln(" <tr>");
icon=(!tmp3)?picArr[3]:picArr[1];
document.writeln(" <td width=\"23\"><div align=\"center\" class=\"lev1\"><img src=\""+icon+"\" id=\"cls"+tmpArr2[1]+"_icon\" class=\"icon\" \/><\/div><\/td>");
if (!tmp3){
document.writeln(" <td height=\"20\"><div align=\"left\"><a href=\""+linkArr[ver]+"?clsid="+tmpArr2[1]+"\" id=\"prolink"+tmpArr2[1]+"\" class=\"clslink2\">"+tmpArr2[ver+2]+"</a><\/div><\/td>");
}
else{
document.writeln(" <td height=\"20\"><div align=\"left\"><a href=\"javascript:void(0);\" onclick=\"showSub(\'cls"+tmpArr2[1]+"\');changeIcon(\'cls"+tmpArr2[1]+"_icon\');\" id=\"prolink"+tmpArr2[1]+"\">"+tmpArr2[ver+2]+"</a><\/div><\/td>");
}
document.writeln(" <\/tr>");
document.writeln(" <\/table><\/td>");
document.writeln(" <\/tr>");
document.writeln("<\/table>");
if (!tmp3) continue;
document.writeln("<div id=\"cls"+tmpArr2[1]+"\"class='sub2'>");
for (var k=0;k<tmp3.length;k++)
{
var tmpArr3=tmp3[k].replace(/\${3}/,"").split("||");
tmp4=getSubCls(tmpArr3[1]);
icon=(!tmp4)?picArr[3]:picArr[1];
document.writeln("<table width=\"100%\" align=\"center\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">");
document.writeln(" <tr>");
document.writeln(" <td><table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" onmouseover=\"this.style.backgroundColor=\'#F7FCFF\'\" onmouseout=\"this.style.backgroundColor=\'\'\">");
document.writeln(" <tr>");
document.writeln(" <td width=\"23\"><div align=\"center\" class=\"lev2\"><img src=\""+icon+"\" id=\"cls"+tmpArr2[1]+"_icon\" class=\"icon\" \/><\/div><\/td>");
if (!tmp4){
document.writeln(" <td height=\"20\"><div align=\"left\"><a href=\""+linkArr[ver]+"?clsid="+tmpArr3[1]+"\" id=\"prolink"+tmpArr3[1]+"\" class=\"clslink2\">"+tmpArr3[ver+2]+"</a><\/div><\/td>");
}
else{
document.writeln(" <td height=\"20\"><div align=\"left\"><a href=\"javascript:void(0);\" onclick=\"showSub(\'cls"+tmpArr3[1]+"\');changeIcon(\'cls"+tmpArr3[1]+"_icon\');\" id=\"prolink"+tmpArr3[1]+"\">"+tmpArr3[ver+2]+"</a><\/div><\/td>");
}
document.writeln(" <\/tr>");
document.writeln(" <\/table><\/td>");
document.writeln(" <\/tr>");
document.writeln("<\/table>");
if (!tmp4) continue;
document.writeln("<div id=\"cls"+tmpArr3[1]+"\"class='sub3'>");
for (var m=0;m<tmp4.length;m++)
{
var tmpArr4=tmp4[m].replace(/\${3}/,"").split("||");
tmp5=getSubCls(tmpArr4[1]);
icon=(!tmp5)?picArr[3]:picArr[1];
document.writeln("<table width=\"100%\" align=\"center\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">");
document.writeln(" <tr>");
document.writeln(" <td><table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" onmouseover=\"this.style.backgroundColor=\'#F7FCFF\'\" onmouseout=\"this.style.backgroundColor=\'\'\">");
document.writeln(" <tr>");
document.writeln(" <td width=\"23\"><div align=\"center\" class=\"lev3\"><img src=\""+icon+"\" id=\"cls"+tmpArr2[1]+"_icon\" class=\"icon\" \/><\/div><\/td>");
if (!tmp5){
document.writeln(" <td height=\"20\"><div align=\"left\"><a href=\""+linkArr[ver]+"?clsid="+tmpArr4[1]+"\" id=\"prolink"+tmpArr4[1]+"\" class=\"clslink2\">"+tmpArr4[ver+2]+"</a><\/div><\/td>");
}
else{
document.writeln(" <td height=\"20\"><div align=\"left\"><a href=\"javascript:void(0);\" onclick=\"showSub(\'cls"+tmpArr4[1]+"\');changeIcon(\'cls"+tmpArr4[1]+"_icon\');\" id=\"prolink"+tmpArr4[1]+"\">"+tmpArr4[ver+2]+"</a><\/div><\/td>");
}
document.writeln(" <\/tr>");
document.writeln(" <\/table><\/td>");
document.writeln(" <\/tr>");
document.writeln("<\/table>");
if (!tmp5) continue;
document.writeln("<div id=\"cls"+tmpArr4[1]+"\"class='sub4'>");
for (var n=0;n<tmp5.length;n++)
{
var tmpArr5=tmp5[n].replace(/\${3}/,"").split("||");
icon=picArr[3];
document.writeln("<table width=\"100%\" align=\"center\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">");
document.writeln(" <tr>");
document.writeln(" <td><table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" onmouseover=\"this.style.backgroundColor=\'#F7FCFF\'\" onmouseout=\"this.style.backgroundColor=\'\'\">");
document.writeln(" <tr>");
document.writeln(" <td width=\"23\"><div align=\"center\" class=\"lev4\"><img src=\""+icon+"\" id=\"cls"+tmpArr2[1]+"_icon\" class=\"icon\" \/><\/div><\/td>");
document.writeln(" <td height=\"20\"><div align=\"left\"><a href=\""+linkArr[ver]+"?clsid="+tmpArr5[1]+"\" id=\"prolink"+tmpArr5[1]+"\" class=\"clslink2\">"+tmpArr5[ver+2]+"</a><\/div><\/td>");
document.writeln(" <\/tr>");
document.writeln(" <\/table><\/td>");
document.writeln(" <\/tr>");
document.writeln("<\/table>");
}
document.writeln("</div>");
}
document.writeln("</div>");
}
document.writeln("</div>");
}
document.writeln("</div>");
document.writeln("</div>");
}
}
//保留显示子系列
function keepSubCls()
{
var tmpstr;
var id;
var panel;
if (!clsid.match(/^[1-9]\d*$/)) return;
tmpstr=eval("clsStr.match(/\\${3}(\\d+)\\|{2}"+clsid+"\\|{2}[^$]*/)");
if (!tmpstr) return;
tmpstr=tmpstr.toString();
id=tmpstr.replace(/^\${3}(\d+)\|{2}.*/,"$1")
panel=document.getElementById("cls"+id);
if (!panel) return;
panel.style.display="block";
//改变当前系列的字体样式
//document.getElementById("prolink"+clsid).style.textDecoration="underline";
document.getElementById("prolink"+clsid).style.borderBottom="1px dashed #f60";
while (id>0)
{
tmpstr=eval("clsStr.match(/\\${3}(\\d+)\\|{2}"+id+"\\|{2}[^$]*/)");
if (!tmpstr) return;
tmpstr=tmpstr.toString();
id=tmpstr.replace(/^\${3}(\d+)\|{2}.*/,"$1");
panel=document.getElementById("cls"+id);
if (!panel) return;
panel.style.display="block";
}
}
3、HTML调用代码
<SCRIPT type=text/javascript>
<!--
<%
Response.Write("var clsStr=""")
Set Conn=server.createobject("adodb.connection")
conn.open "driver={microsoft access driver (*.mdb)};dbq="&server.mappath("*.mdb")
Set Rs=Server.CreateObject("Adodb.RecordSet")
Sql="Select * From [Class] Order By ClassRoot Asc"
Rs.Open Sql,Conn,1,1
Do While Not Rs.Eof
Response.Write("$$$"&Rs("ClassRoot")&"||"&Rs("ID")&"||"&rs("ClassName")&"||"&rs("ClassName"))
Rs.MoveNext
Loop
rs.Close
Set rs=Nothing
Conn.Close
Set Conn=Nothing
Response.Write("$$$""")
%>
//var clsStr="$$$0||568||离合器系统||Clutch System$$$0||513||汽车配件||Auto Spare Parts$$$0||514||摩托车配件||Motorcycle Spare Parts$$$0||517||安防产品||Security Products$$$568||718||离合器修理包||Clutch Repair Kit$$$568||569||离合器盖||Clutch Cover$$$533||717||雨刮电机||Wiper Motor$$$529||713||凸轮轴||Camshaft$$$529||712||曲轴||Crankshaft$$$529||711||汽缸垫||Gasket$$$529||710||冷凝器||Condenser$$$529||709||散热器||Radiator$$$529||708||活塞||Piston$$$529||707||化油器||Carburetor$$$529||706||水泵||Water Pump$$$530||705||中控锁||steering wheel lock$$$530||704||方向盘锁||steering wheel lock$$$530||703||方向机||Steering Gear$$$514||700||点火开关||switch kit$$$514||699||刹车片||Brake Pad$$$514||698||启动杆||Kick Starter$$$514||697||连杆||Connection Rod$$$514||696||减震器||Shock Absorber$$$627||695||后视镜||Side Mirror$$$514||694||电子点火器||CDI$$$514||692||碟刹||Dish Brake$$$514||691||油开关||Fuel Cock$$$514||690||气门摇臂||Rocker Arm Valve$$$514||689||整流器||Rectifier$$$514||688||凸轮轴||Camshaft$$$646||687||手把开关||handle switch$$$514||686||刹车蹄块||Brake Shoes$$$514||685||气门导管||Valve Pipe$$$514||684||气门||Valve$$$514||683||启动马达||Starter Motor$$$514||682||轮毂||Hub$$$514||680||火花塞||Spark Plug$$$514||679||活塞||Piston$$$646||678||点火线圈||Ignition Coil$$$514||677||磁电机||Magnet Winding$$$627||671||油箱||Fuel Tank$$$514||670||液压制动器||tray-type hydraulic brake$$$514||669||套锁||Set Lock$$$646||668||尾灯座||Tail Lamp Holder$$$646||667||闪光器||Flasher$$$664||666||后刹车灯开关||Rear Brake Light Switch$$$664||665||前刹车灯开关||Front Brake Light Switch$$$646||664||刹车灯开关||Brake Light Switch$$$654||663||前叉修理包||front arm repair kit$$$657||662||汽油滤清器||Fuel Filter$$$514||661||链轮套件||wheel sprocket set$$$514||660||仪表盘||Speedometer$$$654||659||离合器修理包||clutch repair kit$$$657||658||空气滤清器||Air Filter$$$514||657||滤清器||Filter$$$514||656||火花帽||Spark Plug Cap$$$654||655||化油器修理包||Carburetor Repair Kit$$$514||654||修理包||Repair Kit$$$646||653||大灯座||head light holder$$$646||652||油压传感器||Oil Pressure Switch$$$646||650||全车线||Wire Harness$$$514||649||曲轴总成||Crankshaft Assy$$$514||648||汽缸系列||Cylinder System$$$646||647||启动继电器||Starter Relay$$$514||646||开关电器||Switch and other Electronic parts$$$514||645||减震器||Shock Absorber$$$514||644||化油器||Carburetor$$$627||643||车灯||Lamp$$$514||642||超越离合器||Sprag Clutch$$$627||641||后保险杠||Rear Bumper$$$514||640||刹车杆||Brake Bar$$$514||639||启动杆||Kick Starter$$$514||638||车把||Handle Bar$$$514||637||变速杆||Gear Pedal$$$628||635||其他||Others$$$628||634||Summer||Summer$$$628||633||open face||Open Face$$$628||631||童盔||Kids Helmet$$$628||630||半盔||Half Face$$$628||629||全盔||Full Face$$$627||628||头盔||Helmet$$$514||627||车身件||Body Parts$$$517||626||其他||Others$$$517||625||头盔||Helmet$$$614||624||others||others$$$614||622||LTF2-8000 Series||LTF2-8000 Series$$$614||621||LTF2-6000 Series||LTF2-6000 Series$$$517||617||警示灯||Alarm Light$$$517||616||扬声器||Loudspeaker$$$517||615||警报器||Siren$$$517||614||长排灯||light bar$$$529||613||燃油泵||Fuel Pump$$$610||612||燃油滤清器||Fuel Filter$$$610||611||空气滤清器||Air Filter$$$513||610||滤清器||Filter$$$556||609||雨刮||Wiper Blades$$$531||608||控制臂||Control Arm$$$531||607||拉杆||Tie Rod$$$531||606||转向节||Steering Knuckle$$$531||605||稳定杆||Stabilizer Bar$$$531||604||扭力杆||torsion bar$$$531||602||传动轴||Drive Shaft$$$533||601||电瓶夹||Storage Battery Clamp$$$533||600||水温感应塞||Water Temperature Sensor$$$533||599||调节器||Regulator$$$533||598||刹车灯开关||Stop Light Switch$$$533||597||玻璃升降开关||Power Window Switch$$$533||596||其他||OTHERS$$$533||595||油压开关||Oil Pressure Switch$$$533||594||点火开关||Ignition Switch$$$533||593||连接线||Housing Connector Wire$$$533||592||大灯开关||Head Lamp Switch$$$533||591||组合开关||Combination Switch$$$533||589||点烟开关||Cigarette Lighter Switch$$$532||588||刹车蹄||Brake Shoe$$$532||587||刹车片||Brake Pad$$$532||586||刹车盘||Brake Disc$$$531||585||减震器||Shock Absorber$$$551||584||同步器||Synchronizer Series$$$551||583||差速器||Differential$$$551||581||万向节||Universal Joint$$$551||580||减速器||Reducer Suit$$$551||579||半轴||Axle Shaft$$$551||578||球笼||C.V.JOINT$$$533||577||保险盒||Fuse Box$$$574||576||油式点火线圈||Oil Ignition Coil$$$574||575||干式点火线圈||Dry Ignition Coil$$$533||574||点火线圈||Ignition Coil$$$533||573||闪光器||Flasher$$$568||572||离合器面片||Clutch Facing$$$568||571||分离轴承||Release Bearing$$$568||570||离合器片||Clutch Disc$$$565||567||装饰套件||Decoration Suit$$$556||566||摇手把||Swing Door Handle$$$556||565||其他附件||Accessories$$$560||564||起亚||KIA$$$560||562||现代||HYUNDAI$$$560||561||大宇||DAEWOO$$$556||560||车灯||Car Lamp$$$556||559||观后镜||Rearview Mirror$$$556||557||保险杠和格栅||Bumper and Grille$$$513||556||车身件||Car Body Parts and Accessories$$$513||551||传动系统||Transmission System$$$533||534||继电器||Relay$$$513||533||汽车电子电器||Auto Electronic Parts$$$513||532||制动系统||Brake system$$$513||531||底盘系统||Chassis system$$$513||530||转向系统||Steering system$$$513||529||发动机系统||Engine system$$$514||512||摩托车附件||motorcycle accessories$$$610||498||机油滤清器||OIL FILTER$$$529||494||机油泵||OIL PUMP$$$627||492||油箱||FUEL TANK$$$";
var linkArr=new Array("Seriesproducts.asp","Seriesproducts.asp");
var picArr=new Array("images/arrow_1.gif","images/arrow_1.gif","images/arrow_1.gif","images/arrow_2.gif");
var ver;
//缓存图片
var preload=new Array();
for (var i=0;i<picArr.length;i++)
{
preload[i]=new Image();
preload[i].src=picArr[i];
}
//-->
</SCRIPT>
<DIV style="MARGIN: 0px auto; WIDTH: 98%">
<SCRIPT type=text/javascript>
<!--
listProCLass(1);
//保留当前子系列
var clsid="718"; //clsid可以使用request参数获得
keepSubCls();
//-->
</SCRIPT>
</DIV>
- 相关文章:
发表评论
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。