VerySource

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 804|回复: 5

求ASP.NET读取数据,用js/ajax以树型菜单显示数据!帮忙谢谢~~

[复制链接]

1

主题

2

帖子

3.00

积分

新手上路

Rank: 1

积分
3.00
发表于 2020-3-4 16:30:01 | 显示全部楼层 |阅读模式
请求各位好心人帮忙,谢谢了,小弟比较急!

功能:

动态数据:ASP.NET连接数据库,读取父级,子级目录!2级或则2级以上!
脚本显示:ja/ajax的技术,显示父级菜单/子级菜单,他们可以打开和闭合!

其他:菜单是左侧的树形菜单!
谢谢!



回复

使用道具 举报

0

主题

119

帖子

67.00

积分

新手上路

Rank: 1

积分
67.00
发表于 2020-5-19 10:45:02 | 显示全部楼层
<%@ Page language="c#" Inherits="ch51.Tree" CodeFile="Tree.aspx.cs" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
        <HEAD>
                <title>Tree</title>
                <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
                <meta name="CODE_LANGUAGE" Content="C#">
                <meta name="vs_defaultClientScript" content="JavaScript">
                <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
                <link type="text/css" href="css/tree.css" rel="stylesheet">
        </HEAD>
        <body>
                <form id="Form1" method="post" runat="server">
                        <div class="TreeMenu" id="CategoryTree">
                                <h4>基于Ajax的动态树型菜单</h4>
                        </div>
                        <div id="docContent" style="BORDER-RIGHT: blue 1px solid; BORDER-TOP: blue 1px solid; BORDER-LEFT: blue 1px solid; WIDTH: 600px; BORDER-BOTTOM: blue 1px solid; HEIGHT: 500px">
                                <h2><div id="title" align="center"></div>
                                </h2>
                                <h4><div id="author" align="right"></div>
                                </h4>
                                <iframe width="100%" height="100%" src="about:blank" id="doc" style="BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none">
                                </iframe>
                                <pre><div id="writetime" align=right></div></pre>
                        </div>
                        <div id="docList" style="display:none;BORDER-RIGHT: blue 1px solid; BORDER-TOP: blue 1px solid; BORDER-LEFT: blue 1px solid; WIDTH: 600px; BORDER-BOTTOM: blue 1px solid; HEIGHT: 500px">
                        </div>
                        <script language="jscript">

                        function ExpandSubCategory(iCategoryID)
                        {
                                var li_father = document.getElementById("li_" + iCategoryID);
                                if (li_father.getElementsByTagName("li").length > 0) //分类已下载
                                {
                                        ChangeStatus(iCategoryID);
                                        displayDocList(iCategoryID);
                                        return;
                                }
                               
                                li_father.className = "Opened";
                               
                                switchNote(iCategoryID, true);
                                ch51.Tree.GetSubCategory(iCategoryID, GetSubCategory_callback);                               
                        }
                       
                        function GetSubCategory_callback(response)
                        {
                                var dt = response.value.Tables[0];
                                if (dt.Rows.length > 0)
                                {
                                        var iCategoryID = dt.Rows[0].FatherID;
                                }
                                var li_father = document.getElementById("li_" + iCategoryID);
                                var ul = document.createElement("ul");
                                for (var i = 0;i < dt.Rows.length;i++)
                                {
                                        if (dt.Rows[i].IsChild == 1) //叶子节点
                                        {
                                                var li = document.createElement("li");
                                                li.className = "Child";
                                                li.id = "li_" + dt.Rows[i].CategoryID;
                                               
                                                var img = document.createElement("img");
                                                img.id = dt.Rows[i].CategoryID;
                                                img.className = "s";
                                                img.src = "css/s.gif";
                                               
                                                var a = document.createElement("a");
                                                a.href = "javascript:OpenDocument('" + dt.Rows[i].CategoryID + "');";
                                                a.innerHTML = dt.Rows[i].CategoryName;
                                        }
                                        else
                                        {
                                                var li = document.createElement("li");
                                                li.className = "Closed";
                                                li.id = "li_" + dt.Rows[i].CategoryID;
                                               
                                                var img = document.createElement("img");
                                                img.id = dt.Rows[i].CategoryID;
                                                img.className = "s";
                                                img.src = "css/s.gif";
                                                img.onclick = function () {
                                                        ExpandSubCategory(this.id);
                                                };
                                                img.alt = "展开/折叠";
                                               
                                                var a = document.createElement("a");
                                                a.href = "javascript:ExpandSubCategory(" +
                                                        dt.Rows[i].CategoryID + ");";
                                                a.innerHTML = dt.Rows[i].CategoryName;
                                        }
                                        li.appendChild(img);
                                        li.appendChild(a);
                                        ul.appendChild(li);       
                                }
                                li_father.appendChild(ul);
                               
                                displayDocList(iCategoryID);
                                switchNote(iCategoryID, false);
                       
                        }
                       
                        function OpenDocument(iCategoryID)
                        {
                                var div_docContent = document.getElementById("docContent");
                                var div_docList = document.getElementById("docList");
                               
                                div_docContent.style.display = "";
                                div_docList.style.display = "none";
                               
                                ch51.Tree.GetDocInfo(iCategoryID, GetDocInfo_callback);
                        }
                       
                        function GetDocInfo_callback(response)
                        {
                                var dr = response.value.Tables[0].Rows[0];
                                if (dr)
                                {                               
                                        var div_title = document.getElementById("title");
                                        var div_author = document.getElementById("author");
                                        var div_writetime = document.getElementById("writetime");
                                        var iFrm = document.getElementById("doc");
                                       
                                        div_title.innerHTML = dr.title;
                                        div_author.innerHTML = dr.author;
                                        div_writetime.innerHTML = dr.writetime;
                                        iFrm.src = dr.url;
                                }
                        }
                       
                        function ChangeStatus(iCategoryID)
                        {
                                var li_father = document.getElementById("li_" + iCategoryID);
                                if (li_father.className == "Closed")
                                {
                                        li_father.className = "Opened";
                                }
                                else
                                {
                                        li_father.className = "Closed";
                                }                               
                        }
                       
                        function switchNote(iCategoryID, show)
                        {
                                var li_father = document.getElementById("li_" + iCategoryID);
                                if (show)
                                {
                                        var ul = document.createElement("ul");
                                        ul.id = "ul_note_" + iCategoryID;
                                       
                                        var note = document.createElement("li");
                                        note.className = "Child";
                                       
                                        var img = document.createElement("img");
                                        img.className = "s";
                                        img.src = "css/s.gif";
                                       
                                        var a = document.createElement("a");
                                        a.href = "javascript:void(0);";
                                        a.innerHTML = "请稍候...";
                                       
                                        note.appendChild(img);
                                        note.appendChild(a);
                                        ul.appendChild(note);
                                        li_father.appendChild(ul);
                                }
                                else
                                {
                                        var ul = document.getElementById("ul_note_" + iCategoryID);
                                        if (ul)
                                        {
                                                li_father.removeChild(ul);
                                        }                               
                                }
                        }
                       
                        function displayDocList(iCategoryID)
                        {                               
                                var div_docContent = document.getElementById("docContent");
                                var div_docList = document.getElementById("docList");
                               
                                div_docContent.style.display = "none";
                                div_docList.style.display = "";
                                div_docList.style.padding = 20;
                                while (div_docList.childNodes.length > 0)
                                {
                                        div_docList.removeChild(div_docList.childNodes[0]);
                                }
                               
                                var dt = ch51.Tree.GetDocInfoInCategory(iCategoryID).value.Tables[0];
                                if (dt)
                                {
                                        for (var i = 0;i < dt.Rows.length;i++)
                                        {
                                                var a = document.createElement("a");
                                                a.href = "javascript:OpenDocument(" + dt.Rows[i].CategoryID + ");";
                                                a.innerHTML = "<font color=#1122aa size=2>" + dt.Rows[i].CategoryName + "</font>";
                                               
                                                var li = document.createElement("li");
                                                li.appendChild(a);
                                               
                                                var div = document.createElement("div");
                                                div.appendChild(li);
                                               
                                                div_docList.appendChild(div);
                                        }
                                }
                        }                       
                       
                        // 加载根节点
                        var tree = document.getElementById("CategoryTree");
                        var root = document.createElement("li");
                        root.id = "li_0";
                        tree.appendChild(root);
                       
                        // 加载页面时显示第一级分类
                        ExpandSubCategory(0);
                        </script>
                </form>
        </body>
