求asp+ajax做的无限极树形。

如标题所问,本人需要个asp+ajax做的无限极树形,点击节点读取下级目录。要可以添加修改删除。最好是有现成的文件和库,网上找了好多都是一小段实例,本人水平有限改起来很困难。感谢!

采用chatgpt:
当涉及到无限级树形结构以及增删改查等操作时,通常需要在后端使用数据库来存储数据,并通过前端的 AJAX 请求与后端进行交互。ASP.NET提供了多种技术来实现这个功能,包括使用ASP.NET Web Forms、ASP.NET MVC或ASP.NET Core等。

以下是一个简单的示例,使用ASP.NET Web Forms和AJAX来实现无限级树形结构:

首先,创建一个数据库表来存储树形结构的节点信息。表结构示例如下:

CREATE TABLE TreeNodes (
    ID INT PRIMARY KEY,
    Name NVARCHAR(100),
    ParentID INT
);

接下来,创建一个名为"Tree.aspx"的Web Forms页面,页面结构如下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>无限级树形</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            loadTree();

            function loadTree() {
                $.ajax({
                    url: "TreeHandler.ashx",
                    method: "GET",
                    dataType: "json",
                    success: function (data) {
                        buildTree(data, $('#tree'));
                    },
                    error: function (xhr, status, error) {
                        console.log(error);
                    }
                });
            }

            function buildTree(nodes, container) {
                container.empty();
                $.each(nodes, function (index, node) {
                    var listItem = $('<li>');
                    var expandIcon = $('<span class="expand-icon">');
                    var nodeLink = $('<a href="#" class="node-link">').text(node.Name);

                    expandIcon.click(function () {
                        if (node.Children.length > 0) {
                            toggleChildren(expandIcon, listItem);
                        }
                    });

                    nodeLink.click(function () {
                        if (node.Children.length > 0 && !listItem.hasClass('expanded')) {
                            toggleChildren(expandIcon, listItem);
                        }
                    });

                    listItem.append(expandIcon);
                    listItem.append(nodeLink);
                    container.append(listItem);

                    if (node.Children.length > 0) {
                        var childrenContainer = $('<ul class="nested">');
                        listItem.append(childrenContainer);
                        buildTree(node.Children, childrenContainer);
                    }
                });
            }

            function toggleChildren(expandIcon, listItem) {
                listItem.toggleClass('expanded');
                expandIcon.toggleClass('expanded');

                var childrenContainer = listItem.children('.nested');
                childrenContainer.slideToggle();
            }
        });
    </script>
    <style>
        .expand-icon {
            cursor: pointer;
            padding-right: 5px;
        }

        .expanded:before {
            content: "-";
        }

        .nested {
            display: none;
            list-style-type: none;
            padding-left: 20px;
        }
    </style>
</head>
<body>
    <ul id="tree"></ul>
</body>
</html>

在上述示例中,使用了jQuery库来简化AJAX请求和DOM操作。通过AJAX请求"TreeHandler.ashx"来获取树形节点数据,并构建树形结构。

接下来,创建一个名为"TreeHandler.ashx"的ASHX处理程序,用于处理AJAX请求并返回树形节点数据。处理程序代码如下:

<%@ WebHandler Language="C#" Class="TreeHandler" %>

using System;
using System.Collections.Generic;
using System.Web;
using System.Data.SqlClient;
using System.Configuration;
using System.Web.Script.Serialization;

public class TreeHandler : IHttpHandler {

    public void ProcessRequest (HttpContext context) {
        string connectionString = ConfigurationManager.ConnectionStrings["YourConnectionString"].ConnectionString;
        List<Node> nodes = GetNodes(connectionString);

        JavaScriptSerializer serializer = new JavaScriptSerializer();
        string json = serializer.Serialize(nodes);

        context.Response.ContentType = "application/json";
        context.Response.Write(json);
    }

    public bool IsReusable {
        get {
            return false;
        }
    }

    private List<Node> GetNodes(string connectionString) {
        List<Node> nodes = new List<Node>();

        using (SqlConnection connection = new SqlConnection(connectionString)) {
            connection.Open();

            SqlCommand command = new SqlCommand("SELECT ID, Name, ParentID FROM TreeNodes", connection);
            SqlDataReader reader = command.ExecuteReader();

            Dictionary<int, Node> nodeDictionary = new Dictionary<int, Node>();

            while (reader.Read()) {
                int id = Convert.ToInt32(reader["ID"]);
                string name = reader["Name"].ToString();
                int parentID = Convert.ToInt32(reader["ParentID"]);

                Node node = new Node {
                    ID = id,
                    Name = name,
                    Children = new List<Node>()
                };

                nodeDictionary[id] = node;

                if (parentID == 0) {
                    nodes.Add(node);
                }
                else {
                    Node parentNode = nodeDictionary[parentID];
                    parentNode.Children.Add(node);
                }
            }

            reader.Close();
        }

        return nodes;
    }

private class Node {
        public int ID { get; set; }
        public string Name { get; set; }
        public List<Node> Children { get; set; }
    }
}

