1.建立一个aspx页面
html代码

<htmlxmlns="http://www.w3.org/1999/xhtml"><headid="Head1"runat="server"><title>小山</title><linktype="text/css"href="../../Styles/tree_css/tree.css"rel="stylesheet"></head><body><formid="Form1"runat="server"><tablewidth=100%cellpadding=0cellspacing=0border=0><colgroup><colwidth=180/><col/></colgroup><tr><td><divclass="TreeMenu"id="CategoryTree"style="width: 100%; height: 489px"></div></td><td><iframeid=furlheight=20style="height: 497px; width: 100%;"></iframe></td></tr></table>                            
<scriptlanguage="jscript">functionel(id)
{
returndocument.getElementById(id);                
            }functionExpandSubCategory(iCategoryID)
{
varli_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);                
            }
functionGetSubCategory_callback(response)
{
vardt=response.value.Tables[0];
if(dt.Rows.length>0)
{
variCategoryID=dt.Rows[0].FatherID;
                }varli_father=el("li_"+iCategoryID);
varul=document.createElement("ul");
for(vari=0;i<dt.Rows.length;i++)
{
if(dt.Rows[i].IsChild==1)//叶子节点{
varli=document.createElement("li");
                        li.className="Child";
                        li.id="li_"+dt.Rows[i].CategoryID;
                        
varimg=document.createElement("img");
                        img.id=dt.Rows[i].CategoryID;
                        img.className="s";
                        img.src="../../Styles/tree_css/s.gif";
                        
vara=document.createElement("a");
varid=dt.Rows[i].CategoryID;
                        a.onmouseover=function()
{
                            PreviewImage(id);
                        };
                        a.href="javascript:OpenDocument('"+dt.Rows[i].CategoryID+"');";
                        a.innerHTML=dt.Rows[i].CategoryName;
                    }else{
varli=document.createElement("li");
                        li.className="Closed";
                        li.id="li_"+dt.Rows[i].CategoryID;
                        
varimg=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="展开/折叠";
                        
vara=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);
            }            
//叶子节点的单击响应函数functionOpenDocument(iCategoryID)
{
//预加载信息PreloadFormUrl(iCategoryID);
            }            
functionPreviewImage(iCategoryID)
{
                
            }
functionChangeStatus(iCategoryID)
{
varli_father=el("li_"+iCategoryID);
if(li_father.className=="Closed")
{
                    li_father.className="Opened";
                }else{
                    li_father.className="Closed";
                }            }
functionswitchNote(iCategoryID, show)
{
varli_father=el("li_"+iCategoryID);
if(show)
{
varul=document.createElement("ul");
                    ul.id="ul_note_"+iCategoryID;
                    
varnote=document.createElement("li");
                    note.className="Child";
                    
varimg=document.createElement("img");
                    img.className="s";
                    img.src="../../Styles/tree_css/s.gif";
                    
vara=document.createElement("a");
                    a.href="javascript:void(0);";
                    a.innerHTML="请稍候";
                    
                    note.appendChild(img);
                    note.appendChild(a);
                    ul.appendChild(note);
                    li_father.appendChild(ul);
                }else{
varul=el("ul_note_"+iCategoryID);
if(ul)
{
                        li_father.removeChild(ul);
                    }                }            }
//加载根节点vartree=el("CategoryTree");
varroot=document.createElement("li");
            root.id="li_0";
            tree.appendChild(root);
            
//加载页面时显示第一级分类ExpandSubCategory(0);
            
