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

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());



    }