</HTML>
回复

使用道具 举报

0

主题

119

帖子

67.00

积分

新手上路

Rank: 1

积分
67.00
发表于 2020-5-19 11:45:01 | 显示全部楼层
using System;
using System.Collections;
using System.ComponentModel;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using AjaxPro;

namespace ch51
{
        /// <summary>
        /// Tree 的摘要说明。
        /// </summary>
        public partial class Tree : System.Web.UI.Page
        {
                protected void Page_Load(object sender, System.EventArgs e)
                {
                        // 在此处放置用户代码以初始化页面
                        Utility.RegisterTypeForAjax(typeof(Tree));
                }

                private Random rand = new Random();

                [AjaxMethod()]
                public DataSet GetSubCategory(int iCategoryID)
                {
                        DataSet ds = new DataSet();

                        SqlConnection conn =
                                new SqlConnection(ConfigurationSettings.AppSettings["ConnStr"]);
                        SqlCommand cmd = conn.CreateCommand();                       
                        cmd.CommandText = string.Format("SELECT CategoryID, CategoryName, FatherID, dbo.IsLeaf(CategoryID) as IsChild FROM Category WHERE FatherID = {0}",
                                iCategoryID);
                        SqlDataAdapter da = new SqlDataAdapter(cmd);

                        try
                        {
                                da.Fill(ds);
                        }
                        catch (SqlException)
                        {
                        }
                        finally
                        {
                                conn.Close();
                        }

                        System.Threading.Thread.Sleep(500 + rand.Next(1000));

                        return ds;
                }

