当前位置： 首页 > 编程日记 > 正文

Ajax实现无刷新树

编程日记 2024-11-18 01:10:00

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.源代码下载

https://www.dkcj.cn/info/27977.html

相关文章：

GEMM性能提升200倍，AutoKernel算子优化工具正式开源

作者 | OPEN AI LAB 研究员 吕春莹出品 | AI科技大本营头图 | CSDN下载自视觉中国随着AI技术的快速发展&#xff0c;深度学习在各个领域得到了广泛应用。深度学习模型能否成功在终端落地应用&#xff0c;满足产品需求&#xff0c;一个关键的指标就是神经网络模型的推理性能。于…

编程日记2024/11/18 01:00:00

MySQL的log_bin和sql_log_bin 到底有什么区别？

2019独角兽企业重金招聘Python工程师标准>>> log_bin:二进制日志。 二进制日志的作用&#xff1a; 1&#xff1a;数据恢复 如果你的数据库出问题了&#xff0c;而你之前有过备份&#xff0c;那么可以看日志文件&#xff0c;找出是哪个命令导致你的数据库出问题了&a…

编程日记2024/11/18 00:50:00

Ajax实现在textbox中输入内容，动态从数据库中模糊查询显示到下拉框中

功能&#xff1a;在textbox中输入内容&#xff0c;动态从数据库模糊查询显示到下拉框中&#xff0c;以供选择1.建立一aspx页面&#xff0c;html代码 <HTML><HEAD><title>WebForm1</title><SCRIPT language"javascript">//城市-------…

编程日记2024/11/18 00:40:00

数据连接linux网络编程之TCP/IP基础（四）：TCP连接的建立和断开、滑动窗口

在写这篇文章之前&#xff0c;xxx已经写过了几篇关于改数据连接主题的文章,想要了解的朋友可以去翻一下之前的文章 一、TCP段格式&#xff1a; TCP的段格式如下图所示 源端口号与目标端口号 源端口号和目标端口号&#xff0c;加上IP首部的源IP地址和目标IP地址唯一确定一个TCP连…

编程日记2024/11/18 00:30:00

鲲鹏高校行太原站来袭，两大课程一站式掌握未来潮流

未来是算力比拼的时代&#xff0c;也是属于象牙塔中莘莘学子们的时代。北京时间12月14日&#xff0c;为了进一步培养计算产业人才&#xff0c;拓展鲲鹏产业生态影响力&#xff0c;由中北大学信息商务学院主办&#xff0c;山西鲲鹏生态创新中心承办的鲲鹏高校行系列活动在中北大…

编程日记2024/11/18 00:20:00

R语言通过loess去除某个变量对数据的影响

当我们想研究不同sample的某个变量A之间的差异时&#xff0c;往往会因为其它一些变量B对该变量的固有影响&#xff0c;而影响不同sample变量A的比较&#xff0c;这个时候需要对sample变量A进行标准化之后才能进行比较。标准化的方法是对sample 的 A变量和B变量进行loess回归&am…

编程日记2024/11/18 00:10:00

Ajax实现DataGrid/DataList动态ToolTip

1.建立一aspx页面&#xff0c;html代码2.cs代码 usingSystem.Data.SqlClient;usingSystem.IO;protectedvoidPage_Load(objectsender, EventArgs e) { if (!Page.IsPostBack) { BindData(); } if (ID ! "") …

编程日记2024/11/18 00:00:00

语言模型自然语言处理[置顶] 哥伦比亚大学 自然语言处理 公开课 授课讲稿 翻译（四）...

每日一贴,今天的内容关键字为语言模型自然语言处理 媒介&#xff1a;灵机一动看了一个自然语言处理公开课&#xff0c;大牛柯林斯讲解的。认为很好&#xff0c;就自己动手把它的讲稿翻译成中文。一方面&#xff0c;希望通过这个翻译过程&#xff0c;让自己更加理解大牛的讲解内…

编程日记2024/11/17 23:50:00

腾讯天衍实验室夺世界机器人大赛双冠军，新算法突破脑机接口瓶颈

日前&#xff0c;“2020世界机器人大赛-BCI脑控机器人大赛”公布成绩&#xff0c;腾讯天衍实验室和天津大学高忠科教授团队组成的C2Mind战队&#xff0c;经过多轮赛程的激烈比拼&#xff0c;实力入围BCI脑控机器人大赛“运动想象范式”赛题决赛&#xff0c;最终成功斩获技术赛“…

编程日记2024/11/17 23:40:00

