如标题所问,本人需要个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