动态生成菜单怎么弄啊??

xhh_net 2009-12-15 10:44:16
我想实现这样的

我数据库中有两个表 一个分类表,一个分类下的成员表
type表
ID Name
1 网站开发
2 数据库

data表
ID Name TypeID
1 前台 1
2 后台 1
3 sql2005 2
4 sql2000 2

在前台页面要动态生成菜单,想下面这样的效果
1.首先是生成分类
网站开发
数据库

2.点网站开发后
网站开发
前台
后台
数据库

3.点数据库后 网站开发折叠
网站开发
数据库
sql2005
sql2000



怎样用 ajax/jquery实现啊!

我有个思路 ,就是先获得分类信息,当点击某个分类信息后,然后通过ajax去获得该分类信息下的数据,然后再通过css+javascrpt来控制他们。但代码不知道怎么写??

...全文
107 点赞 收藏 9
写回复
9 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
exiori 2009-12-17
没有效果JS代码不对吧。
回复
xhh_net 2009-12-17

//AJAX读取所有数据
function AjaxLoadAll(id, url) {
$("#" + id).html("请稍等,正在加载……");
$.ajax({
type: "POST",
url: url,
async: false,
success: function(data) {
$("#" + id).html(data);
}
});
刚改好,就是不让ajax异步运行。完全接受后台拼出的菜单后就可以了。
我想过程是这样的吧!第一步:页面加载。 第二步:执行 AjaxInfo("navigation","test.aspx")从后台获得数据。如果是异步的话,在数据没有接受完全时,可能会执行 $("h3").click(function() {
$(this).next(".menu").slideToggle("slow");
$(this).siblings("h3").next(".menu").hide("slow");
});
这个事件,但我们的数据不完全,这个事件不能被正确初始化。即使最后数据得到完全,但也不能正确显示效果。 所以我该成同步后,就可以了。

也不知道是不是这个原因
回复
chenyunkun2008 2009-12-16
现在也在学习这个,共同进步吧
回复
xuefeng_zzg 2009-12-16
用TreeView
回复
Lovely_baby 2009-12-16
看了一下你的需求
TreeView是完全能实现的~~

不知道你使用ajax/jquery有什么意义
回复
wanghao3616 2009-12-16
ajax动态菜单 google一下
回复
eleven~ 2009-12-16
用TreeView不是很好么。
回复
xhh_net 2009-12-16

<head>
<title>无标题页</title>
<script type="text/javascript" language="javascript" src="JS/jquery-1.3.2.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
$("h3").click(function() {
$(this).next(".menu").slideToggle("slow");
$(this).siblings("h3").next(".menu").hide("slow");
});
});
</script>
<style type="text/css">
h3
{
cursor: pointer; 如果是静态的页面测试可以实现菜单的这点展开
}
网站建设 网站建设
</style> 前台 数 据 库
</head> 后台 sql2005
<body> 数 据 库 sql2000
<div id="navigation">
<h3>网站建设</h3>
<ul class="menu">
<li><a href="#">前台</a></li>
<li><a href="#">后台</a></li>
</ul>
<h3>数据库</h3>
<ul class="menu">
<li><a href="#">sql2005</a></li>
<li><a href="#">sql2000</a></li>
</ul>

</div>
</body>
</html>


后来我想用ajax+jquery实现

<head>
<title>无标题页</title>
<script type="text/javascript" language="javascript" src="JS/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
//详情
function AjaxInfo(id, url) {
AjaxLoadAll(id, url);
}

//AJAX读取所有数据
function AjaxLoadAll(id, url) {
$("#" + id).html("请稍等,正在加载……");
$.ajax({
type: "POST",
url: url,
success: function(data) {
$("#" + id).html(data);
}
});
}
$(document).ready(function() {
AjaxInfo("navigation","test.aspx");
$("h3").click(function() {
$(this).next(".menu").slideToggle("slow");
$(this).siblings("h3").next(".menu").hide("slow");
});
});
</script>
<style type="text/css">
h3
{
cursor: pointer;
}

</style>
</head>
<body>
<div id="navigation">
</div>
</body>
</html>


test.aspx页面代码

string connectStr = @"server=.;database=Menum;uid=sa;pwd=123";
protected void Page_Load(object sender, EventArgs e)
{
BindMenum();
}

protected void BindMenum() 我数据库有两个表
{ Type表 data表
StringBuilder str = new StringBuilder(); ID Name ID Name TypeID
SqlDataReader sdr = BindType();
while (sdr.Read())
{
str.Append("<h3>");
str.Append(sdr["Name"]);
str.Append("</h3>");
DataTable dt = BindTypeData(sdr["ID"].ToString());
str.Append("<ul class=\"menu\" >");
foreach (DataRowView dr in dt.DefaultView)
{
str.Append("<li><a href=\"#\">");
str.Append(dr["Name"]);
str.Append("</a></li>");
}
str.Append("</ul>");
}
sdr.Close();
Response.Write(str.ToString());

}


结果是: 结果显示正常,但是却不能应用“菜单效果”;
对juqery刚看两天!不知道那个地方出错了.

回复
xhh_net 2009-12-16
treeView我会弄!想学习学习 ajax。一同进步
回复
相关推荐
发帖
.NET技术社区
创建于2007-09-28

5.8w+

社区成员

.NET技术交流专区
申请成为版主
帖子事件
创建了帖子
2009-12-15 10:44
社区公告
暂无公告