在上述处理程序中,首先从数据库中获取节点数据,并构建成嵌套的节点列表。然后使用JavaScriptSerializer将节点列表序列化为JSON字符串,并作为响应返回。

请确保将代码中的"YourConnectionString"替换为您的数据库连接字符串,以及根据您的实际表结构进行相应的修改。

这个示例提供了一个基本的无限级树形结构,点击节点会展开其子节点(如果有的话)。您可以根据需要进一步扩展和自定义该示例,以满足您的具体要求,比如添加修改删除功能等。


首先,你需要以下几个文件:

index.asp:用于显示树形结构的页面。
tree.asp:用于处理AJAX请求的页面。
treeData.asp:用于获取树形数据的页面。
addNode.asp:用于添加节点的页面。
updateNode.asp:用于更新节点的页面。
deleteNode.asp:用于删除节点的页面。
下面是一个简单的示例代码:

index.asp:

html
Copy Code
<!DOCTYPE html>
<html>
<head>
    <title>无限极树形结构</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            // 页面加载完成后,向tree.asp发送GET请求以获取根节点数据
            $.get("tree.asp", function(data) {
                $("#tree").html(data);
            });
            
            // 监听节点的点击事件
            $(document).on("click", ".node", function() {
                var nodeId = $(this).attr("id");
                
                // 向tree.asp发送POST请求,传递被点击节点的ID
                $.post("tree.asp", { nodeId: nodeId }, function(data) {
                    $("#" + nodeId).after(data);  // 在被点击的节点后插入返回的子节点
                    $("#" + nodeId).toggleClass("collapsed");  // 切换节点的展开/折叠状态
                });
            });
        });
    </script>
    <style>
        .collapsed:before {
            content: "+ ";
        }
        
        .expanded:before {
            content: "- ";
        }
    </style>
</head>
<body>
    <h1>无限极树形结构</h1>
    <div id="tree"></div>
</body>
</html>
tree.asp:

Copy Code
<%
    Dim nodeId
    nodeId = Request("nodeId")
    
    ' 判断是否有传递节点ID,如果有,则发送GET请求获取子节点数据
    If nodeId <> "" Then
        Dim url
        url = "treeData.asp?parentId=" & nodeId
        
        Dim xmlhttp
        Set xmlhttp = CreateObject("MSXML2.XMLHTTP")
        xmlhttp.Open "GET", url, False
        xmlhttp.Send
        
        Response.Write xmlhttp.responseText
    End If
%>
treeData.asp:

Copy Code
<%
    Dim parentId
    parentId = Request("parentId")
    
    ' 根据需要,从数据库或其他数据源获取子节点数据
    ' 这里只是一个示例,返回了一些硬编码的数据
    
    Dim childNodes
    Set childNodes = Server.CreateObject("Scripting.Dictionary")
    childNodes.Add parentId & "_1", "Child Node 1 of " & parentId
    childNodes.Add parentId & "_2", "Child Node 2 of " & parentId
    childNodes.Add parentId & "_3", "Child Node 3 of " & parentId
    
    Dim nodeId
    For Each nodeId in childNodes
%>
        <div id="<%= nodeId %>" class="node collapsed"><%= childNodes(nodeId) %></div>
<%
    Next
%>
addNode.asp:

Copy Code
<%
    Dim parentId, nodeName
    parentId = Request("parentId")
    nodeName = Request("nodeName")
    
    ' 根据需要,在数据库或其他数据源中添加新节点
    ' 这里只是一个示例,只输出一条消息
    
    Response.Write "New node added: " & nodeName & ", parent ID: " & parentId
%>
updateNode.asp:

Copy Code
<%
    Dim nodeId, newNodeName
    nodeId = Request("nodeId")
    newNodeName = Request("newNodeName")
    
    ' 根据需要,更新数据库或其他数据源中的节点名称
    ' 这里只是一个示例,只输出一条消息
    
    Response.Write "Node updated: " & nodeId & ", new name: " & newNodeName
%>
deleteNode.asp:

Copy Code
<%
    Dim nodeId
    nodeId = Request("nodeId")
    
    ' 根据需要,从数据库或其他数据源中删除节点
    ' 这里只是一个示例,只输出一条消息
    
    Response.Write "Node deleted: " & nodeId
%>

无限级的树,看你是怎么保存了,xml,json,或者数据库,不同的保存方式,有不同的写法

asp 不是关键,ajax 请求的时候带上父节点信息,读当前节点子节点信息即可

参考 https://juejin.cn/post/6844903715648831495

参考:https://download.csdn.net/download/weixin_38630853/18503113