functionPreloadFormUrl(iCategoryID)
{
//采用同步调用的方式获取图片的信息vards=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代码

usingSystem;
usingSystem.Data;
usingSystem.Configuration;
usingSystem.Collections;
usingSystem.Web;
usingSystem.Web.Security;
usingSystem.Web.UI;
usingSystem.Web.UI.WebControls;
usingSystem.Web.UI.WebControls.WebParts;
usingSystem.Web.UI.HtmlControls;
usingAjaxPro;

publicpartialclassPages_Home_HomePage : System.Web.UI.Page
{
protectedvoidPage_Load(objectsender, 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

usingSystem;
usingSystem.Data;
usingSystem.Data.SqlClient;
usingSystem.Configuration;
usingSystem.Web;
usingSystem.Web.Security;
usingSystem.Web.UI;
usingSystem.Web.UI.WebControls;
usingSystem.Web.UI.WebControls.WebParts;
usingSystem.Web.UI.HtmlControls;
usingAjaxPro;

/**////<summary>///Summary description for AjaxMethod
///</summary>
publicclassAjaxMethod
{}{
publicAjaxMethod()
{
////TODO: Add constructor logic here
//
}    [AjaxMethod(HttpSessionStateRequirement.ReadWrite)]
publicstaticDataSet GetSubCategory(intiCategoryID)
{}{
stringsql=string.Format("SELECT CategoryID, CategoryName, FatherID, dbo.IsLeaf(CategoryID) as IsChild FROM Category WHERE FatherID = {0}", iCategoryID);
returnGetDataSet(sql);
    }
    [AjaxMethod(HttpSessionStateRequirement.ReadWrite)]
publicstaticDataSet GetFormsList(intiCategoryID)
{}{
stringsql=string.Format("SELECT * FROM forms WHERE form_category_id = {0}", iCategoryID);
returnGetDataSet(sql);
    }publicstaticstringConnectionString=ConfigurationSettings.AppSettings["ConnectionString"].ToString();

publicstaticDataSet GetDataSet(stringsql)
{}{
            SqlDataAdapter sda=newSqlDataAdapter(sql, ConnectionString);
            DataSet ds=newDataSet();
            sda.Fill(ds);
if(ds!=null)
returnds;
elsereturnnull;
        }}

5.sql脚本

ifexists(select*fromdbo.sysobjectswhereid=object_id(N'[dbo].[Category]')andOBJECTPROPERTY(id, N'IsUserTable')=1)
droptable[dbo].[Category]GO
ifexists(select*fromdbo.sysobjectswhereid=object_id(N'[dbo].[Forms]')andOBJECTPROPERTY(id, N'IsUserTable')=1)
droptable[dbo].[Forms]GO
CREATETABLE[dbo].[Category](
[CategoryID][int]IDENTITY(1,1)NOTNULL,
[CategoryName][varchar](20) COLLATE Chinese_PRC_CI_ASNULL,
[FatherID][int]NULL)ON[PRIMARY]GO
CREATETABLE[dbo].[Forms](
[FormID][int]IDENTITY(1,1)NOTNULL,
[FormName][nvarchar](50) COLLATE Chinese_PRC_CI_ASNULL,
[FormUrl][nvarchar](50) COLLATE Chinese_PRC_CI_ASNULL,
[Form_category_id][int]NULL,
[target][char](10) COLLATE Chinese_PRC_CI_ASNULL)ON[PRIMARY]GOCREATEFUNCTIONIsLeaf (@cat_idint)  
RETURNSintASBEGIN
declare@countintselect@count=(selectcount(*)fromCategorywhereFatherID=@cat_id) 
if(@count=0)
return1return0
END

6.源代码下载

Ajax实现无刷新树相关推荐

  1. Ajax实现无刷新三联动下拉框

    1.html代码 <HTML>     <HEAD>         <title>Ajax实现无刷新三联动下拉框</title>         &l ...

  2. 利用动态加载模板，配合ajax实现无刷新操作

    关键字:DataGrid 动态模板 Ajax 我们使用ajax实现无刷新界面时,对于DataGrid,Repeater等列表还是比较麻烦的,经过我的尝试,找出一种比较合理的方法,可以免除对html的加 ...

  3. ajax无刷新留言板远吗,php+ajax制作无刷新留言板，phpajax刷新留言板_PHP教程

    php+ajax制作无刷新留言板,phpajax刷新留言板 本文就是和大家分享一款由php结合ajax实现的无刷新留言板,先给大家看一下最后的效果图: 数据库连接代码如下: index.php文件代码 ...

  4. jQuery+php+ajax实现无刷新上传文件功能

    2019独角兽企业重金招聘Python工程师标准>>> jQuery+php+ajax实现无刷新上传文件功能,还带有上传进度条动画效果,支持图片.视频等大文件上传. js代码: &l ...

  5. AJAX+JavaScript无刷新检查用户名

    AJAX+JavaScript无刷新检查用户名是否可用2009-04-20 16:26   JavaScript 和 Ajax 代码 <script language="javascr ...

  6. ajax 页面无刷新,Ajax的页面无刷新实现详解（附代码）

    这次给大家带来Ajax的页面无刷新实现详解(附代码),Ajax页面无刷新实现的注意事项有哪些,下面就是实战案例,一起来看一下. ajax (ajax开发) AJAX即"Asynchronou ...

  7. 用Atlas来实现一个基于AJAX的无刷新Chatroom

    Atlas是微软提供的一个AJAX工具包,封装了实现AJAX的所需的Java Script,使用起来非常简单,可以直接调用Web Service方法,然后通过Asynchronous Call的方式回 ...

  8. jQuery+Ajax+PHP无刷新分页

    代码需要在后台运行(包括页面index.html,ajax.php,connect.php,还有数据库food.sql) index.html <!DOCTYPE html> <ht ...

  9. 新闻留言php,php+ajax实现无刷新的新闻留言系统，ajax留言系统_PHP教程

    php+ajax实现无刷新的新闻留言系统,ajax留言系统 本文介绍了一款无刷新的新闻留言系统,最简明易懂的一个ajax无刷新留言系统,源码中省略了接受数据验证的过程,大家可根据自己的需求进行扩展,下 ...

最新文章

  1. oracle Ratio_to_report的用法
  2. myeclipse中的一些设置
  3. 想在客户端脚本中引用CHECKBOXLIST中的CHECKBOX项?
  4. 【Breadth-first Search 】279. Perfect Squares
  5. 【学神-RHEL7】1-3-Linux基本命令和配置服务器来电后自动开机
  6. 2020国内互联网公司的开源项目及Github地址部分汇总
  7. 计算机专业答辩开场白,毕业答辩开场白三分钟
  8. mysql 删除数据 分页_PHP实现对mysql数据库内容分页显示
  9. design expert响应面分析_第01组（17）需求分析报告 - yuqiao1120
  10. vue.js 输入框金额限制
  11. Gradle sync failed: Unsupported method: NativeArtifact.getSourceFolders().
  12. VF 动态规划系列dp入门
  13. 是什么的简称_全国各地区车牌号简称，说说你们那的车牌是什么？
  14. mysql 练习题网站_mysql练习题
  15. 密码破解全能工具：Hashcat密码破解攻略
  16. 读取阿里云服务器图片到本地
  17. matlab 高精度无理数,如何从MatLab上的无理数生成近似分数？
  18. 使用js制作完整轮播图 （解决最后一张切换到前面一张的动画问题）
  19. QQ空间热修复原理深入解析
  20. 涉密计算机信息系统的安全审计,涉密计算机信息系统安全审计.doc

热门文章

  1. 重改mysql名字_如何快速重命名MySQL数据库(更改模式名称)...
  2. logback-spring.xml读取spring的属性
  3. 使用 Inception-v3，实现图像识别（Python、C++）
  4. 温控自动烘焙系统的研究与实现
  5. OpenCV 多层感知器训练代码示例
  6. HDU - 5877 Weak Pair 2016 ACM/ICPC 大连网络赛 J题 dfs+树状数组+离散化
  7. 树莓派视觉小车 -- 人脸追踪（人脸识别、PID控制舵机运动）
  8. 【汇总】ElementUI中高频次使用代码片段
  9. 新建eclipse的java项目报错处理
  10. 在Ubuntu 14.04.5 64bit上安装git GUI客户端GitKraken