免费的私人代码托管(bitbucket) 和 常用git指令

转自 http://blog.csdn.net/nzing/article/details/24452475 今天想找个免费的私人代码托管平台&#xff0c;github,googlecode, SourceForge都不行&#xff0c;后来发现bitbucket&#xff08;https://bitbucket.org/&#xff09;&#xff0c;注册时&#xff0c;如果不多于5个人…

编程日记2024/11/17 23:30:00

Ajax简单示例之改变下拉框动态生成表格

1.建立一个aspx页面&#xff0c;html代码<html xmlns"http://www.w3.org/1999/xhtml"><head runat"server"><title>Untitled Page</title><script type"text/javascript">var xmlHttp; function createXML…

编程日记2024/11/17 23:20:00

for语句内嵌例题与个人理解

例题1:画出一个高度为3的等腰三角形. 编写程序: #include<stdio.h> main() { int a,b,c,h; h3; \\h为高度,赋值常量3. for(a1;a<h;a) …

编程日记2024/11/17 23:10:00

2020百度云秀最新成绩单，AI Cloud活跃客户数同比去年增长65%

12月17日&#xff0c;“ABC SUMMIT 2020百度云智峰会”在北京举行。大会以“智者先行”为主题&#xff0c;百度CTO王海峰展现了518新战略后百度智能云取得的最新成绩和产业智能化成果。“云智一体”成百度智能云独特的竞争力&#xff0c;在各行各业加快规模化落地。本届大会首次…

编程日记2024/11/17 23:00:00

构建之法读后感part6

这个星期看完了构建之法的第六章&#xff0c;看了第六章之后了解到敏捷开发以用户的需求进化为核心&#xff0c;采用迭代、循序渐进的方法进行软件开发。在敏捷 开发中&#xff0c;软件项目在构建初期被切分成多个子项目&#xff0c;各个子项目的成果都经过测试&#xff0c;具备…

编程日记2024/11/17 22:50:00

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

1.html代码<HTML><HEAD><title>Ajax实现无刷新三联动下拉框</title><meta content"Microsoft Visual Studio .NET 7.1"name"GENERATOR"><meta content"C#"name"CODE_LANGUAGE"><meta content&…

编程日记2024/11/17 22:40:00

用算法改造过的植物肉，有兴趣试试么？

来源 | HyperAI超神经责编 | 晋兆雨头图 | CSDN 下载自视觉中国本月初&#xff0c;麦当劳宣布&#xff0c;将于 2021 年推出植物肉全新产品线 McPlant&#xff0c;新品品类将包括汉堡、鸡肉替代品以及早餐三明治。事实上&#xff0c;麦当劳并不是尝试植物基产品的首家快餐店&am…

编程日记2024/11/17 22:30:00

浅谈软件自动化集成测试的流程

浅谈自动化集成测试相信从事软件测试专业的同行很早就知道了自动化的测试技术&#xff0c;也许大家也很想知道具体的软件自动化具体的运行实施过程。本人学识尚欠&#xff0c;目前无法对综合的软件自动化的测试进行阐述&#xff0c;但是本人通过不同的书籍对软件自动化的集成测…

编程日记2024/11/17 22:20:00

web聊天室总结

前言: 最近在写一个聊天室的项目&#xff0c;前端写了挺多的JS(function)&#xff0c;导致有点懵比&#xff0c;出了BUG&#xff0c;也迟迟找不到。所以昨天把写过的代码总结了一下&#xff0c;写成博客。 项目背景 参考博客: http://www.cnblogs.com/alex3714/articles/533763…

编程日记2024/11/17 22:10:00

概率图论PGM的D-Separation(D分离)

为什么80%的码农都做不了架构师&#xff1f;>>> 本文大部分来自&#xff1a;http://www.zhujun.me/d-separation-separation-d.html 其中找了一些资料发现原文中阻塞&#xff08;block&#xff09;中&#xff08;b&#xff09;部分有出路&#xff0c;黑体部分修改…

编程日记2024/11/17 22:00:01

CSDN湘苗培优|高起点步入职场，快人一步！

课程了解3个培养阶段结束后&#xff0c;让你具备&#xff1a;解决问题能力、交付能力、有经验。系统基础训练&#xff08;阶段一&#xff09;•内容&#xff1a;程序逻辑基础、计算机原理、操作系统工作原理、C语言&#xff08;掌握内存的分配&#xff09;、密码学、信息论、概…

编程日记2024/11/17 21:50:00