                [AjaxMethod()]
                public DataSet GetDocInfo(int iCategoryID)
                {
                        DataSet ds = new DataSet();

                        SqlConnection conn =
                                new SqlConnection(ConfigurationSettings.AppSettings["ConnStr"]);
                        SqlCommand cmd = conn.CreateCommand();                       
                        cmd.CommandText = string.Format(
                                "SELECT id, author, title, convert(varchar(20), writetime, 120) as writetime, url FROM DocInfo WHERE id = {0}", iCategoryID);
                        SqlDataAdapter da = new SqlDataAdapter(cmd);

                        try
                        {
                                da.Fill(ds);
                        }
                        catch (SqlException)
                        {
                        }
                        finally
                        {
                                conn.Close();
                        }

                        return ds;
                }

                [AjaxMethod()]
                public DataSet GetDocInfoInCategory(int iCategoryID)
                {
                        DataSet ds = new DataSet();

                        SqlConnection conn =
                                new SqlConnection(ConfigurationSettings.AppSettings["ConnStr"]);
                        SqlCommand cmd = conn.CreateCommand();                       
                        cmd.CommandText = string.Format(
                                "SELECT CategoryID, CategoryName, FatherID FROM Category WHERE FatherID = {0} AND dbo.IsLeaf(CategoryID) = 1", iCategoryID);
                        SqlDataAdapter da = new SqlDataAdapter(cmd);

                        try
                        {
                                da.Fill(ds);
                        }
                        catch (SqlException)
                        {
                        }
                        finally
                        {
                                conn.Close();
                        }

                        return ds;
                }
                #region Web 窗体设计器生成的代码
                override protected void OnInit(EventArgs e)
                {
                        //
                        // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
                        //
                        InitializeComponent();
                        base.OnInit(e);
                }
               
                /// <summary>
                /// 设计器支持所需的方法 - 不要使用代码编辑器修改
                /// 此方法的内容。
                /// </summary>
                private void InitializeComponent()
                {   

                }
                #endregion
        }
}
回复

使用道具 举报

0

主题

7

帖子

7.00

积分

新手上路

Rank: 1

积分
7.00
发表于 2020-5-19 16:30:01 | 显示全部楼层
楼上的就可以了
回的可真快!
回复

使用道具 举报

1

主题

2

帖子

3.00

积分

新手上路

Rank: 1

积分
3.00
 楼主| 发表于 2020-6-7 15:30:01 | 显示全部楼层
发是发了~不过用不上,有实例的话我才看的懂!
回复

使用道具 举报

0

主题

1

帖子

2.00

积分

新手上路

Rank: 1

积分
2.00
发表于 2020-9-4 22:15:01 | 显示全部楼层
有MVC版的不啊?
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|CopyRight © 2008-2023|verysource.com ( 京ICP备17048824号-1 )

快速回复 返回顶部 返回列表