Ajax的无刷新树型结构

时间：2022-03-09 11:56:48

AjaxTree.aspx

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxTree.aspx.cs" Inherits="AjaxTree" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
<style>
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(images/opened.gif) no-repeat 0 1px;
}
#CategoryTree .Closed img.s
{
    background:url(images/closed.gif) no-repeat 0 1px;
}
#CategoryTree .Child img.s
{
    src:url(images/file.gif) no-repeat 13px 2px;
}

#CategoryTree
{
    float:left;
    width:249px;
    border:1px solid #99BEEF;
    background:#D2E4FC;
    color:inherit;
    margin:3px;
    padding:3px;
    height:600px;
}
</style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <table width=100% cellpadding=0 cellspacing=0 border=0>
        <colgroup>
            <col width=180 />
            <col />
        </colgroup>
        <tr>
            <td>
                <div class="TreeMenu" id="CategoryTree" style="width: 100%; height: 489px">
                </div>
            </td>
            <td>
              
            </td>
        </tr>
    </table>
<script type="text/javascript">
function getID(e){return document.getElementById(e);}
function CrEl(e){return document.createElement(e);}
//初始化树
function TreeInit(){
    var root = CrEl("li");
    root.id = "li_0";
    getID("CategoryTree").appendChild(root);
 AddTreeNode(0);
}
//生成树
function AddTreeNode(pID){
 var r_root = getID("li_" + pID);
 if(getID("img_"+pID)!=null) getID("img_"+pID).src="images/folderopen.gif";
 if(r_root.getElementsByTagName("li").length > 0){
  ShowChildNode(pID);
  return;
 }
 r_root.className = "Opened";
 ShowWait(pID,true);
 AjaxClass.GetTreeDataSet(pID,GetTreeValue)
}
function GetTreeValue(ds){
 ds = ds.value;
 var ul = CrEl("ul");
 var pID = 0;
 if(ds.Tables[0].Rows.length>0) pID = ds.Tables[0].Rows[0]["parentid"];
    var r_root = getID("li_" + pID);
 for(var i=0;i<ds.Tables[0].Rows.length;i++){
  var dr = ds.Tables[0].Rows[i];
  var li = CrEl("li");
  li.id = "li_" + dr["id"];
  var img = CrEl("img");
  img.id = "img_" + dr["id"];
  img.className = "s";
  var a = CrEl("a");
  a.innerHTML = dr["treename"];
  if(dr["childcount"] > 0){
   li.className = "Closed";
   img.src = "images/folder.gif";
   a.href="javascript:AddTreeNode('"+dr["id"]+"');";
  }
  else{
   li.className = "Child";
   img.src = "images/file.gif";
   a.href = dr["url"];
   a.target = "_blank";
  }
  li.appendChild(img);
  li.appendChild(a);
  ul.appendChild(li);
 }
 r_root.appendChild(ul);
 ShowWait(pID,false);
}
//显示等待信息
function ShowWait(pID,f){
 var r_root = getID("li_" + pID);
 if(f){
  var ul = CrEl("ul");
  ul.id = "temp_" + pID;
  var li = CrEl("li");
  var img = CrEl("img");
  var a = CrEl("a");
  li.className = "Child";
  img.className = "s";
  img.src = "images/loading.gif";
  a.href = "javascript:;";
  a.innerHTML = "请稍后...";
  li.appendChild(img);
  li.appendChild(a);
  ul.appendChild(li);
  r_root.appendChild(ul);
 }
 else{
  if(getID("temp_" + pID))
   r_root.removeChild(getID("temp_" + pID));
 }
}
//显示或隐藏子项
function ShowChildNode(pID){
 var r_root = getID("li_" + pID);
 var img = getID("img_" + pID);
 if(r_root.className=="Closed"){
  r_root.className = "Opened";
  img.src = "images/folderopen.gif";
 }
 else{
  r_root.className="Closed";
  img.src = "images/folder.gif";
 }
}
TreeInit();
</script>
    </div>
    </form>
</body>
</html>

 

AjaxTree.aspx.cs

 

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 AjaxTree : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Utility.RegisterTypeForAjax(typeof(AjaxClass));
    }
}

AjaxClass.cs

 

using System;
using System.Data;
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;
using System.Data.SqlClient;

/// <summary>
/// AjaxClass 的摘要说明
/// </summary>
public class AjaxClass
{
 public AjaxClass()
 {
  //
  // TODO: 在此处添加构造函数逻辑
  //
 }
    [AjaxMethod(HttpSessionStateRequirement.ReadWrite)]
    public static DataSet GetTreeDataSet(int iCategoryID)
    {
        string sql = string.Format("SELECT id , treename ,url,parentid, (select count(*) from t_tree where parentid=t.id) as childcount FROM t_tree t WHERE parentid = {0}", iCategoryID);
        return GetDataSet(sql);
    }
    public static string ConnectionString = ConfigurationManager.ConnectionStrings["dbpath"].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;
 }
}

Sql

 

CREATE TABLE [dbo].[T_Tree] (
 [id] [int] IDENTITY (1, 1) NOT NULL ,
 [treename] [varchar] (50) COLLATE Chinese_PRC_CI_AS NULL ,
 [parentid] [int] NULL ,
 [treecode] [varchar] (500) COLLATE Chinese_PRC_CI_AS NULL ,
 [url] [varchar] (200) COLLATE Chinese_PRC_CI_AS NULL
) ON [PRIMARY]

GO

ALTER TABLE [dbo].[T_Tree] ADD
 CONSTRAINT [DF_T_Tree_treename] DEFAULT ('') FOR [treename],
 CONSTRAINT [DF_T_Tree_parentid] DEFAULT (0) FOR [parentid],
 CONSTRAINT [DF_T_Tree_treecode] DEFAULT ('') FOR [treecode],
 CONSTRAINT [DF_T_Tree_url] DEFAULT ('') FOR [url]
GO

标签：

相关文章