实现的效果如下图:
页面代码
下拉框:
<select id="select3" name="select3" οnchange="showlist()">
<option value="-1">--请 选择--</option>
<option value="1">--主题分类--</option>
<option value="2">--体裁分类--</option>
<option value="3">--对象分类--</option>
</select>
下面的分类页面代码:
<table width="80%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr id="zt" style="display:none"> <td align="left"><asp:Literal ID="Literal1" runat="server"></asp:Literal></td> </tr> <tr id="tc" style="display:none"> <td align="left"><asp:Literal ID="Literal2" runat="server"></asp:Literal></td> </tr> <tr id="dx" style="display:none"> <td align="left"><asp:Literal ID="Literal3" runat="server"></asp:Literal></td> </tr> </table> <script language="javascript" type="text/javascript"> function changeShow(str) { if(document.getElementByIdx('sed'+str).style.display == "none") { document.getElementByIdx('sed'+str).style.display = "block"; document.getElementByIdx('topimg'+str).src = "../images/minus.gif"; document.getElementByIdx('topflor'+str).src = "../images/folderopen.gif"; } else { document.getElementByIdx('sed'+str).style.display = "none"; document.getElementByIdx('topimg'+str).src = "../images/plusbottom.gif"; document.getElementByIdx('topflor'+str).src = "../images/folder.gif"; } } function changeShow1(str) { if(document.getElementByIdx('second'+str).style.display == "none") { document.getElementByIdx('second'+str).style.display = "block"; document.getElementByIdx('timg'+str).src = "../images/minus.gif"; document.getElementByIdx('tflor'+str).src = "../images/folderopen.gif"; } else { document.getElementByIdx('second'+str).style.display = "none"; document.getElementByIdx('timg'+str).src = "../images/plusbottom.gif"; document.getElementByIdx('tflor'+str).src = "../images/folder.gif"; } } function changeShow2(str) { if(document.getElementByIdx('secd'+str).style.display == "none") { document.getElementByIdx('secd'+str).style.display = "block"; document.getElementByIdx('tim'+str).src = "../images/minus.gif"; document.getElementByIdx('tfl'+str).src = "../images/folderopen.gif"; } else { document.getElementByIdx('secd'+str).style.display = "none"; document.getElementByIdx('tim'+str).src = "../images/plusbottom.gif"; document.getElementByIdx('tfl'+str).src = "../images/folder.gif"; } } </script> 需要用到的JS代码: <script language="javascript" type="text/javascript"> function showlist() { var o = document.getElementByIdx('select3'); var strValue = o.options[o.options.selectedIndex].value; if(strValue == "1") { document.getElementByIdx('zt').style.display = "block"; document.getElementByIdx('tc').style.display = "none"; document.getElementByIdx('dx').style.display = "none"; } else if(strValue == "2") { document.getElementByIdx('zt').style.display = "none"; document.getElementByIdx('tc').style.display = "block"; document.getElementByIdx('dx').style.display = "none"; } else if(strValue == "-1") { document.getElementByIdx('zt').style.display = "none"; document.getElementByIdx('tc').style.display = "none"; document.getElementByIdx('dx').style.display = "none"; } else { document.getElementByIdx('zt').style.display = "none"; document.getElementByIdx('tc').style.display = "none"; document.getElementByIdx('dx').style.display = "block"; } } </script>
后台数据绑定代码:
1 #region 主题、体裁、服务对象 2 void ztlist() 3 { 4 数据库操作类实例化 ort ; 5 StringBuilder sb = new StringBuilder(); 6 sb.Append("<div class=\"divcd\">"); 7 DataTable dt = ort.ExcuteToDataTable("查询语句"); 8 for (int i = 0; i < dt.Rows.Count; i++) 9 { 10 if (ort.Record("查询语句")> 0) 11 { 12 sb.Append("<div id=\"top" + i.ToString() + "\" class=\"top0\"><img id=\"topimg" + i.ToString() + "\" src=\"../images/plusbottom.gif\" style=\"cursor:hand\" οnclick=\"changeShow('"+i.ToString()+"')\"/><img id=\"topflor" + i.ToString() + "\" src=\"../images/folder.gif\" style=\"cursor:hand\" οnclick=\"changeShow('"+i.ToString()+"')\"/>" + dt.Rows[i]["d_type"].ToString()); 13 sb.Append("<div id=\"sed" + i.ToString() + "\" class=\"sed0\" style=\"display:none\">"); 14 DataTable dts = ort.ExcuteToDataTable("绑定二级目录"); 15 for (int j = 0; j < dts.Rows.Count; j++) 16 { 17 sb.Append("<img src=\"../images/page.gif\" /><a href=\"NewsType.aspx?tid="+dts.Rows[j]["d_id"].ToString()+"\">"+dts.Rows[j]["d_type"].ToString()+"</a><br />"); 18 } 19 sb.Append("</div></div>"); 20 dts.Dispose(); 21 } 22 else 23 { 24 sb.Append("<div id=\"top" + i.ToString() + "\"><img id=\"topimg" + i.ToString() + "\" src=\"../images/minus.gif\" style=\"cursor:hand\"/><img id=\"topflor"+i.ToString()+"\" src=\"../images/folder.gif\" style=\"cursor:hand\"/><a href=\"NewsType.aspx?oid="+dt.Rows[i]["d_id"].ToString()+"\">" + dt.Rows[i]["d_type"].ToString()+"</a></div>"); 25 } 26 } 27 dt.Dispose(); 28 Literal1.Text = sb.ToString(); 29 ort = null; 30 } 31 void tclist() 32 { 33 实例化数据库操作类 ort ; 34 StringBuilder sb = new StringBuilder(); 35 sb.Append("<div class=\"divcd\">"); 36 DataTable dt = ort.ExcuteToDataTable("查询语句"); 37 for (int i = 0; i < dt.Rows.Count; i++) 38 { 39 if (ort.Record("查询二级目录(同上)") > 0) 40 { 41 sb.Append("<div id=\"first" + i.ToString() + "\" class=\"top0\"><img id=\"timg" + i.ToString() + "\" src=\"../images/plusbottom.gif\" style=\"cursor:hand\" οnclick=\"changeShow1('" + i.ToString() + "')\"/><img id=\"tflor" + i.ToString() + "\" src=\"../images/folder.gif\" style=\"cursor:hand\" οnclick=\"changeShow1('" + i.ToString() + "')\"/>" + dt.Rows[i]["g_type"].ToString()); 42 sb.Append("<div id=\"second" + i.ToString() + "\" class=\"sed0\" style=\"display:none\">"); 43 DataTable dts = ort.ExcuteToDataTable("绑定二级目录"); 44 for (int j = 0; j < dts.Rows.Count; j++) 45 { 46 sb.Append("<img src=\"../images/page.gif\" /><a href=\"NewsType.aspx?ttid=" + dts.Rows[j]["g_id"].ToString() + "\">" + dts.Rows[j]["g_type"].ToString() + "</a><br />"); 47 } 48 sb.Append("</div></div>"); 49 dts.Dispose(); 50 } 51 else 52 { 53 sb.Append("<div id=\"first" + i.ToString() + "\"><img id=\"timg" + i.ToString() + "\" src=\"../images/minus.gif\" style=\"cursor:hand\"/><img id=\"tflor" + i.ToString() + "\" src=\"../images/folder.gif\" style=\"cursor:hand\"/><a href=\"NewsType.aspx?toid=" + dt.Rows[i]["g_id"].ToString() + "\">" + dt.Rows[i]["g_type"].ToString() + "</a></div>"); 54 } 55 } 56 dt.Dispose(); 57 Literal2.Text = sb.ToString(); 58 ort = null; 59 } 60 void fwlist() 61 { 62 实例化数据库操作类 ort ; 63 StringBuilder sb = new StringBuilder(); 64 sb.Append("<div class=\"divcd\">"); 65 DataTable dt = ort.ExcuteToDataTable("查询语句"); 66 for (int i = 0; i < dt.Rows.Count; i++) 67 { 68 if (ort.Record("查询语句(同上)") > 0) 69 { 70 sb.Append("<div id=\"fit" + i.ToString() + "\" class=\"top0\"><img id=\"tim" + i.ToString() + "\" src=\"../images/plusbottom.gif\" style=\"cursor:hand\" οnclick=\"changeShow2('" + i.ToString() + "')\"/><img id=\"tfl" + i.ToString() + "\" src=\"../images/folder.gif\" style=\"cursor:hand\" οnclick=\"changeShow2('" + i.ToString() + "')\"/>" + dt.Rows[i]["s_type"].ToString()); 71 sb.Append("<div id=\"secd" + i.ToString() + "\" class=\"sed0\" style=\"display:none\">"); 72 DataTable dts = ort.ExcuteToDataTable("绑定二级目录"); 73 for (int j = 0; j < dts.Rows.Count; j++) 74 { 75 sb.Append("<img src=\"../images/page.gif\" /><a href=\"NewsType.aspx?ftid=" + dts.Rows[j]["s_id"].ToString() + "\">" + dts.Rows[j]["s_type"].ToString() + "</a><br />"); 76 } 77 sb.Append("</div></div>"); 78 dts.Dispose(); 79 } 80 else 81 { 82 sb.Append("<div id=\"fit" + i.ToString() + "\"><img id=\"tim" + i.ToString() + "\" src=\"../images/minus.gif\" style=\"cursor:hand\"/><img id=\"tfl" + i.ToString() + "\" src=\"../images/folder.gif\" style=\"cursor:hand\"/><a href=\"NewsType.aspx?foid=" + dt.Rows[i]["s_id"].ToString() + "\">" + dt.Rows[i]["s_type"].ToString() + "</a></div>"); 83 } 84 } 85 dt.Dispose(); 86 Literal3.Text = sb.ToString(); 87 ort = null; 88 } 89 #endregion
目前做的这个只支持二级目录,如果有兴趣的话,可以进行改造。