Ajax的无刷新树型结构

最新推荐文章于 2021-08-05 23:59:32 发布
最新推荐文章于 2021-08-05 23:59:32 发布
阅读量1.6k 收藏 4
点赞数
分类专栏： Ajax ASP.NET 文章标签： ajax dataset tree function null url
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baby97/article/details/4278376
版权

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

银狐被占用
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
基于AJAX的动态树型结构的设计与实现
02-09 2538
　摘 要:简要介绍了一种通用的，动态树型结构的实现方案，该方案基于Asynchronous JavaScript and XML，结合Struts框架设计实现了结构清晰、扩展性良好的多层架构，数据存储于数据库，结合XML描述树的节点信息，使得任何按预定的XML文档描述的信息都可以通过动态树来展现。　　关键词:MVC模式；Ajax；树型结构；字典序　　树型结构是一类应用非常广泛的数据结构。人类社会中
JSP+Ajax 无刷新树型菜单数据库版
04-01
【JSP+Ajax 无刷新树型菜单数据库版】是一个技术实现方案，它结合了Java Server Pages（JSP）和Asynchronous JavaScript and XML（Ajax）技术，用于创建一个动态、无需页面整体刷新的树型菜单。这个解决方案的核心是...
用Ajax实现jsp页面树状结构
10-23
在jsp页面中显示树状结构功能的JavaScript
Ajax+dtree实现动态加载无刷新树
热门推荐
Fantasy
03-28 1万+
   今天研究了很久，终于把动态加载无刷新树给整出来了，反正刚开始也是在网上搜了很多东东，但感觉都不太方便，最后找到了dtree，又发现一位朋友把dtree的源代码进行了更改，（dtree发布于2003年，那时编写这个javascript脚本的作者估计还不知道ajax这玩意吧，呵呵），就可以实现无刷新动态加载了，废话不说，先把例子整理出来先！首先是Sql脚本（MSSQL） IF E
angular-ui-tree
dizhihuo8878的博客
12-18 187
angular-ui-tree的github项目地址：https://github.com/angular-ui-tree/angular-ui-tree DEMO目录结构如下： bootstrap.css为3.0以上 app.css内容.btn { margin-right: 8px;}.angular-ui-tree-handle { backgrou...
AJAX实现动态树型结构
孤雁是天的寂寞
05-07 894
树型结构是一类应用非常广泛的数据结构。人类社会中宗族的族谱和现代企业的组织形式都是树型结构。在计算机领域中,文件系统中文件的管理结构、存储器管理中的页表、数据库中的索引等也都是树型结构。随着Internet的飞速发展，树型结构在浏览器/服务器（Browser/Server，简称B/S）应用系统的应用也越来越广泛。 　　目前，在互联网上广泛存在、应用的树型结构一般分为两种：静态和动态结构。
ajax 树,Ajax实现无刷新树
weixin_36085931的博客
08-05 88
电脑配置 Windows 手机 电脑硬件 数码产品 网络 Win11 Win10 Win7 网络安全 笔记本电脑 Android CPU处理器 电脑内存 显示器1.建立一个aspx页面html代码小山function el(id){return document.getElementById(id);}function ExpandSubCategory(iCategoryID){var li_f...
基于ajax的动态树型结构的设计与实现
03-14 319
树型结构是一类应用非常广泛的数据结构。人类社会中宗族的族谱和现代企业的组织形式都是树型结构。在计算机领域中,文件系统中文件的管理结构、存储器管理中的页表、数据库中的索引等也都是树型结构。随着internet的飞速发展，树型结构在浏览器/服务器（browser/server，简称b/s）应用系统的应用也越来越广泛。 　目前，在互联网
JSP+Ajax无刷新树型菜单数据库版
01-10
本项目是基于JSP技术实现的无刷新树型菜单，利用Ajax技术进行后台数据的动态加载，提供了一种高效、用户友好的界面交互体验。以下将详细阐述其中涉及的技术点及其重要性。 首先，**JSP（JavaServer Pages）** 是一...
一种基于Ajax的动态树型结构的设计与实现.pdf
10-29
本文提出了一种基于Ajax和Yahoo用户界面库的动态树型结构实现方案，该方案支持无刷新的节点增删改操作，显著提升了用户交互体验。 #### Ajax技术简介 Ajax（Asynchronous JavaScript and XML）是一种用于构建交互...
ajax +xml 实现部门树型结构显示
03-21
在本文中，我们将深入探讨如何使用Ajax和XML技术来实现部门树型结构的显示。Ajax（异步JavaScript和XML）是一种在不刷新整个网页的情况下更新部分网页内容的技术，而XML则是一种用于存储和传输数据的标准格式。在Web...
ajax动态生成树型菜单
03-04
6. **渲染树型菜单**：在成功接收到JSON数据后，使用Dojo Tree的API解析数据并创建树型结构。`<sx:tree>`标签将帮助我们在页面上显示这个动态生成的树。 7. **事件处理**：为树节点添加点击事件监听器，以便在用户...
angular-ui-tree的使用实例
qq_43437571的博客
06-25 1222
项目用的angular比较老，是1.3.X版本的，所以可以用的配套的树形就比较少，虽然这棵树官方文档上看起来不是太好看，但是修改一下样式还是可以的。 .angular-ui-tree { max-height:150px; overflow-y: scroll; margin-bottom: 15px; } .angular-ui-tree-handle { col...
jquery+webservice方式的百度搜索下拉提示
银狐的专栏
08-23 1万+
default.aspx 百度搜索下拉 #h_list { background:#EEE; z-index:99; position:absolute; font-size:12px; } #h_list li{ list-style-type:none; font-size: 12px; margin:0 0 0 0; padding-l
给动态数组增加元素
银狐的专栏
11-02 9618
在实际开发中，很多人都会遇到动态数组，无法固定数组的长度，随时需要向数组中增加元素。 下面这个函数可以解决以上问题。     ///     /// 对数组进行重建并添加新值     ///     /// 原数组(string[])     /// 要添加的值     /// 新数组(string[])     public static string[] ArrayResi
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值