Ajax實現無刷新樹


          1.建立一個aspx頁面
          html代碼
          <html xmlns="http://www.w3.org/1999/xhtml" >
          <head id="Head1" runat="server">
              <title>小山</title>
              <link type="text/css" href="../../Styles/tree_css/tree.css" rel="stylesheet">
          </head>
          <body>
              <form id="Form1" runat="server">
              <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>
                          <iframe id=furl height=20 style="height: 497px; width: 100%;"></iframe>
                      </td>
                  </tr>
              </table>    
                                      
                      <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) //分類已下載
                          {
                              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) //葉子節點
                              {
                                  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("a");
                                  var id = dt.Rows[i].CategoryID;
                                  a.onmouseover = function()
                                  {
                                      PreviewImage(id);
                                  };
                                  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;
                                  
                                  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 = "展開/折疊";
                                  
                                  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);
                          
                          switchNote(iCategoryID, false);
                      }
                      
                      // 葉子節點的單擊響應函數
                      function OpenDocument(iCategoryID)
                      {
                          // 預加載信息
                          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");
                              a.href = "javascript:void(0);";
                              a.innerHTML = "請稍候";
                              
                              note.appendChild(img);
                              note.appendChild(a);
                              ul.appendChild(note);
                              li_father.appendChild(ul);
                          }
                          else
                          {
                              var ul = el("ul_note_" + iCategoryID);
                              if (ul)
                              {
                                  li_father.removeChild(ul);
                              }                
                          }
                      }

                      // 加載根節點
                      var tree = el("CategoryTree");
                      var root = document.createElement("li");
                      root.id = "li_0";
                      tree.appendChild(root);
                      
                      // 加載頁面時顯示第一級分類
                      ExpandSubCategory(0);
                      
                      function PreloadFormUrl(iCategoryID)
                      {
                          // 采用同步調用的方式獲取圖片的信息                
                          var ds = AjaxMethod.GetFormsList(iCategoryID).value;
                          // 如果返回了結果
                          if (ds)
                          {
                              // 判斷數據表是否不為空
                              if (ds.Tables[0].Rows.length > 0)
                              {
                                  // 返回的信息數據表
                                  dt = ds.Tables[0];
                                  el("furl").src = dt.Rows[0].FormUrl;                                    
                              }
                              else // 分類下沒有
                              {                        
                              }
                          }                
                      }
                      </script>            
              </form>
          </body>
          </html>
          2.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 Pages_Home_HomePage : System.Web.UI.Page
          {
              protected void Page_Load(object sender, EventArgs e)
              {
                  Utility.RegisterTypeForAjax(typeof(AjaxMethod));
              }
          }
          3.建立一個tree.css的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 #99BEEF;
              background:#D2E4FC;
              color:inherit;
              margin:3px;
              padding:3px;
              height:600px;
          }
          4.建立一個類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.AppSettings["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腳本
          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 AS  
          BEGIN 

          declare @count int
          select @count = (select count(*) from Category where FatherID=@cat_id) 
          if (@count=0)
          return 1
          return 0

          END
          6.源代碼下載

          posted on 2007-06-20 13:22 chenguo 閱讀(201) 評論(0)  編輯  收藏 所屬分類: AJAX Dev

          <2025年6月>
          25262728293031
          1234567
          891011121314
          15161718192021
          22232425262728
          293012345

          導航

          統計

          留言簿

          隨筆分類(1)

          文章分類(52)

          好友 小山的博客

          最新隨筆

          最新評論

          主站蜘蛛池模板: 新乡县| 镇沅| 饶河县| 洛浦县| 屏东市| 岱山县| 镇安县| 化隆| 偃师市| 平武县| 浮梁县| 凤翔县| 海晏县| 大竹县| 阜宁县| 新乡县| 陆川县| 阿图什市| 满城县| 泰兴市| 永和县| 南平市| 漳平市| 天津市| 昌图县| 武川县| 南江县| 灌云县| 磴口县| 墨竹工卡县| 临朐县| 洪洞县| 山阴县| 资中县| 中阳县| 平顶山市| 海林市| 县级市| 淮南市| 小金县| 措美县|