php与Ajax实例

****************AJAX的学习要有JavaScript、HTML、CSS等基本的Web开发能力**************** [AJAX介绍] Ajax是使用客户端脚本与Web服务器交换数据的Web应用开发方法。Web页面不用打断交互流程进行重新加裁&#xff0c;就可以动态地更新。使用Ajax&#xff0c;用户可以创建…

编程日记2024/11/17 21:40:00

[转]构建基于WCF Restful Service的服务

本文转自&#xff1a;http://www.cnblogs.com/scy251147/p/3566638.html 前言 传统的Asmx服务&#xff0c;由于遵循SOAP协议&#xff0c;所以返回内容以xml方式组织。并且客户端需要添加服务端引用才能使用&#xff08;虽然看到网络上已经提供了这方面的Dynamic Proxy&#xff…

编程日记2024/11/17 21:30:00

Ajax使用初步

Ajax定义为“Asynchronous JavaScript XML”的简称&#xff0c;也就是异步的JavaScript和XML处理。从原理上看&#xff0c;主要是Ajax可以通过调用HttpRequest实现与服务器的异步通讯&#xff0c;并最终在网页中实现丰富友好的用户界面Ajax使用初步&#xff0c;配置步骤1.把Aj…

编程日记2024/11/17 21:20:00

AI化身监工，上班还能摸鱼吗？

来源 | 人民数字FINTECH责编 | 晋兆雨头图 | CSDN 下载自视觉中国俗话说“上班摸鱼一时爽&#xff0c;一直摸鱼一直爽。”上班族这群“时间管理大师们”往往能在上班的时间中挤出一半的时间来摸鱼&#xff1a;在距离上班时间的最后一分钟打卡&#xff0c;午饭时间未到就打开各大…

编程日记2024/11/17 21:10:00

解决“安装程序无法定位现有系统分区,也无法创建新的系统分区”的方法

使用老毛桃PE格式化C盘后安装Win7出现“安装程序无法定位现有系统分区,也无法创建新的系统分区”的错误。本文给出了我遇到该情况的解决办法&#xff0c;亲身经历&#xff0c;绝非抄袭。 在网上看了好多办法&#xff0c;都无效。最后竟然用下面的方法成功了&#xff1a; 1. 使用…

编程日记2024/11/17 21:00:00

Linux 上 12 个高效的文本过滤命令

在这篇文章中&#xff0c;我们将会看一些 Linux 中的过滤器命令行工具。过滤器是一个程序&#xff0c;它从标准输入读取数据&#xff0c;在数据上执行操作&#xff0c;然后把结果写到标准输出。 因此&#xff0c;它可以用来以强大的方式处理信息&#xff0c;例如重新结构化输出…

编程日记2024/11/17 20:50:00

linux在多核处理器上的负载均衡原理

原文出处&#xff1a;http://donghao.org/uii/ 【原理】 现在互联网公司使用的都是多CPU&#xff08;多核&#xff09;的服务器了&#xff0c;Linux操作系统会自动把任务分配到不同的处理器上&#xff0c;并尽可能的保持负载均衡。那Linux内核是怎么做到让各个CPU的压力均匀的呢…

编程日记2024/11/17 20:40:00

完全免费，简化版Plotly推出，秒绘各类可视化图表

作者 | Peter来源 | Python编程时光今天给大家推荐一个可视化神器 - Plotly_express &#xff0c;上手非常的简单&#xff0c;基本所有的图都只要一行代码就能绘出一张非常酷炫的可视化图。以下是这个神器的详细使用方法&#xff0c;文中附含大量的 GIF 动图示例图。环境准备本…

编程日记2024/11/17 20:30:00

Linux 启动过程详解

说明&#xff1a;由于图片太大&#xff0c;上传博客的图片是jpg格式的有点失真&#xff0c;看不清楚&#xff0c;可以双击打开查看&#xff0c;有朋友想看高清&#xff0c;无码&#xff0c;无水印的大图&#xff08;png格式&#xff09;请下载附件&#xff01;转载于:https://b…

编程日记2024/11/17 20:20:00

java web项目优化记录：优化考试系统

考试系统在进行压力測试时发现&#xff0c;并发量高之后出现了button无反应。试题答案不能写到数据库的问题&#xff0c;于是针对这些核心问题&#xff0c;进行了优化。 数据库方面&#xff1a; Select语句&#xff1a;Select * from TEB_VB_XZTRecord改为select 必须的列 form…

编程日记2024/11/17 20:10:00