Ajax实现无刷新树

最新推荐文章于 2017-07-18 14:58:01 发布
最新推荐文章于 2017-07-18 14:58:01 发布
阅读量4.5k 收藏 6
点赞数
分类专栏： Ajax 文章标签： ajax function null javascript string forms
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/21aspnet/article/details/1534279
版权

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. 源代码下载
 
深度Java
关注
专栏目录
ajax动态树的实现（核心代码100行以内）
xfy217的专栏
12-31 1024
早就想写一个自己的动态树了，网上也能找到很多，可始终是别人实现的。以前一直没时间，这不年底了，工作任务也完成了，闲着没事就写了这个东西，和大家分享一下一.设计思想：1.布局css+div:好处就不多说了2.利用ajax，当点击树中某个节点时才生成其子节点，这样能避免了客户端一次性加载整棵树,执行速度快3.树的生成用java控制而不是像Dtree的实现是用javascript实现，d
第九篇 1+X考证 Web前端测试题（Ajax篇）
灵魂学者的博客
06-24 8544
第九篇 1+X考证 Web前端测试题（Ajax篇）
jqueryTreeTable+ajax(构建树形表格)
05-28
jqery.treeTable + ajax + mysql数据库， ssm架构构建树形表格
ajax动态树的实现
09-25
ajax动态树的实现,完整的ajax动态树实现代码，绝对不可以错过
jQuery + XML + AJAX实现无刷新树形结构（C#后端）
"一个使用jQuery、XML和AJAX构建的简单无刷新树形结构，后端采用C#语言。" 本文将详细介绍如何利用jQuery、XML和AJAX技术创建一个无刷新的树形结构，其中不涉及CSS样式，后端处理采用C#。首先，我们从给出的代码...
Ajax实现无刷新树(.net)
11-20
"Ajax实现无刷新树"是指利用Ajax技术实现在不重新加载整个网页的情况下更新页面上的树形结构数据。这种功能在很多应用场景中都非常有用，比如文件管理、组织架构展示等。 一、Ajax基础 Ajax的核心是通过JavaScript...
使用Ajax技术构建无刷新树形菜单
在Ajax实现无刷新树的过程中，主要涉及以下几个关键点： 1. HTML 结构：首先，我们需要创建一个基本的HTML页面布局，包含用于展示树形结构的容器。在提供的代码中，可以看到一个`<div>`元素用于显示树（`Category...
23个免费的AJAX树菜单组件
我的成长之路
03-29 134
&lt;noscript type="text/javascript"&gt;&lt;/noscript&gt; &lt;noscript src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"&gt;&lt;/noscript&gt; 1、dTree2、Treevi
利用Ajax实现动态加载树
09-26
在实际应用中我们经常会用到树,无论是用javascript实现还是用TreeView等控件,都能很好的实现我们所要的功能.但是如果树的节点和层次很多的时候,例如超过2000个节点的时候,一次性把树加载到页面就需要等待很长的时间.为了解决这个问题,我曾经在项目里利用Ajax来动态加载节点,即开始只显示必要的节点,当用户展开树的时候再加载对应的节点......
基于AJAX的动态树型结构的设计与实现
02-09 2556
　摘 要:简要介绍了一种通用的，动态树型结构的实现方案，该方案基于Asynchronous JavaScript and XML，结合Struts框架设计实现了结构清晰、扩展性良好的多层架构，数据存储于数据库，结合XML描述树的节点信息，使得任何按预定的XML文档描述的信息都可以通过动态树来展现。　　关键词:MVC模式；Ajax；树型结构；字典序　　树型结构是一类应用非常广泛的数据结构。人类社会中
jstree--AJAX 请求获取数据形成树
热门推荐
往前的娘娘
07-18 1万+
概述： 一般情况下都是通过ajax进行请求获取数据。boostrap+ajax 1、代码 //权限分配 $('#authority').click(function() { $("#jstree").jstree({ "core" : { "themes" : { "res
利用Ajax实现树的动态加载
野文的专栏
09-26 5558
      在很多项目中我们都会用到树，或者用类似的TreeView控件，或者直接用JavaScript和HTML来直接实现。一般情况下，我们都是一次性将所有的节点都加载到树上，当树的节点不是很多的情况下倒没什么问题，但是如果树的节点数很多的时候就影响显示效率了。       去年曾经在一个项目里用树结构来显示一个单位的岗位，在实际环境中岗位数多达两三千个，利用传统的方法一次性将所有岗位都加载
Ajax 实现无刷新编辑页面
weixin_30376323的博客
07-22 102
1.下载ajax, .net1.1版本ajaxpro.dll .net2.0就用ajaxpro2.dll 2.在VS项目里面添加它们的引用,并在Web.COnfig中配置(我这里用的是.net 2.0) <system.web> <httpHandlers> <addverb="POST,GET"path="AjaxPro...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值