<Script language = "jscript">
Function El (ID)
{
Return document. getelementbyid (ID );
}
Function expandsubcategory (icategoryid)
{
VaR li_father = El ("Li _" + icategoryid );
If (li_father.getelementsbytagname ("Li"). length> 0) // category downloaded
{
Changestatus (icategoryid );
Return;
}
Li_father.classname = "opened ";
Switchnote (icategoryid, true );
Ajaxmethod. 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 = El ("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;
VaR IMG = Document. createelement ("IMG ");
IMG. ID = DT. Rows [I]. categoryid;
IMG. classname = "S ";
IMG. src = ".../../styles/tree_css/s.gif ";
VaR A = Document. createelement ("");
VaR id = DT. Rows [I]. categoryid;
A. onmouseover = function ()
{
Previewimage (ID );
};
A. href = "Java Script: 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 = ".../../styles/tree_css/s.gif ";
IMG. onclick = function (){
Expandsubcategory (this. ID );
};
IMG. Alt = "Expand/collapse ";
VaR A = Document. createelement ("");
A. href = "Java Script: expandsubcategory (" +
DT. Rows [I]. categoryid + ");";
A. innerhtml = DT. Rows [I]. categoryname;
}
Li. appendchild (IMG );
Li. appendchild ();
Ul. appendchild (LI );
}
Li_father.appendchild (UL );
Switchnote (icategoryid, false );
}
// Click the response function of the leaf node
Function opendocument (icategoryid)
{
// Pre-load information
Preloadformurl (icategoryid );
}
Function previewimage (icategoryid)
{
}
Function changestatus (icategoryid)
{
VaR li_father = El ("Li _" + icategoryid );
If (li_father.classname = "closed ")
{
Li_father.classname = "opened ";
}
Else
{
Li_father.classname = "closed ";
}
}
Function switchnote (icategoryid, show)
{
VaR li_father = El ("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 = ".../../styles/tree_css/s.gif ";
VaR A = Document. createelement ("");
A. href = "Java Script: void (0 );";
A. innerhtml = "Please wait ";
Note. appendchild (IMG );
Note. appendchild ();
Ul. appendchild (note );
Li_father.appendchild (UL );
}
Else
{
VaR ul = El ("ul_note _" + icategoryid );
If (UL)
{
Li_father.removechild (UL );
}
}
}
// Load the root node
VaR tree = El ("categorytree ");
VaR root = Document. createelement ("Li ");
Root. ID = "li_0 ";
Tree. appendchild (Root );
// The first category is displayed when the page is loaded.
Expandsubcategory (0 );
Function preloadformurl (icategoryid)
{
// Synchronously call to obtain image information
VaR DS = ajaxmethod. getformslist (icategoryid). value;
// If a result is returned
If (DS)
{
// Judge whether the data table is not empty
If (Ds. Tables [0]. Rows. length> 0)
{
// Returned information data table
Dt = Ds. Tables [0];
El ("Furl"). src = DT. Rows [0]. formurl;
}
Else // No under category
{
}
}
}
</SCRIPT>
</Form>
</Body>
</Html>
2. CS code
Using system;
Using system. Data;
Using system. configuration;
Using system. collections;
Using system. Web;
Using system. Web. Security;
Using system. Web. UI;
Using system. Web. UI. webcontrols;
Using system. Web. UI. webcontrols. webparts;
Using system. Web. UI. htmlcontrols;
Using ajaxpro;
Public partial class pages_home_homepage: system. Web. UI. Page
{
Protected void page_load (Object sender, eventargs E)
{
Utility. registertypeforajax (typeof (ajaxmethod ));
}
}
3.create a CSS style for tree.css
A
{}{
Text-Decoration: none;
}
A, A: visited
{}{
Color: #000;
Background: Inherit;
}
Body
{}{
Margin: 0;
Padding: 20px;
Font: 12px tahoma,, sans-serif;
}
DT
{}{
Font-size: 22px;
Font-weight: bold;
Margin: 0 0 0 15px;
}
Dd
{}{
Margin: 0 0 0 15px;
}
H4
{}{
Margin: 0;
Padding: 0;
Font-size: 18px;
Text-align: center;
}
P
{}{
Margin: 0;
Padding: 0 0 0 18px;
}
P a, p a: visited
{}{
Color: # 00f;
Background: Inherit;
}
. Treemenu IMG. s
{}{
Cursor: hand;
Vertical-align: middle;
}
. Treemenu ul
{}{
Padding: 0;
}
. Treemenu Li
{}{
List-style: none;
Padding: 0;
}
. Closed ul
{}{
Display: none;
}
. Child IMG. s
{}{
Background: none;
Cursor: default;
}
# Categorytree ul
{}{
Margin: 0 0 0 17px;
}
# Categorytree IMG. s
{}{
Width: 34px;
Height: 18px;
}
# Categorytree. Opened IMG. s
{}{
Background: URL (skin3/opened.gif) No-repeat 0 1px;
}
# Categorytree. Closed IMG. s
{}{
Background: URL (skin3/closed.gif) No-repeat 0 1px;
}
# Categorytree. Child IMG. s
{}{
Background: URL (skin3/child.gif) No-repeat 13px 2px;
}
# Categorytree
{}{
Float: left;
Width: 249px;
Border: 1px solid #99 beef;
Background: # d2e4fc;
Color: Inherit;
Margin: 3px;
Padding: 3px;
Height: 600px;
}
4. Create a class ajaxmethod
Using system;
Using system. Data;
Using system. Data. sqlclient;
Using system. configuration;
Using system. Web;
Using system. Web. Security;
Using system. Web. UI;
Using system. Web. UI. webcontrols;
Using system. Web. UI. webcontrols. webparts;
Using system. Web. UI. htmlcontrols;
Using ajaxpro;
/** // <Summary>
/// Summary description for ajaxmethod
/// </Summary>
Public class ajaxmethod
{}{
Public ajaxmethod ()
{
//
// Todo: Add constructor logic here
//
}
[Ajaxmethod (httpsessionstaterequirement. readwrite)]
Public static dataset getsubcategory (INT icategoryid)
{}{
String SQL = string. Format ("select categoryid, categoryname, fatherid, DBO. isleaf (categoryid) as ischild from category where fatherid = {0}", icategoryid );
Return getdataset (SQL );
}
[Ajaxmethod (httpsessionstaterequirement. readwrite)]
Public static dataset getformslist (INT icategoryid)
{}{
String SQL = string. Format ("select * From forms where form_category_id = {0}", icategoryid );
Return getdataset (SQL );
}
Public static string connectionstring = configurationsettings. etettings ["connectionstring"]. tostring ();
Public static dataset getdataset (string SQL)
{}{
Sqldataadapter SDA = new sqldataadapter (SQL, connectionstring );
Dataset DS = new dataset ();
SDA. Fill (DS );
If (Ds! = NULL)
Return Ds;
Else
Return NULL;
}
}
5. SQL script
If exists (select * From DBO. sysobjects where id = object_id (n' [DBO]. [category] ') and objectproperty (ID, n'isusertable') = 1)
Drop table [DBO]. [category]
Go
If exists (select * From DBO. sysobjects where id = object_id (n' [DBO]. [forms] ') and objectproperty (ID, n'isusertable') = 1)
Drop table [DBO]. [forms]
Go
Create Table [DBO]. [category] (
[Categoryid] [int] identity (1, 1) not null,
[Categoryname] [varchar] (20) Collate chinese_prc_ci_as null,
[Fatherid] [int] Null
) On [primary]
Go
Create Table [DBO]. [forms] (
[Formid] [int] identity (1, 1) not null,
[Formname] [nvarchar] (50) Collate chinese_prc_ci_as null,
[Formurl] [nvarchar] (50) Collate chinese_prc_ci_as null,
[Form_category_id] [int] Null,
[Target] [char] (10) Collate chinese_prc_ci_as null
) On [primary]
Go
Create Function isleaf (@ cat_id INT)
Returns int
Begin
Declare @ count int
Select @ COUNT = (select count (*) from category where fatherid = @ cat_id)
If (@ COUNT = 0)
Return 1
Return 0
End
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
