一步一步教你做三级可折叠树形菜单。
多谢大家帮我做测试
演示例子
[url=http://www.bvbuy.cn/bbss/index.htm]http://www.bvbuy.cn/bbss/index.htm[/url]
所需js 和css 文件请到我的资源里下载
第一步建表bbs_panel1
id panelName panelMsg url
21 开发语言 xx
表bbs_panel2
id pid panelName panelInfo panelSort url
1 21 VC/MFC
2 21 vb
表bbs_panel3
id pid ppid panelName panelInfo panelsort url
1 1 21 基础类
2 1 21 界面
3 1 21 网络编程
第二步嵌套REPEATER
[code=HTML]
<head runat="server">
<title>treeleft</title>
<link rel="stylesheet" href="js/jquery.treeview.css"/>
<link rel="stylesheet" href="js/red-treeview.css"/>
<link rel="stylesheet" href="js/screen.css"/>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.cookie.js" type="text/javascript"></script>
<script src="js/jquery.treeview.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#tree").treeview({
collapsed: true,
animated: "medium",
control:"#sidetreecontrol",
persist: "location"
});
})
$(document).ready(
function()
{
delClass();
});
function delClass()
{
var lis = document.getElementsByTagName('li');
var i;
var length;
for( i=0; i<length;i++)
{
if(lis[i].getElementsByTagName('ul').length == 0)
{
lis[i].setAttribute('class','');
}
}
}
</script>
</head>
<body>
<div id="main"><a href="#"></a>
<div id="sidetree">
<div id="sidetreecontrol"><a href="#">Collapse All</a> | <a href="#">Expand All</a></div>
<ul id="tree" class="treeview">
<asp:Repeater ID="bClass" runat="server" OnItemDataBound="bClassList">
<ItemTemplate>
<li class="expandable"><div class="hitarea expandable-hitarea "></div><a href="Title.aspx?mode=1&id=<%#Eval("id") %>" target="main"><strong><%#Eval("MenuName")%></strong></a>
<ul style="display: none; "><asp:Repeater ID="bsClass" runat="server" OnItemDataBound="bsClassList"><ItemTemplate>
<li class="expandable"> <a href="Title.aspx?mode=2&id=<%#Eval("pid") %>&pid=<%#Eval("id") %>" target="main"><%#Eval("MenuName")%></a>
<ul style="display: none; "> <asp:Repeater ID="sClass" runat="server"><ItemTemplate><li ><a href="Title.aspx?mode=3&id=<%#Eval("ppid") %>&pid=<%#Eval("pid") %>&ppid=<%#Eval("id") %>" target="main"><%#Eval("MenuName")%></a> </li>
</ItemTemplate> </asp:Repeater>
</ul>
</li>
</ItemTemplate></asp:Repeater>
</ul>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
<br style="clear: left" />
</div>
</div>
</body>
[/CODE]
第三步 后台
[code=C#]
private string strbbsType = "2";
private string sql = "";
protected void Page_Load(object sender, EventArgs e)
{
if (Request.QueryString["bbsType"]!=null)
{
strbbsType = Request.QueryString["bbsType"].ToString();
}
if (!IsPostBack)
{
if (strbbsType=="1")
{
sql = "select id,MenuName,url from M_MenuHead where id>0 order by id";
}
else
{
sql = "select id,panelName as MenuName,url from bbs_panel1 ";
}
DataSet rd = new DataSet();
rd = SqlHelper.ExecuteDataset(SqlHelper.Conn2, CommandType.Text, sql);
bClass.DataSource = rd;
bClass.DataBind();
}
}
protected void bClassList(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
string preid = ((DataRowView)e.Item.DataItem).Row["id"].ToString();//获得对应ID
Repeater bsClass = (Repeater)e.Item.FindControl("bsClass");//找到要绑定数据的Repeater
if (bsClass != null)
{
if (strbbsType == "1")
{
sql = "select id,pid,MenuName from M_MenuChildren where pid=" + preid + " ";
}
else
{
sql = "select id,pid,panelName as MenuName from bbs_panel2 where pid=" + preid + " ";
}
DataSet srd = new DataSet();
srd = SqlHelper.ExecuteDataset(SqlHelper.Conn2, CommandType.Text, sql);
bsClass.DataSource = srd;
bsClass.DataBind();
}
}
}
protected void bsClassList(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
string preid = ((DataRowView)e.Item.DataItem).Row["id"].ToString();//获得对应ID
Repeater sClass = (Repeater)e.Item.FindControl("sClass");//找到要绑定数据的Repeater
if (sClass != null)
{if (strbbsType=="1")
{
sql = "select id,pid,ppid,MenuName from M_MenuChildren2 where pid=" + preid + " ";
}
else
{
sql = "select id,pid,ppid,panelName as MenuName from bbs_panel3 where pid=" + preid + " ";
}
DataSet srd = new DataSet();
srd = SqlHelper.ExecuteDataset(SqlHelper.Conn2, CommandType.Text, sql);
//SqlHelper.Conn2是数据库连接字符
sClass.DataSource = srd;
sClass.DataBind();
}
}
}
[/code]
