Ask ASP.NET to read the data, use js / ajax to display the data in a tree menu! Thank you for your help ~~

leongl

I ask all kind people to help, thank you, my brother is more anxious!

Features:

Dynamic data: ASP.NET connects to the database and reads the parent and child directories! Level 2 or above!
Script display: ja / ajax technology, show parent menu / child menu, they can be opened and closed!

Other: The menu is a tree menu on the left!
Thank you!

苹果小刀

<% @ 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> Dynamic tree menu based on 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) // The category has been downloaded
{
ChangeStatus (iCategoryID);
displayDocList (iCategoryID);
return;
}
The
li_father.className = "Opened";
The
switchNote (iCategoryID, true);
ch51.Tree.GetSubCategory (iCategoryID, GetSubCategory_callback);
}
The
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) // leaf node
{
var li = document.createElement ("li");
li.className = "Child";
li.id = "li_" + dt.Rows [i] .CategoryID;
The
var img = document.createElement ("img");
img.id = dt.Rows [i] .CategoryID;
img.className = "s";
img.src = "css / s.gif";
The
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;
The
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 = "Expand / collapse";
The
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);
The
displayDocList (iCategoryID);
switchNote (iCategoryID, false);
The
}
The
function OpenDocument (iCategoryID)
{
var div_docContent = document.getElementById ("docContent");
var div_docList = document.getElementById ("docList");
The
div_docContent.style.display = "";
div_docList.style.display = "none";
The
ch51.Tree.GetDocInfo (iCategoryID, GetDocInfo_callback);
}
The
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");
The
div_title.innerHTML = dr.title;
div_author.innerHTML = dr.author;
div_writetime.innerHTML = dr.writetime;
iFrm.src = dr.url;
}
}
The
function ChangeStatus (iCategoryID)
{
var li_father = document.getElementById ("li_" + iCategoryID);
if (li_father.className == "Closed")
{
li_father.className = "Opened";
}
else
{
li_father.className = "Closed";
}
}
The
function switchNote (iCategoryID, show)
{
var li_father = document.getElementById ("li_" + iCategoryID);
if (show)
{
var ul = document.createElement ("ul");
ul.id = "ul_note_" + iCategoryID;
The
var note = document.createElement ("li");
note.className = "Child";
The
var img = document.createElement ("img");
img.className = "s";
img.src = "css / s.gif";
The
var a = document.createElement ("a");
a.href = "javascript: void (0);";
a.innerHTML = "Please wait ...";
The
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);
}
}
}
The
function displayDocList (iCategoryID)
{
var div_docContent = document.getElementById ("docContent");
var div_docList = document.getElementById ("docList");
The
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]);
}
The
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>";
The
var li = document.createElement ("li");
li.appendChild (a);
The
var div = document.createElement ("div");
div.appendChild (li);
The
div_docList.appendChild (div);
}
}
}
The
// Load the root node
var tree = document.getElementById ("CategoryTree");
var root = document.createElement ("li");
root.id = "li_0";
tree.appendChild (root);
The
// Display the first level classification when loading the page
ExpandSubCategory (0);
</ script>
</ form>
</ body>
</ HTML>

苹果小刀

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>
/// Summary description of Tree.
/// </ summary>
public partial class Tree: System.Web.UI.Page
{
protected void Page_Load (object sender, System.EventArgs e)
{
// Place user code here to initialize the page
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 form designer generated code
override protected void OnInit (EventArgs e)
{
//
// CODEGEN: This call is necessary for ASP.NET Web Form Designer.
//
InitializeComponent ();
base.OnInit (e);
}
The
/// <summary>
/// The designer supports the required method-do not use the code editor to modify
/// The content of this method.
/// </ summary>
private void InitializeComponent ()
{

}
#endregion
}
}

royhau

Upstairs is all you need
It's really fast!

leongl

The hair is sent~ But it is not used, I only understand if there are examples!

shaka_nyf

Is there an MVC version?